コードでAutoLayoutを簡単に書けるライブラリPureLayoutを使ってみた

PureLayout

コードでAutoLayoutを簡単に書けるライブラリのひとつ。
他にもCartgraphyなどのライブラリが同じような機能を提供してます。

PureLayoutの簡単な使いかたについての紹介はいくつかありますが、少し複雑でより実践的なレイアウトに対しての適用方法を紹介します。

例: 等間隔なviewの配置

「複数のViewを等間隔に配置する」
「条件によってViewごとの表示・非表示を切り替える」
「Viewの数が変わってもView同士の間隔は固定」
というレイアウトを実現したい場合。
以前は
1. 透明なViewを間に挟んで、表示要素の大きさから透明Viewの大きさを計算するやり方
2. 表示条件の数だけ制約を用意しておいて変更があるたびに付け替えるやり方
のどちらかでやっていたのですが、1だと不要なviewがあるのが気持ち悪いし、2だと制約の記述が増えすぎて読みにくいです。
それがPureLayoutだと以下のように書けます。

// 水平方向に配置するviewをまとめるためのviewを用意し、配置するViewをaddしておく
view.addSubview(horizontalContainerView)
horizontalContainerView.addSubview(greenButton)
horizontalContainerView.addSubview(yellowButton)
horizontalContainerView.addSubview(redButton)

// それぞれのviewの制約
horizontalContainerView.autoPinEdgesToSuperviewEdges()
horizontalContainerView.autoSetDimension(.height, toSize: 200.0)

greenButton.autoPinEdge(toSuperviewEdge: .top)
greenButton.autoPinEdge(toSuperviewEdge: .bottom)

yellowButton.autoPinEdge(toSuperviewEdge: .top)
yellowButton.autoPinEdge(toSuperviewEdge: .bottom)

redButton.autoPinEdge(toSuperviewEdge: .top)
redButton.autoPinEdge(toSuperviewEdge: .bottom)

// 対象とするViewの配列（グリーン、イエロー、レッドボタン）
horizontalViewArray = [greenButton, yellowButton, redButton]

// 配列に入ったviewを等間隔に水平方向に配置する制約
horizonralArrayConstraints = NSLayoutConstraint.autoCreateAndInstallConstraints {
    horizontalViewArray.autoDistributeViews(along: .horizontal, alignedTo: .horizontal, withFixedSpacing: 20.0, insetSpacing: false, matchedSizes: false)
} as NSArray

適用した例

greenButtonとredButtonだけ表示する場合は配列の中身を更新して、horizonralArrayConstraintsを更新してあげればいいです。
配列の変更と制約更新部分をメソッドに抽出しておくといいかもしれないですね。
（あと非表示のviewはisHiddenで適宜隠してあげてください。）

horizontalViewArray = [greenButton, redButton]

horizonralArrayConstraints?.autoRemoveConstraints()
horizonralArrayConstraints = NSLayoutConstraint.autoCreateAndInstallConstraints {
    horizontalViewArray.autoDistributeViews(along: .horizontal, alignedTo: .horizontal, withFixedSpacing: 20.0, insetSpacing: false, matchedSizes: false)
} as NSArray

適用した例

PureLayoutを使えばこのように、先にあげた2つの方法よりも簡潔なコードが書けるので気に入っています。
PureLayoutのサンプルを見れば大体のことはできると思うので一度眺めて見てください。
https://github.com/PureLayout/PureLayout/tree/master/PureLayout/Example-iOS/Demos

そもそもコードで書いていい事あるの？Storyboardでよくない？

そう思っていた時代が自分にもありました。
例えば画面のUIが非常にシンプルな場合はStoryboardだけで完結させるのも良いでしょう。
しかしほとんどのアプリの画面は複雑なレイアウトで構成されています。
また、何かアクションに応じてviewのレイアウトを変えて表示することも良くあると思いますが、そういった場合にStoryboardだけで完結させるのは難しいです。
また、コードとStoryboardを見比べながら作業するのも非常に効率が悪いです。
そしてコードで書くのは複数人で開発する時に特に威力を発揮すると思います。Storyboardのコンフリクト解消って結構辛いですよね。。

他にもライブラリあるけどどれ使えばいいの？

Cartgraphyをチラッと見た感じほとんど機能としては変わらない印象でした。
ただCartgraphyの場合、どのViewに制約をつけているかが分かりやすいですね。表現力が高いというか。
この辺はobjective-cで書かれたPureLayoutと、swiftで書かれたCartgraphyの違いでしょうか。
自分は業務ではPureLayoutを使っていますが、個人でCartgraphyも試してみたいと思います。