[iOS]StoryBoardで画面の見た目を作る流れ

# 説明の前提
XCode 10.2基準。
XCodeでiOSのプロジェクトは作れるが、StoryBoardで画面の見た目の作り方が分からない人向けの記事。
Debug Area(XCodeの下側), Inspector Area(XCodeの右側)は表示させている前提。
画面右上に、Areaの表示/非表示を切り替えるボタン(下図)があるのでそれで表示するように設定しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/2271df86-17b3-b169-9896-fac432608f2a.png)

# 1. Viewを置く(Buttonを例に説明)
1. StoryBoardを開く
1. XCodeの右上の方に、以下のようなボタンがあるので押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/16b6ea22-6198-fc34-530d-8d9587c330a2.png)

1. 置きたいViewの名前で検索する(ここでは"Button"で検索)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/23bc0e00-432b-9dbd-637f-922ecb846f21.png)

1. 上記の画面の検索結果の"Button"をDrag&DropでStoryBoardに置く


# 2. ViewのConstraint(表示位置のルールのこと)を指定する
ほとんどの場合、Viewの位置を明示的に指定したくなるはず。
たとえば、画面の中央に置きたいとか、画面の左端から8pxの位置に置きたいとか。
その場合はViewに対して、Constraint(日本語で制約)を設定する。

制約の設定の仕方を以下に示す。

1. Constraintを指定したいUI要素をクリックして選択(下の画像はButtonを選択した時のもの)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/b112073c-4b27-c533-715d-9d4fbc4f4bf6.png)

1. Add New Constraintsボタンを押す(下画像の右から2番目のボタン)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/1fc02dbf-36cf-608b-e727-c37567650632.png)

1. Constraintを設定
ここまでの操作で、こんなポップアップが出ているはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/c1562048-cc08-1a60-2f2c-13742ad16c35.png)

このポップアップは3つの領域に分かれる。
一番上は、一番近いViewに対する位置を指定する領域。
真ん中(Width/Height)は、読んで字の如く、幅と高さを指定する領域。
下は、Viewのアスペクト比を指定する領域。

後は、ポップアップ上でConstraintを設定して、「Add Constarints」を押せば、Constarintの設定は完了。

設定の仕方によっては、Missing Constraintsという警告が発生することがある(ViewをStoryBoardで選択したとき、選択枠が赤くなる状態)。
その原因と対処方法はこちらを参照。
https://qiita.com/zigenin/items/b158439e6c4bd4c48d75

## 一番近いView以外のViewとのConstraintを指定する
ここまでに書いた方法だと、一番近いViewにしかConstraintを指定できない。
一番近いView以外にConstraintを設定する方法もある。
View AとView Bの間の垂直方向の余白を8pxに設定するケースを例に、手順を説明する。

1. Controlキーを押しながらView AをView Bにドラッグ&ドロップする
Constarintの種類を選択するポップアップが出るので、Vertical Spacingを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/e10ce5df-40dd-b67d-d990-a09fbe3b549a.png)

1. Size Inspectorを開く(下図の右から2つ目のボタンを選択。XCodeの右上の方にある)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/236106c3-39f7-e3f1-d305-ea8cd364223d.png)

1. Constarintの値を修正する
Size Inspector(右側)を見ると、選択中のViewのConstraintの一覧が表示されているはず(下図)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/4cdb1957-77ca-7ec7-959d-34b3ad918b81.png)

この一覧の内、先程設定したConstraintのEditボタンを押すと、Constarintの値を入力するポップアップが出る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/76764169-5d6a-8a84-442d-0d698f4c82b3.png)
ポップアップのConstantの値に"8"を入力してEnterを押せば、View AとView Bの垂直余白を"8"に設定できたことになる。

# 3. ViewのAttribute(Buttonの文言などの見た目のこと)を指定する
Buttonの文言を指定するケースを例に説明。

1. ButtonをStoryBoard上で選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/4fcc2381-7dd0-b586-d176-ebfb75e3ee91.png)

1. Attribute　Inspectorを開く(下図、右から3番目のボタンを押す）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/3767dde5-d547-d159-53cc-ad1cca6a40a8.png)

1. ButtonのTitleというAttributeがあるので、それを変更する(ここでは"Foobar")。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/7e329bee-71ac-6c65-4a75-8ec6928920bd.png)

変更後にEnterを押すとStoryboardの表示が更新されるはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196890/8d418825-a079-d527-deaf-5455e8b8bef4.png)

# 最後に
1~3を繰り返すだけでStoryBoardで画面の見た目は十分に作れる。
細かい所にこだわらなければ。