[iOS 8] Autolayout でビューを等間隔に並べる

ビューを等間隔に並べる

実現方法はApple 公式のドキュメント（PDF）に書かれているのですが、その通りにやっても私の環境では上手く動作しませんでした。 よって、現在の最新環境 Xcode 6.1 での実現方法をご紹介します。

方法

1. （実際に画面に現れる）本体ビューをいくつか作る
2. それよりもひとつ多い数のスペーサビューを作る
3. スペーサビューを端に置き、本体ビューと交互に並べる 画面の左側から右側に向かって、次のようなパターンで並ぶ spacer1 | view1 | spacer2 | view2 | spacer3
4. スペーサビューに制約を設けて、いずれも長さが同じになるようにする
5. 先頭のスペーサビューからコンテナビューへの前側（leading）制約を作る
6. 末尾のスペーサビューからコンテナビューへの後側（tailing）制約を作る
7. さらに、スペーサビューと本体ビューの間にも制約を作る

イメージ

ここまでは Apple のドキュメント通りです。 ここから制約の設定方法が異なります。

制約の設定

view1

view1 に次の制約を設定してください。

• 幅制約と高さ制約 （ここでは幅 100、高さ 200 とします）
• コンテナビューへの上側（top）制約 （ここでは 64 とします）

view2

view2 に次の制約を設定してください。

• 幅制約と高さ制約 （ここでは幅 100、高さ 200 とします）

spacer1

spacer1 に次の制約を設定してください。

• コンテナビューへの前側（leading）制約 （ここでは 8 とします）
• view1 への後側（tailing）制約 （ここでは 8 とします）
• 高さ制約 （ここでは 50 とします）

spacer2

spacer2 に次の制約を設定してください。

• view1 への前側（leading）制約 （ここでは 8 とします）
• view2 への後側（tailing）制約 （ここでは 8 とします）
• 幅と高さを spacer1 と同じにする制約

spacer3

spacer3 に次の制約を設定してください。

• view2 への前側（leading）制約 （ここでは 8 とします）
• コンテナビューへ後側（tailing）制約 （ここでは 8 とします）
• 幅と高さを spacer1 と同じにする制約

全てのビュー

spacer1, view1, spacer2, view2, spacer3 に次の制約を設定してください。

• 縦方向の中心を揃える制約（Vertical Centers）

仕上げ

コンテナビューを選択し、「Update Frames」を実行します。

できあがり

制約展開図

実行画面

※実際は spacer の hidden を true に設定します。

3.5-inch portrait

---

3.5-inch landscape

---

4-inch portrait

---

4-inch landscape

---

4.7-inch portrait

---

4.7-inch landscape

---

5.5-inch portrait

---

5.5-inch landscape

まとめ

Autolayout で画面レイアウトを作成する場合、そのレイアウトを実現するための制約の設定方法は無数に存在します（解は1つではありません）。 あまり複雑に考えず、自分が理解しやすい制約を設定することが大切だと思います。 よって、私が今回提示した方法もあくまで一例と捉えてください。

リンク

• Auto Layout by Example