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

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

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

高階さん 高階さん

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

前回の記事では、NSLayoutConstraintNSLayoutAnchorを使って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ではビルドしなくてもレイアウトを確認できたり、制約が足りない場合や制約の重複・コンフリクトなどが起きている場合にエラーを出して教えてくれるなどのメリットもあります。

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

一緒に働いてくれる仲間を募集しております!

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

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

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

採用情報はこちら

関連記事