Cocoaの日々

こんなやつを作りたい。

Autolayoutで等間隔にビューを並べる方法はガイドに記載がある。
Auto Layout ガイド - ビューを等間隔で並べる (P.31)

ビューの等間隔配置の機能は Autolayoutの自体には無くて、それぞれのビューの間にスペーサとなるビューを入れて間隔を調整する方法を取るらしい。

なるほど。スペーサ幅を可変にして、かつ全スペーサの幅が同じになるような制約が作れればいいわけだ。

実際やってみよう。
こんな感じでビューを配置して制約を作る。
スペーサ（黄色とオレンジ色のやつ）はデバッグしやすいように色をつけて縦位置も意図的にずらしてある。
制約を作るにはコントロールキーを押しながらスペーサをクリックして、そのままドラッグしてビュー（緑色）へ接続する。
すると作成可能な制約の一覧が出てくるので Horizontal Spacing を選ぶ。
これだけ。
この操作を全てのスペーサについて行う。

また全てのスペーサが同じ幅(width)を持つように設定しておく。これは上記のようなドラッグ操作を最初のスペーサと他のスペーサ間で行い Equal Widths を選べばいい（最初のスペーサを基準にしておく）。

その他、縦位置はお好みで。例ではビューが画面縦の中央に配置するようにしてある。


これで終わり。コーディングは無し。

実行してみよう。

iPhone縦

iPhone横

iPad縦

iPad横


いい感じ。
やってみた感じではドキュメントにあるような Relation=Less than or Equal や Priority=999の設定は不要だった（むしろ設定するとうまく行かなかった。やり方がまずかったのかも）。

サンプルのソース
iOS7-Sample/AutolayoutSample2

- - - -
Autolayoutは強力だがプリミティブすぎて少しでも凝ったことをやろうとすると今のままではちょっと面倒だし難解。今後は等間隔配置のような１段上のレベルのレイアウトを支援するような機能が望まれる。例えばInterfaceBuilder上でビューを複数選んでボタンをポチると配置が完了するとか、等間隔を管理するクラスを導入するとか（これはもしかするとサードパーティから出てるかもしれない）。