読者です 読者をやめる 読者になる 読者になる

そーす

福岡在住のプログラマ。SwiftとかKotlinとかJavascriptとかSketchとか触ってます。

SnapKitでAutoLayoutを簡単に書く

f:id:saburesan:20160513071542j:plain

Storyboard使わない派なので、コードでAutoLayoutの制約を書くのですがすごくめんどくさいです。

例えば、self.viewの画面上部にnavigationViewというナビゲーションバーっぽいViewを設定したいときは

self.view.addConstraints([
            NSLayoutConstraint(
                item: self.navigationView,
                attribute: NSLayoutAttribute.Top,
                relatedBy: NSLayoutRelation.Equal,
                toItem: self.view,
                attribute: NSLayoutAttribute.Top,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: self.navigationView,
                attribute: NSLayoutAttribute.Width,
                relatedBy: NSLayoutRelation.Equal,
                toItem: self.view,
                attribute: NSLayoutAttribute.Width,
                multiplier: 1.0,
                constant: 0
            ),
            NSLayoutConstraint(
                item: self.navigationView,
                attribute: NSLayoutAttribute.Height,
                relatedBy: NSLayoutRelation.Equal,
                toItem: nil,
                attribute: NSLayoutAttribute.Height,
                multiplier: 1.0,
                constant: 64
            )]
        )

こうなりますよね。長い。

これだけならまだしもいろんなViewがある場合にたくさん制約を書いていくとかなりコードが長くなり見通しも悪くなります。

SnapKit

そこでSnapKitです。

github.com

独自の記法で制約をを簡単に表現できます。

インストール

CocoaPodsで一発です。 podfileに

pod 'SnapKit', '~> 0.20.0'

書き換えてみる

例えば上記の制約をSnapKitで書くと

self.navigationView.snp_makeConstraints { make in
 make.top.equalTo(self.view)
   make.width.equalTo(self.view)
   make.height.equalTo(64)
}

こんだけです。 makeというのがSnapKitのConstraintMakerというクラスのインスタンスで こいつに制約を追加していくことになります。 かなり減りましたよね。 通常の制約を1行で表現できます。

GithubStarも6000近く付いているのでかなり有名だとは思います。

感想

超簡単だけど、Androidから来た身としてはAutoLayout自体が超使いづらい(; ・`ω・´)