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

エンジニア記事

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

エンジニア記事

2019.04.18

IT技術

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 を画面中央に表示させてみました。

1let view1 = UIView()
2view1.backgroundColor = .red // 確認用に色を指定
3view.addSubview(view1)
4view1.snp.makeConstraints { make in
5        make.size.equalTo(100)           // 幅と高さを100ptに設定
6        make.center.equalToSuperview()   // 中心点を親Viewと合わせる
7}

高階さん

下手したら InterfaceBuilder（StoryBoard,Xib）で実装するより簡単でわかり易いのでは...!?

基本的な使い方

上記の例の通り、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に関しては、以下の種類がありますが、基本的には、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 では、ライブラリ側で対応してくれるため、以下の一文が不要となりました。

1view.translatesAutoresizingMaskIntoConstraints = false

メソッドチェーン

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

1make.right.left.top.equalTo(superView)  // 基準とするviewや指定する定数などの条件が同じ場合はまとめて記述できる
2make.bottom.equal(otherView)

省略可能

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

1// 以下の2行は同じ意味。
2make.top.equalTo(superView.snp.top)
3make.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 を表示させた例です。

1let view2 = UIView()
2view2.backgroundColor = .blue
3view.addSubView(view2)
4view2.snp.makeConstraints { make in
5    make.size.equalTo(view1)  //　　サイズをview1と同じ値にする
6    make.top.equalTo(view1)   // topの高さをview1と合わせる
7    make.left.equalTo(view1.snp.right).offset(10)  // 右方向に10pt移動させる
8}

inset()

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

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

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

1let view1 = UIView
2view1.backgroundColor = .gray
3// 画面の上下左右に10ptの余白を設ける。
4view1.snp.makeConstraints{ make in
5    make.edges.equalTo(view).inset(UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
6}