SwiftでAuto Layoutがめっちゃ楽に書けるライブラリ「Crew」

みなさま、Auto Layout書いてますか。

あれ、コードで書くのめっちゃめんどいですよね。クラス名もメソッド名も長いし。 Visual Format使うと無駄にDictionary作る必要がある上にミスっててもコンパイルで教えてくれへんし。 Storyboardはチーム開発で泣きそうになるし。

そんなあなたに、めっちゃイケてるライブラリのご紹介です。

その名も”Crew“。

使い方はREADMEを見ていただければ一発なんですが、とにかく記述量が少なくなります。 そして覚えることが少なくて直感的に書けるので、前書いたコードを探してコピペすることもなくなりました。

例えば横幅いっぱいのviewを縦に3つ、10ptずつ開けて置こうと思ったら、普通に書くと多分こんな感じになりますよね。

let views = ["topView": topView, "midView": midView, "bottomView": bottomView]
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[topView]-(10)-[midView]-(10)-[bottomView]", options: 0, metrics: nil, views: views))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[topView]|", options: 0, metrics: nil, views: views))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[midView]|", options: 0, metrics: nil, views: views))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[bottomView]|", options: 0, metrics: nil, views: views))

なんかこう、うえってなりますね。

これがなんと、こうなります！

view <<= midView ~ .Top == topView ~ .Bottom + 10
view <<= bottomView ~ .Top == midView ~ .Bottom + 10
view <<= view == topView + UIEdgeInsets(top: .NaN, left: 0, bottom: .NaN, right: 0)
view <<= view == midView + UIEdgeInsets(top: .NaN, left: 0, bottom: .NaN, right: 0)
view <<= view == bottomView + UIEdgeInsets(top: .NaN, left: 0, bottom: .NaN, right: 0)

オペレーターごりごり作りまくりな感じは好き嫌い別れるかもしれませんが、この一回見ればそらで書けそうな感じ、いかがでしょうか。

ざっくり解説すると、1行目は midView ~ .Top == topView ~ .Bottom + 10 で作ったNSLayoutConstraintを、 <<= オペレータで view.addConstraint してます。

そして midView ~ .Top == topView ~ .Bottom + 10 は NSLayoutConstraint(item: midView, attribute: .Top, relatedBy: .Equal, toItem: topView, attribute: .Bottom, multiplier: 1, constant: 10) と同じです。なので、attributeはNSLayoutAttributeの値全て使えます。

3行目のUIEdgeInsetsを足してるやつは、なんと上下左右に対して同時にconstraintをかけられます。CSSのpaddingみたいな感じです。内部では上下左右それぞれに対して1・2行目のようなconstraintをかけています。（ソース）

さあ、もうこれを見てしまうと普通に書くのがあほらしくなってきたのではないでしょうか。当然新しく作るところからちょっとずつ適用したりもできるので、ぜひお試しください。

https://github.com/kzms/Crew

ちなみにこの view <<= のところに配列で渡せたらもっといいなーと思ったんですが、型推論が複雑すぎって怒られてできませんでした。解決できた方はぜひpull requestを送ってみてはいかがでしょうか。