【Xcode8.x】ビューを等間隔に並べる【オートレイアウト】

公式の[ビューを等間隔で並べる](https://developer.apple.com/jp/documentation/AutolayoutPG.pdf)って分かりづらい...というか作業手順が掲載されてなくて不親切。等間隔に並べる制約付けの記事はいくつかネット上にありますが、ここでは自分なりのやり方を紹介してみます。今回の例は2つのViewが存在し、Viewの中心Yポジションは画面の中心Yポジションと同じにする(要するに縦中央揃え)という前提で話を進めます。

***黄色 = 配置対象のView*** ( 以降「View」と表記 )
***グレー = スペーサView*** ( 以降「スペーサ」と表記 )
<img width="380" alt="13.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/65ccbec6-abba-e123-30f1-8bd16161baf2.png">

## 抑えておきたいポイント
作業前に整理しておくとよいです。

**可変でないところ（=固定制約が付けられるところ）**
　a) Viewの横サイズ
　b) Viewの縦サイズ
　c) スペーサの縦サイズ
　d) Viewとスペーサ間のマージン
　e) スーパービューとスペーサ間のマージン (画面両端からのマージン)
　f) Viewの中心のYポジション
　g) スペーサの中心のYポジション


**可変である必要があるところ**
　h) スペーサの横サイズ
　i) Viewの中心Xポジション

こうして洗い出してみると可変制約の２つがポイントになりそうです。

# 実践

## 1.ViewとスペーサViewの準備
まずは理想に近いポジションに部品を並べます。

<img width="699" alt="0.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/77b308ca-ebec-96b9-dbfb-5202b8aefd4e.png">

## 2.Viewの縦サイズ、横サイズを設定
上述の、`a)` `b)` にあたる制約です。WidthとHeightを固定値で設定します。もうひとつのViewにも同じ設定をします。
<img width="1297" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/2671317a-6c32-a966-06ed-8678ba81f91f.png">

## 3.Viewの中心Yポジションを設定
`f)` にあたる制約です。「Vertically in Container」をチェックします。もうひとつのViewにも同じ設定をします。
<img width="1295" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/78378994-8777-6448-b585-67d8641d976d.png">

## 4.左スペーサのマージン設定
`d)` `e)` にあたる制約です。左右のマージンをPinで設定します。今回はViewとのマージンを20pxにしてます。
<img width="1289" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/57f725a1-15f5-930a-6e2d-bdb03cd5090d.png">

## 5.左スペーサの中心Yポジションを設定
`g)` にあたる制約です。「Vertically in Container」をチェックします。
<img width="1295" alt="3_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/2b45bfe3-fb4b-8520-07f5-8384e7a4e38c.png">

## 6.左スペーサの高さを設定
`c)` にあたる制約です。X軸におけるスペーサなので本来高さは重要ではありませんが今回はViewと同じ高さにしています。Viewまでcontrol+ドラッグ、「Equal Heights」を選択します。
<img width="973" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/7a195a3b-f555-3ed4-dd3f-09b7b8594cfe.png">

## 7.中央スペーサのマージン設定
`d)` にあたる制約です。両端はViewです。今回は20pxで設定してます。
<img width="1288" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/7d5636f8-80e3-854a-350c-c96c62e743d6.png">

## 8.中央スペーサの中心Yポジションを設定
`g)` にあたる制約です。「Vertically in Container」をチェックします。
<img width="1289" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/80f6ea83-8aad-54a6-be3d-ee8ff305c98c.png">

## 9.中央スペーサの高さを設定
`c)` にあたる制約です。X軸におけるスペーサなので本来高さは重要ではありませんが今回はViewと同じ高さにしています。Viewまでcontrol+ドラッグ(左右どちらのViewでもOK)、「Equal Heights」を選択します。
<img width="864" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/1ac98195-6770-e060-9aea-7ca58523bc16.png">

## 10.右スペーサのマージン設定
`d)` `e)` にあたる制約です。左右のマージンをPinで設定します。今回はViewとのマージンを20pxにしてます。
<img width="1291" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/af55dd73-82cb-f0c1-f0f8-06ab01c30780.png">

## 11.右スペーサの中心Yポジションを設定
`g)` にあたる制約です。「Vertically in Container」をチェックします。
<img width="1292" alt="9.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/2894dfb0-4c37-2cc7-c3a2-3512430fdfb1.png">

## 12.右スペーサの高さを設定
`c)` にあたる制約です。Viewまでcontrol+ドラッグ、「Equal Heights」を選択します。
<img width="1061" alt="10_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/416a4fdd-95ef-4a7f-c5b4-6e55d9bc8846.png">

## 13.全てのスペーサの横サイズをイコールに設定
`h)` にあたる設定です。３つのスペーサの横サイズをイコールにします。
<img width="786" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/9d25c500-1886-ba30-bc18-478fcde25057.png">

## 14.制約付け終了！
ここまで設定するとようやく制約エラーが全て消えるはずです。オレンジの枠線が出ている場合は、「update frames」を実行してください。ところで `i)`を設定していませんが、この時点で横一列のマージンが全て確定しているのでViewの中心Xポジションも自然と決まるため必要ないのです。
<img width="600" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/d942923e-7ab2-de3e-cf26-73b25a91dd93.png">

## 15.ビルドしてみる
実際の使用時はグレーのスペーサは透明にします。
### 縦
<img width="380" alt="13.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/65ccbec6-abba-e123-30f1-8bd16161baf2.png">
### 横
<img width="671" alt="14.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/ba670fab-5c6a-bf21-90fa-f50baeb5ddba.png">

## 補足
**Stack View**を使うともっと簡単にできるかも。