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 では、ビルドしなくてもレイアウトを確認できます。

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

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

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

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア