AutoLayoutを使ってクイズアプリのレイアウトを作る

# はじめに
これはLife is tech !東海メンターアドベントカレンダー3日目の記事になります．
今日は筋肉メンターあーみーに引き続いてiPhone,Androidメンターの**カーキ**がお送りします．

直近のスクールでメンバーがAutoLayoutで困っていたので，AutoLayoutで一つのアプリのレイアウトを作成する一連の流れを記事にしてみました．

# AutoLayoutとは
AutoLayoutとはiOSアプリを開発する際に様々なサイズのiPhoneに対応するためにAppleが用意しているレイアウトの手法です．
StoryBoard上のViewに対して様々な**制約**を加えることによってレイアウトを整えることができます．
**制約の方法**には様々ありますが，それらの紹介・解説は元メンターはるふさんの記事が詳しいのでどうぞ！[怖くない！AutoLayout 〜多画面対応 with Storyboard〜](https://qiita.com/_ha1f/items/5c292bb6a4617da60d4f)

# クイズアプリをつくってみる
ここからAutoLayoutを使うアプリのサンプルとしてクイズアプリをつくっていこうと思います．
## 0.AutoLayoutなし
まずStoryBoardのデバイスを**iPhone8**を指定して適当にButtonやLabel,TextViewを配置しました．

- **iPhone8の場合**
<img width="285" alt="スクリーンショット 2018-12-02 14.55.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/e0257599-296c-9a59-e80b-e2a2d88390ec.png">
当然まだAutoLayoutを指定していないので，iPhone界最大のiPhone MAXと最小のiPhone 4Sだとどうなっているかみてみましょう．

- **iPhone MAXの場合**
<img width="315" alt="スクリーンショット 2018-12-02 14.56.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/4f67a433-8127-5bba-42db-b19f381c2053.png">
縦に長いiPhone Maxではかなり下にスペースが生まれてしまいます．

- **iPhone 4S**
<img width="247" alt="スクリーンショット 2018-12-02 14.56.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/c95e3b9b-8ae6-8bfa-8b71-4610045ad14e.png">
どんなアプリかすらわからなくなってしまいました．

## 1.セクションごとに分けてみよう
### Viewを使う
ここから実際にAutoLayoutを使ってレイアウトを作成していきたいと思います．
今回StoryBoard上ではiPhone8を使用していますが，何度もいいです．
autoLayoutでは様々な制約で大きさや配置を決めることができるとは先ほども触れましたが，ビューが複雑になるとAutoLayoutでの制約も複雑を極めます．
そのためいくつかのゾーン毎に**UIVIew**を使用し，その中にLabelなどの部品を置いていくと比較的簡単にできます．．
<img width="285" alt="概要1-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/0780b203-bbfa-04c3-d6e7-cc338435b23d.png">
今回はTextViewやLabelなどをまとめる**テキストゾーン**と下のまるばつボタンを持つ**ボタンゾーン**で分けてみようと思います．
<img width="361" alt="スクリーンショット 2018-12-02 15.09.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/d563a7c2-0799-bf80-33bd-7c8c287f8942.png">
一旦UIViewを上下で半分づつになるように配置してみました．わかりやすいように色をつけました．
ここでは正確に合わせなくても後ほど制約を加えた後に自動で修正されます．
***
### 比率で揃える
次に上下のUIViewの橋からの距離を揃えていきます．
<img width="626" alt="スクリーンショット 2018-12-02 15.08.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/c607833d-63c4-1dfd-3de7-e16cef350757.png">
ここでは上下左右隣り合うviewからの距離が**0**と指定します．
<img width="603" alt="スクリーンショット 2018-12-02 15.09.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/f46b7ee6-af7b-87a6-ff15-b9ace96c7505.png">
下のViewも同様に設定したら，次に上下2つのビューを選択した状態で**Equal Width**と**Equal Height**にチェックを入れます．
このチェックにより2つのビューの大きさが等しくなります．

<img width="364" alt="スクリーンショット_2018-12-02_15_11_24.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/6893fb98-4c83-345c-43a5-74785911bd9c.png">
次に上のビューを選択し，ViewControllerの右側に現れる．上図のところを選択します．
<img width="260" alt="スクリーンショット 2018-12-02 15.11.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/60f35d30-5a3b-f0a1-d3d7-2a9cff647aef.png">
右のインスペクターパネルにこのように表示されているでしょうか
<img width="644" alt="スクリーンショット_2018-12-02_15_12_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/cacfa88b-fc0b-3f79-4e1e-a59a96e0b7ac.png">
上のようにMultiplierを**1:2**と編集すると左のように上から**2:1**の比率でレイアウトされるようになります．
他の端末でもちゃんと比率は保たれているでしょうか？
<img width="335" alt="スクリーンショット_2018-12-02_15_12_37.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/83bc6c97-9585-5b47-5be1-1bde38f959df.png">
<img width="279" alt="スクリーンショット_2018-12-02_15_12_46.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/a66e490d-d87b-de61-b982-12840d499cfe.png">
iPhone MaxとiPhone 4sでも2:1でレイアウトされています．

次は先ほど配置したViewの中に使用するLabelなどを先ほどと同様に配置します．<img width="319" alt="スクリーンショット 2018-12-02 15.06.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/7cd151bd-de40-c366-1276-7948c3b3e125.png">

## 2.各部品の固定
### テキスト系
ここから各部品に対してautolayoutを適用していきます．
基本AutoLayoutはビューの**「大きさ**・**座標」**の2つの要素を指定してあげる必要があります．
今回のクイズアプリではラベルの高さは文字サイズが固定であることから固定で，他の横幅や座標は周りのビューに依存するようにします．
<img width="565" alt="スクリーンショット 2018-12-02 15.19.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/a0af1629-03bd-b292-02fd-1abfe51e9790.png">
またクイズを表示するTextViewはViewに大きさに依存させるためにわまりのビューに依存するようにします．
<img width="558" alt="スクリーンショット 2018-12-02 15.23.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/7d6f29c5-3bba-39ac-3cfd-2c4caa68202b.png">
いい感じです．
****
### ボタン系
さて続いて**まるばつ**ボタンを固定していきます．
まるばつボタンに関しては下のビューの半分の領域で均等に分けて，その領域で**中央揃え**で整えることにします．
半分で均等に分けるのに手っ取り早くViewを先ほどと同様にして，**まる用**,**ばつ用**で分けて，その中で**中央揃え**にしていきます．
．<img width="710" alt="Main_storyboard_—_Edited.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/e039bc68-75da-4d0c-d232-e84e265443bb.png">
中央揃えは2つ以上ビューを選択しないと行うことができないので，親のビューとボタンを選択して中央揃えを指定します．

<img width="691" alt="スクリーンショット_2018-12-04_00_24_31.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/b0658822-bb70-c6c4-0010-d10b8f62a3cd.png">
**aspect比**を固定することでまるが楕円になることを防ぎます．またデバイスによりまるは大きくなることも考慮したいため，他のビューに依存するような制約方法をとります

ばつに関しても同じようにしてあげれば全体のレイアウトは完了です．
色を元のDefaultに戻してあげれば
<img width="330" alt="スクリーンショット_2018-12-03_00_13_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/0eb18556-52e4-2177-2fd3-2074ed394b2f.png">

<img width="255" alt="スクリーンショット_2018-12-03_00_13_27.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/ff205471-07b6-4243-2418-f142ba89e09c.png">
<img width="190" alt="スクリーンショット_2018-12-03_00_13_37.png" src="https://qiita-image-store.s3.amazonaws.com/0/82263/43e1d4df-529c-23fd-09d3-998ef6bca570.png">

どの端末でも同じようにレイアウトすることができました．