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

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

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

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

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

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

高階さん 高階さん
「SnapKit」を覚えたい人は、是非この記事を読んでください~!
にゃんこ師匠 にゃんこ師匠

開発環境

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

  1. MacOS 10.14
  2. Swift 4.2
  3. Xcode 10.1
  4. Cocoapods 1.6.1
  5. SnapKit 4.0

SnapKitについて

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

  1. iOS 8.0+ / Mac OS X 10.11+ / tvOS 9.0+
  2. Xcode 9.0+
  3. Swift 3.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ファイルを開くときの待機時間やコンフリクト解消にかかる時間とは、これでおさらば!
にゃんこ師匠 にゃんこ師匠
「SnapKit」最高だにゃ~!

…とは言いつつ

InterfaceBuilderではビルドしなくてもレイアウトを確認できたり、制約が足りない場合や制約の重複・コンフリクトなどが起きている場合にエラーを出して教えてくれるなどのメリットもあります。

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

一緒に働いてくれる仲間を募集中!

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

ライトコードのモットーは「好きなことを仕事にするエンジニア集団」。そのため、あなたがやりたい仕事を全力で応援します。

どうせなら、好きなことを仕事にする方が人生は何倍も素晴らしいものになるはず!また、ライトコードはこれからの会社ですので、みんなで新しい事業や組織を作っていく楽しみもあります。

あなたからのご応募をお待ちしております!

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

採用情報はこちら

関連記事