【Swift4】SnapKitがめちゃくちゃ便利だった件
2021.12.20
SnapKitというライブラリを使ってみる
高階さん（株）ライトコードの高階（たかがい）です！
前回の記事では、NSLayoutConstraint と NSLayoutAnchor を使ってAutoLayout を実装してみました。
今回は、さらに簡単に実装するためのSnapKit というライブラリがあるらしいので、サクッと使ってみました！
「SnapKit」を覚えたい人は、是非前回の記事を読んでください～！
前回の記事
開発環境
前回に引き続き以下の環境で作業しています。
| MacOS | 10.14 |
| Swift | 4.2 |
| Xcode | 10.1 |
| Cocoapods | 1.6.1 |
| SnapKit | 4.0 |
SnapKitについて
SnapKit の対応バージョンについてですが、使用可能な環境は以下です。
| iOS | 8.0+ |
| Mac OS X | 10.11+ |
| tvOS | 9.0+ |
| Xcode | 9.0+ |
| Swift | 3.0+ |
Swift3.x であれば SnapKit3.0.0、Swift4.x であれば SnapKit4.0.0 を使用してください。
また、Cocoapods と Carthage の両方に対応しています。
SnapKitの使い方
早速、SnapKit の使い方についてですが、まずは見てもらった方が早いと思うので、100pt 四方の赤い View を画面中央に表示させてみました。
1 2 3 4 5 6 7 | let view1 = UIView() view1.backgroundColor = .red // 確認用に色を指定 view.addSubview(view1) view1.snp.makeConstraints { make in make.size.equalTo(100) // 幅と高さを100ptに設定 make.center.equalToSuperview() // 中心点を親Viewと合わせる } |
高階さん基本的な使い方
上記の例の通り、makeConstraint() の引数に指定されているクロージャの中、make（ConstraintMaker）に制約を設定していきます。
Attributeの表（標準のAttributeとほぼ変わりないです）
| Attributes | 位置 |
| top | 上端 |
| bottom | 下端 |
| leading | 先頭 |
| trailing | 末尾 |
| left | 左端 |
| right | 右端 |
| width | 横幅 |
| height | 高さ |
| size | 横幅と高さ |
| centerX | X軸上の中心 |
| centerY | Y軸上の中心 |
| center | 中心点 |
「leading/trailing」「left/right」についての補足
前回の記事では Attribute の種類にまで触れていなかったんですが、leading/trailing、left/right という似てるものがあるので軽く補足します。
（現状、leadingとleft, trailingとrightが示す位置はおそらく同じだと思います。）
left/rightについては、左右を表しています。
leadingは、先端（先頭）。
trailingは、末尾というような意味になります。
- 日本語や英語などほとんどの場合はleading = left、trailing = right となり
- 右から左に文章を書くアラビア語などの場合には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 では、ライブラリ側で対応してくれるため、以下の一文が不要となりました。
1 | view.translatesAutoresizingMaskIntoConstraints = false |
メソッドチェーン
Attribute を続けて指定して設定することができます。
1 2 | make.right.left.top.equalTo(superView) // 基準とするviewや指定する定数などの条件が同じ場合はまとめて記述できる make.bottom.equal(otherView) |
省略可能
制約を設定したい View の Attribute と基準となる Attribute が同じ場合は、省略可能です。
1 2 3 | // 以下の2行は同じ意味。 make.top.equalTo(superView.snp.top) make.top.equalTo(superView) |
使えるメソッド
設定する値を調整するための便利なメソッドも用意されてます。
multipliedBy()
- 引数で渡された CGFloat型の値を掛け合わせる。
- 2倍なら2、3倍なら3。
標準（NSLayoutConstraint や NSLayoutAnchor）の multiplier引数と同じ扱いです。
dividedBy()
- 引数で渡されたCGFloat型の値で割る。
- 1/2なら２、1/3なら３。
標準のmultiplier引数で0.5と指定していたところを、dividedBy(2) というように記述できるようになりました。
offset()
- 引数で渡された値の分だけ位置をずらす。
- 負数をセットすると負の方向に移動する。
配置を指定した後に続けて記述して使用できます。
以下は上で表示させた赤い四角の View の右隣に 10pt 間を開けて同じサイズの青い四角い View を表示させた例です。
1 2 3 4 5 6 7 8 | let view2 = UIView() view2.backgroundColor = .blue view.addSubView(view2) view2.snp.makeConstraints { make in make.size.equalTo(view1) // サイズをview1と同じ値にする make.top.equalTo(view1) // topの高さをview1と合わせる make.left.equalTo(view1.snp.right).offset(10) // 右方向に10pt移動させる } |
inset()
- View の内側に余白を作る。
- CSS で言うところの Padding のようなもの。
equalTo() などで配置の制約を指定した後に続けて設定することができます。
Attribute の edges を指定して、マージンを表す構造体である UIEdgeInsets() と組み合わせて指定すると、以下のように簡単に余白を表示させることができます。
1 2 3 4 5 6 | let view1 = UIView view1.backgroundColor = .gray // 画面の上下左右に10ptの余白を設ける。 view1.snp.makeConstraints{ make in make.edges.equalTo(view).inset(UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)) } |
さいごに
前回の記事で最初に紹介したNSLayoutConstraint の方法と比べると見違える程ラクになりました！
今までコードで AutoLayout を実装することへの苦手意識のせいでなるべく避けてきたわけですが、SnapKit ならInterfaceBuilder を使用しなくてもスイスイ書けちゃいそうです。
高階さん...とは言いつつ
InterfaceBuilder では、ビルドしなくてもレイアウトを確認できます。
また、制約が足りない場合や制約の重複・コンフリクトなどが起きている場合にエラーを出して教えてくれるなどのメリットもあります。
そのため、状況によって使い分けられるようになりたいですね！
こちらの記事もオススメ！
書いた人はこんな人
IT技術9月 27, 2022LaravelにPHPの静的解析ツールを導入し、コードをきれいに保つ- IT技術5月 13, 2022Laravelフレームワークのバージョンアップを実施する
- ライトコードの日常4月 8, 2022YOUは何しにライトコードへ？〜松崎さん編〜
- IT技術3月 31, 2022Ruby のテストフレームワーク minitestとRSpec
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
