1. HOME
  2. ブログ
  3. IT技術
  4. 【Swift4】SnapKitがめちゃくちゃ便利だった件

【Swift4】SnapKitがめちゃくちゃ便利だった件

SnapKitというライブラリを使ってみる

高階さん 高階さん

(株)ライトコードの高階(たかがい)です!

前回の記事では、NSLayoutConstraint NSLayoutAnchor を使ってAutoLayout を実装してみました。

今回は、さらに簡単に実装するためのSnapKit というライブラリがあるらしいので、サクッと使ってみました!

「SnapKit」を覚えたい人は、是非前回の記事を読んでください~!

前回の記事

開発環境

前回に引き続き以下の環境で作業しています。

MacOS10.14
Swift4.2
Xcode10.1
Cocoapods1.6.1
SnapKit4.0

こちらの記事もオススメ!

SnapKitについて

SnapKit の対応バージョンについてですが、使用可能な環境は以下です。

iOS8.0+
Mac OS X10.11+
tvOS9.0+
Xcode9.0+
Swift3.0+

Swift3.x であれば SnapKit3.0.0、Swift4.x であれば SnapKit4.0.0 を使用してください。

また、Cocoapods と Carthage の両方に対応しています。

SnapKitの使い方

早速、SnapKit の使い方についてですが、まずは見てもらった方が早いと思うので、100pt 四方の赤い View を画面中央に表示させてみました。

高階さん 高階さん
下手したら InterfaceBuilder(StoryBoard,Xib)で実装するより簡単でわかり易いのでは…!?

基本的な使い方

上記の例の通り、makeConstraint() の引数に指定されているクロージャの中、make(ConstraintMaker)に制約を設定していきます。

Attributeの表(標準のAttributeとほぼ変わりないです)

Attributes位置
top上端
bottom下端
leading先頭
trailing末尾
left左端
right右端
width横幅
height高さ
size横幅と高さ
centerXX軸上の中心
centerYY軸上の中心
center中心点

「leading/trailing」「left/right」についての補足

前回の記事では Attribute の種類にまで触れていなかったんですが、leading/trailing、left/right という似てるものがあるので軽く補足します。

(現状、leadingとleft, trailingとrightが示す位置はおそらく同じだと思います。)

left/rightについては、左右を表しています。

leadingは、先端(先頭)

trailingは、末尾というような意味になります。

  1. 日本語や英語などほとんどの場合はleading = left、trailing = right となり
  2. 右から左に文章を書くアラビア語などの場合にはleading = right、trailing = left となる

Attributeに関して標準と違うポイント

Attributeに関して標準と違うポイントは、widthとheightの値が同じ場合、sizeとしてまとめて設定できるところですかね。

また、正方形や正円形であるものは簡単に記述できますし、リサイズも簡単なので地味に嬉しいポイントです。

(centerXとcenterYも従来通りcenterとしてまとめることができます。)

related

relatedに関しては、以下の種類がありますが、基本的には、equalTo() や equalToSuperView() を使うことが多いです。

その他のメソッドは、Viewの制約を動的に変更させたい条件がいくつかある場合など、状況に合わせて使用します。

ConstraintBasicAttributesDSL クラスに定義されたメソッドは以下の通りです。

Related関係性
equalTo()追加するViewに関する値 = 引数で指定する値
equalToSuperview()追加するViewに関する値 = 親Viewに関する値
lessThanOrEqualTo()追加するViewに関する値 ≦ 引数で指定する値
lessThanOrEqualToSuperview()追加するViewに関する値 ≦ 親Viewに関する値
greaterThanOrEqualTo()追加するViewに関する値 ≧ 引数で指定する値
greaterThanOrEqualToSuperview()追加するViewに関する値 ≧ 親Viewに関する値

SnapKitの特徴

Autoresizingの設定が不要

NSLayoutConstraint や NSLayoutAnchorを 用いた方法の場合では、addSubview 前に、Autoresizing という旧式のレイアウトの仕組みを AutoLayout に反映させないための設定変更を行う必要がありました。

しかし、SnapKit では、ライブラリ側で対応してくれるため、以下の一文が不要となりました。

メソッドチェーン

Attribute を続けて指定して設定することができます。

省略可能

制約を設定したい View の Attribute と基準となる Attribute が同じ場合は、省略可能です。

使えるメソッド

設定する値を調整するための便利なメソッドも用意されてます。

multipliedBy()

  1. 引数で渡された CGFloat型の値を掛け合わせる。
  2. 2倍なら2、3倍なら3。

標準(NSLayoutConstraint や NSLayoutAnchor)の multiplier引数と同じ扱いです。

dividedBy()

  1. 引数で渡されたCGFloat型の値で割る。
  2. 1/2なら2、1/3なら3。

標準のmultiplier引数で0.5と指定していたところを、dividedBy(2) というように記述できるようになりました。

offset()

  1. 引数で渡された値の分だけ位置をずらす。
  2. 負数をセットすると負の方向に移動する。

配置を指定した後に続けて記述して使用できます。

以下は上で表示させた赤い四角の View の右隣に 10pt 間を開けて同じサイズの青い四角い View を表示させた例です。

inset()

  1. View の内側に余白を作る。
  2. CSS で言うところの Padding のようなもの。

equalTo() などで配置の制約を指定した後に続けて設定することができます。

Attribute の edges を指定して、マージンを表す構造体である UIEdgeInsets() と組み合わせて指定すると、以下のように簡単に余白を表示させることができます。

さいごに

前回の記事で最初に紹介したNSLayoutConstraint の方法と比べると見違える程ラクになりました!

今までコードで AutoLayout を実装することへの苦手意識のせいでなるべく避けてきたわけですが、SnapKit ならInterfaceBuilder を使用しなくてもスイスイ書けちゃいそうです。

高階さん 高階さん
重たいInterfaceBuilderファイルを開くときの待機時間やコンフリクト解消にかかる時間とは、これでおさらば!

…とは言いつつ

InterfaceBuilder では、ビルドしなくてもレイアウトを確認できます。

また、制約が足りない場合や制約の重複・コンフリクトなどが起きている場合にエラーを出して教えてくれるなどのメリットもあります。

そのため、状況によって使い分けられるようになりたいですね!

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
iOSアプリ開発のご依頼・お見積もりはこちらまでお願いします。
また、iOSエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

こちらの記事もオススメ!

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事