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

高階さん

（株）ライトコードの高階（たかがい）です！

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

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

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

前回の記事

開発環境

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

SnapKitについて

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

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とほぼ変わりないです）

「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 クラスに定義されたメソッドは以下の通りです。

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()

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

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

dividedBy()

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

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

offset()

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

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

以下は上で表示させた赤い四角の 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()

1. View の内側に余白を作る。
2. 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}

さいごに

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

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

高階さん

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

...とは言いつつ

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

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

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

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

2020.08.14スマホ技術 特集Android開発Android開発をJavaからKotlinへ変えていくためのお勉強DelegatedPropert...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...