【swift】 Autolayout-基礎編2-

https://qiita.com/hyis/items/a8f3ca6541c1113180bc

前回に引き続きAutolayoutの説明です。
今回は、Alignmentに対するConstraintsの設定手順を説明していきます。

---
1. プロジェクトを作成し、Main.storyboardを開く。
UIViewを下画像のように置き,grayViewと名付け、背景色をLight Gray Colorに設定しておく。

2. grayViewを選択(下画像①もしくは②)し、下画像③をクリックでメニューを開き、width(下画像④)を240に、height(下画像⑤)を128に変更し、下画像⑥及び⑦にチェックがついていることを確認しEnterを押下し、制約を設定する。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/fd72c7a9-f0af-7b23-a1db-f9ea1195d294.png)

3.下画像のようにgrayViewの周りに赤い線が表示され、Constraintsの設定でエラーが発生する。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/52e06add-14ff-0acc-0c94-f09ad289c3cc.png)

4.grayViewを選択し(下画像①もしくは②をクリック)、③から**Add New Alignment Constraints**のメニューを開き、Horizontally in Container と Vertically in Container(下画像④)の値を0にし、下画像⑤にチェックが入ったことを確認してEnterを押下し、垂直方向・水平方向の位置を確定させる。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/0dd7d282-1c3b-edad-9125-5cd0b493a261.png)

5.下画像のように、grayViewのエラーがなくなり、正常に表示されていることを確認する。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/8ffa3a51-9b80-0516-5f4d-08ca9b37c01a.png)

6.下画像のように、grayViewのエラーがなくなり、正常に表示されていることを確認する。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/3a1ece66-c246-d4be-c368-dbd6f8471a2c.png)

7.下画像①のように、grayViewとleftLabelを複数選択し(Command + クリックで複数選択可)し、**Add New Alignment Constraints**(下画像②)をクリックする。
メニューが現れるので、Leading Edges(下画像③)とTop Edges(下画像④)の値を0にし、各項目のチェックが入っていることを確認してEnterを押下し、位置のConstraintsを設定する。

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/fd1d716d-221f-044e-0594-4113a1200e06.png)

8.grayViewとleftLabelの上端と左端が揃ったことを確認する。

9.下画像①の位置にもう一つUILabelを置き、rightLabelと名付けておく。
下画像②のようにgrayViewとrightLabelを複数選択し、TrailingEdges(下画像③)とBottomEdges(下画像④)の値を0にし、Enterを押下して制約を設定する。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/23ab1d46-1102-2ea9-5251-193c364219d1.png)

10.下画像のようにrightLabelとgrayViewの右端、下端が揃っていることを確認する。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/67c585cb-302b-90f5-5ca5-599dfbd72e43.png)

11.下画像①の位置にもう一つUILabelを置き、centerLabelと名付けておく。
下画像②のようにgrayViewとcenterLabelを複数選択し、Horizontal Centers(下画像③)とVertical Centers(下画像④)の値を0にし、Enterを押下して制約を設定する。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/0c3efb46-7cbf-a12e-5753-5ee6e3d115e0.png)

12.centerLabelとgrayViewの水平方向・垂直方向の中央が揃っていることを確認する。

13.leftLabelを選択(下画像①)し、Constraintsのメニューを開き(下画像②)、 Align TopのConstraints(下画像③)をダブルクリックし、Constraintsの詳細設定を開く。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/8cf86670-3a2f-bc35-fd58-4adfd5788d86.png)

14.First Itemの欄(下画像①)をクリックし、Bottom(下画像②)を選択する。

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/bcca3e00-dacb-f3d5-7bb7-b39a217ea5c9.png)

15.rightLabelとleftLabelのFirstBaseLineを合わせるため、rightLabel(下画像①もしくは②)を選択し、Constraintsのタブ(下画像③)を開き、既存のAlignBottomのConstraints(下画像④)を選択し、Deleteを押下して削除する。

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/3cfa639d-d99d-6611-9a12-c6850e93b2de.png)

16.下画像のように、leftLabelの下端とgrayViewの上端が一致したことを確認する。
leftLabelとrightLabelを複数選択(下画像①)し、Add New Alignment Constraintsを開き、First BaseLinesの項目(下画像②)の値を0にし、チェックが入っていることを確認してEnterを押下する。

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/5b71614b-9af1-3002-60ba-42f90cc7fad0.png)

17.下画像のように、leftLabelとrightLabelの垂直方向の位置が揃ったことを確認する。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/80786e74-1e01-bb42-498c-6f3c615984d2.png)

18.leftLabel(下画像①)を選択し、Textを複数行にする(下画像②のタブを選択し、下画像③の項目にテキストを入力する、この項目内ではOption + Enterで改行できる)。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/ef42a31c-d1aa-a670-3e7d-da6b41377b09.png)

19.leftLabelとrightLabelの一行目位置が揃っている事を確認する。

20.leftLabelとgrayViewの余白を空ける為、leftLabelを選択し(下画像①)下画像②のタブを選択、grayViewへのBottom SpaceのEdit(下画像③)をクリックし、Constantの値(下画像④)を-12とする。

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/3459d880-5190-369e-e32a-707ac3989309.png)

21.下画像のように、grayViewとleftLabelの余白が開くと同時に、rightLabelの位置もleftLabelの動きに連動して位置が変わったことを確認する。

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483508/6c30a997-a559-5d6d-f37b-242e86a18060.png)


### 終わりに
以上で基本的なAutolayoutの解説は終わりとなります。Autolayoutは慣れてしまえば視覚的にUIがどのように表示されるかが一目でわかるという利点があるので、積極的に利用して慣れていきましょう。