今回は、swiftのautolayoutについて記事を書きます！🌟
autolayoutとは、、ビューのサイズによって、パーツの幅や高さに関する制約をかけることです。
今までアプリをランさせたときに、下の画像のようにレイアウトぐちゃぐちゃになっている！みたいなことありませんでしたか？👀
| iPhoneSEで起動した時 | iPhone13ProMaxで起動した時 |
|---|---|
 |
 |
autolayoutを利用してパーツに制約をかけることによって、ランする機種を変更しても一定のレイアウトを維持できるようになるのです！
最初は慣れるまで抵抗があるかもしれませんが、やっていくうちにパズル感覚でできるようになるので一個一個ゆっくりやってみてください！
#ポイント
- autolayoutをする上で重要なことは、幅,高さ,x座標,y座標を決めることです。
これら制約をかけることでこれら四つの要素が一意に決まればおっけいです！
x座標、y座標ってなに？？ってなると思いますが、下の画像を見ていただければイメージつきやすいかと思います。。。
パーツの壁からの距離が指定できればおっけいです！
- autolayoutを組むときは、storyboard上のViewControllerのサイズ(おそらくiPhoneSE)を最小にしましょう！
大きものにした状態で制約をかけると、小さい機種でランした時に制約のエラーがでてしまい、綺麗なレイアウトを維持することができません。
#各種紹介
制約の掛け方のパターンはかなり多いため、autolayoutで利用できる機能を紹介していきます。
###動作説明
1.storyboardを開き、viewcontrollerの中のパーツを選択します。
2.画面したの以下のボタンをクリック
3.すると上記gif画像のような画面になります。
| 要素 | 役割 |
|---|---|
 |
上下左右それぞれからの距離 |
| Width | 幅を絶対値で指定 |
| Height | 高さを絶対値で指定 |
| AspectRatio | 幅と高さの比率を指定 |
| Equal Width | 複数パーツ選択時、幅を等しくする |
| Equal Height | 複数パーツ選択時、高さを等しくする |
そのほかにもさまざまな制約の掛け方がありますが、今回は基礎編なので割愛します。
###autolayoutを確認する方法
| 工程 | 動作 | 画像 |
|---|---|---|
| Step1 | autolayoutを確認したいパーツを選択 |  |
| Step2 | 右上の三角定規のようなボタンをクリック |  |
| Step3 | Constraintsの部分にかけている制約を確認できます |  |
#実際にやってみよう！
今回はInstagramのログイン画面でautolayoutを組んでいきます。
人によっては中央のパーツから制約をかける人もいますが、今回は一番上のパーツから下のパーツへ順に制約をかけていきます。
###step1(画面上部のImageViewにautolayoutを組む)
1-1. 最上部のImageViewを選択
1-2. Viewのトップからの値を50,Viewの右側・左側からの値を60に指定
1-3. Height(高さ)を100に指定
上記の制約をかけることで、ポイントの部分で記述した幅,高さ,x座標,y座標の四つの要素を一意に定めることができました。
それぞれを式で表すと
（※ここでは、Viewの幅をX,高さをYとする。機種によってX,Yの値は変化するので、それに伴いパーツの幅や高さなども可変になります）
| 要素 | 値 |
|---|---|
| 幅(Width) | X-60-60 |
| 高さ(Height) | 100 |
| (X座標,y座標) | (60,50)(=左から60,上から50となってます！) |
###step2(上から1個目のtextFieldにautolayoutを組む)
2-1. 上から1個目ののtextField①を選択
2-2. 上のパーツ（先ほど選択したImageView）からの値を40,Viewの右側・左側からの値を40に指定
2-3. Height(高さ)を40に指定
step1と同様にそれぞれの四つの要素について確認してみましょう
| 要素 | 値 |
|---|---|
| 幅(Width) | X-40-40 |
| 高さ(Height) | 40 |
| (X座標,y座標) | (40,190)(=左から40,上から190となってます！) |
190というのは、どこから来たでしょうか？？
190
= Viewトップからの距離
= ViewトップからImageViewまでの距離 ＋ ImageViewの高さ + ImageViewからtextFieldの距離
= 50 + 100 + 40
となっています。
###step3(上から2個目のtextFieldにautolayoutを組む)
3-1. 上から2個目のtextField②を選択
3-2. 上のパーツ（先ほど選択したtextField）からの値を20,Viewの右側・左側からの値を40に指定
3-3. Height(高さ)を40に指定
step1と同様にそれぞれの四つの要素について確認してみましょう
| 要素 | 値 |
|---|---|
| 幅(Width) | X-40-40 |
| 高さ(Height) | 40 |
| (X座標,y座標) | (40,250) |
またまた250というのは、どこから来たでしょうか？？
250
= Viewトップからの距離
= ViewトップからImageViewまでの距離 ＋ ImageViewの高さ + ImageViewからtextField①の距離 + textField①の高さ + textField①からtextField②までの距離
= 50 + 100 + 40 + 40 + 20
となっています。
###step4,5(パスワードボタンと、ログインボタンにautolayoutを組む)
4-1. パスワードボタンを選択
4-2. 上のパーツ（先ほど選択したtextField②）からの値を15,Viewの右側からの値を40に指定
4-3. Width(幅)を160に指定
4-4. Height(高さ)を20に指定
5-1. ログインボタンを選択
5-2. 上のパーツ（パスワードボタン）からの値を30,Viewの右側、左側からの値を50に指定
5-3. Height(高さ)を35に指定
パスワードボタン
| 要素 | 値 |
|---|---|
| 幅(Width) | 160 |
| 高さ(Height) | 20 |
| (X座標,y座標) | (X-200,305) |
X-200
= Viewの幅 - パスワードボタンの幅 - パスワードボタンと右側壁からの距離
= X - 160 - 40
305
=textField②のy座標 + textField②の高さ + textField②からパスワードボタンまでの距離
=250 + 40 + 15
ログインボタン
| 要素 | 値 |
|---|---|
| 幅(Width) | X-40-40 |
| 高さ(Height) | 40 |
| (X座標,y座標) | (40,355) |
355
=パスワードボタンのy座標 + パスワードボタンの高さ + パスワードボタンからログインボタンまでの距離
=305 + 20 + 30
###step6(FaceBookボタンにautolayoutを組む)
6-1. FaceBookボタンを選択
6-2. 上のパーツ（先ほど選択したログインボタン）からの値を15,Viewの右側からの値を40に指定
6-3. Width(幅)を160に指定
6-4. Height(高さ)を20に指定
FaceBookボタン
| 要素 | 値 |
|---|---|
| 幅(Width) | X-80-80 |
| 高さ(Height) | 35 |
| (X座標,y座標) | (80,410) |
410
=ログインボタンのy座標 + ログインボタンの高さ + ログインボタンからFaceBookボタンまでの距離
=355 + 40 + 15
#終わりに
拙い文章ですので、わかりにくい部分などあればコメントに記入していただき改善するための参考にさせていただきますのでよろしくお願いします。