【Swift】StackViewを活用してAutoLayoutを克服する

## はじめに

どうも、プログラミング未経験で学習中の**はるさん**です。
今回は**AutoLayoutのStackViewを活用したレイアウト方法**について
説明していきたいと思います。

私はAutoLayoutが本当に苦手でした。そんな中、記事や動画を参考にしながら
自身の苦手を克服しつつあるので、その方法をお伝えしたいと思います。
なお、今回は自身のアウトプットも兼ねて記事を書いています。
最後にStackViewを使った実例を載せていますので、そこだけ読みたい方は
目次からそこまで飛ばして読むことをお勧めします。

### 記事の対象者

- Swift学習を初めたばかりの方
- AutoLayoutが苦手な方

### 筆者の環境
- Xcode 14.2
- Swift 5.5.2
- iOS 16.2

## 1. AutoLayoutの基本

### 1-1. AutoLayoutとは
iOSアプリ開発において画面のレイアウトを自動的に調整し、様々なデバイスにあったサイズに
自動で調整してくれる機能です。この機能のおかげで画面サイズの違う機種ごとにレイアウトを
作成しないでも一つのレイアウトでアプリをリリースすることが出来ます。

### 1-2. ConstraintsとAlignment Constraints

ではどのようにしてサイズを調整するのかというと、Constraints（制約）を設定することで
調整を行っています。この制約とは
**対象のViewに対して対象のオブジェクトがどのくらいの距離があるか**
を設定することです。その対象が２つあるので簡単に説明します。

#### Add  New Constraint：対象のViewに対する距離の制約

対象のViewというのは大まかに言って２つです。
- デバイスの画面の端
- 画面上に配置しているオブジェクト
Xcode右下あたり、真ん中のアイコンです。
例えば画像のように紫のUIViewに制約をつけた場合には
以下のような青い線が引かれて制約がつきます。この時、制約の対象にしているのは
デバイスの画面の端に対してです。

![制約のメニュー画面（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/554ea977-7212-05ce-c20d-fdac7ee4b967.jpeg)![制約の例（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/769fe7b5-dfb5-497a-a114-e5e1bcbac757.jpeg)
_このように制約がつくと青い線が引かれます。_

上下左右の制約以外にも制約をつけることが出来ますがここでは説明を割愛します。

#### Add New Alignment Constraints：デバイスの画面に対する絶対座標での制約

一方こちらは画面の絶対座標で制約をつけます。
絶対座標は水平方向のX軸と垂直方向のY軸で決定しています。
選択したViewが一つだった場合には画像のような下の２項目だけが選択可能です。
- Horizontally in Container – SuperViewに対して水平方向、X軸、左右を調整
- Vertically in Container – SuperViewに対して垂直方向、Y軸、上下を調整
![アライメントの制約メニュー（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/b83e7aaa-e8d4-949c-b158-467856308858.jpeg)![アライメントの制約例（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/a355b238-4138-2f87-ce52-d529b66c11d6.jpeg)


こちらは絶対座標なので、デバイスによってははみ出してしまう可能性もあるため
使用頻度は少なめです。

## 2. StackViewを活用しよう
### 2-1. StackViewとは？
![スタックビュー（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/f84cf90e-8f95-8a14-f906-ce8b905acbb4.jpeg)

StackViewとは複数のViewを一つの塊として扱えるようにできるものです。
StackViewには次のが２種類あります。
- 水平方向、横にViewを並べるHorizontal Stack View
- 垂直方向、縦にViewを並べるVertical Stack View
![ホライゾナル（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/2f09ab50-53cf-30ca-11dd-a7d5c2a74537.jpeg)![バーチカル（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/3d3624e6-4d14-4687-bd73-d229e7af0512.jpeg)

### 2-2. StackViewを扱うメリット
StackViewを使うことで、View通しの制約を最小限に抑えることが出来ます。
例えばViewが１、２個しか使わない場合は個別に制約をつければいいのですが、
それが４、５、６個と増えていくとそれだけ複雑になっていきます。
そして、複雑な分制約の矛盾によるエラーや、後からレイアウトを変更しようと
した時に複雑すぎて１から作り直すことになってしまったとりということがおきます。
それを解消してくれるのがStackViewです。

## 3. レイアウトを組む上での注意点
### 3-1. 下書きをする
最初の頃ろはいきなりボタンやラベルを貼り付けて、気づいたら
足りないボタンがあって、でも制約つけてたからやり直し！という
ことが起きていました。紙でもツールでもいいので簡単なレイアウト
図を作成して完成イメージを整理してから挑みましょう。
私は今回の記事に執筆にあたってフリーボードという
Apple純正のアプリで作ってみました。
![フーボード（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/8743057d-d10d-507f-67a5-4ad2067dfc20.jpeg)
_フリーボードで作った下書き_

### 3-2. どこをStackViewにするか考える
下書きをした時点で、どのパーツをどのStackViewで囲むか検討しておくと
後々の作業が円滑に進みます。

### 3-3. Xcodeの調整項目や機能を調べる
Xcodeは残念ながら全ての文字が英語です。日本語に対応していません。
ですが、どれが何を調整する機能なのかわからないと完成までの道のりは遠いです。
幸い翻訳するのは今時簡単に行えますので、自身で調べてリスト化しておくと良いでしょう。
私は最近流行りのNotionAIやiPhoneの翻訳アプリを活用しました。

![ノーションAI（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/3059e774-05ec-f08c-593a-d5d7c62e0906.jpeg)
_NotionAIに書いてもらった機能の説明文_

![iPhone翻（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/bba87d37-b88f-5e9e-4ba6-72fa0318e8be.jpeg)
_Iphoneの翻訳アプリ。どちらかいうとエラー文の翻訳向き_

### 3-4. その他注意点
- 調整段階に入ったらなるべく画面サイズが小さいデバイスで作成する
- 作成中もこまめにシュミレータを立ち上げて状態を確認する
- シュミレータは小、中、大のサイズで比較する
- エディターと実際の見え方は違うことがあるので実物を確認する
- 制約の値を修正するときはプロパティーエリアの項目から直接選択する
![エディタエリアの制約項目（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/3d1fa0fb-9802-9c03-6eaf-823b70b30b2b.jpeg)

- 大まかにオブジェクトを配置し終わったあとはエディタエリアではなく、 Document Outlineから選択する
![Document Outlineの場所（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/765b2683-37f4-7c61-d0de-777813a674f1.jpeg)

- 制約をつける場合はどのViewに対してつけようとしているのか確認する
![制約対象の確認（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/bd346a74-18df-caa9-012a-49c5682abf38.jpeg)

## 4. StackViewを使ったレイアウト実践

ここからは実際にレイアウトを作っていきたいと思います。
AutoLayoutを習得するにはともかく作って慣れることだと思います。
是非、挑戦してみてください。

###  完成図
今回はiPhoneSE第３世代、iPhone14、iPhone14ProMaxで比較しながら
作成していきます。
ちなみに背景色やフォント、文章などは見分けがつきやすいように適当に設定しただけ
なので、お好みで変更してください。
![完成品（大）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/1ae29a87-eacf-b944-e5e9-56b2e787db2c.jpeg)

### 手順1. Viewのバックグラウンドを変更
![背景色変更（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/23d2a48e-5e20-4a51-c6ab-a53c8acf92b9.jpeg)

### 手順2. UIButtonを配置
![ボタン１（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/b986c3dc-e28c-88b1-40ea-14353f689a2f.jpeg)

フォントを変更
![ボタン２（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/a3c7d80c-e99e-74fe-9dcd-9e56faf5377b.jpeg)
 - Font： System
- style： bold
- size： 20

背景色とボタン自体の色を変更
![ボタン３（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/8649a036-72b4-9328-72a3-9f0ece01d96b.jpeg)

一つ目のボタンをコピーして２つ追加
オプションキーを押しながらドラッグ＆ドロップして離す、を２回
![ボタンコピー.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/e287a400-7588-1495-9da3-d7d25fecdbc8.gif)

タイトルを**キャンセル**、**保存**、**削除**に変更
![タイトル変更（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/53912b6a-5209-61ec-7464-33a3612f33a8.jpeg)

簡単に配置
![ボタン配置完了（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/eaebe7c1-cfc0-c3cc-c898-ffa0392ddfd6.jpeg)

### 手順3. UILabelを配置
![ラベル配置（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/0b4750e0-4809-3f0b-5d13-ed96d1d63132.jpeg)
- タイトル:編集画面
- Font： System
- style： bold
- size： 20

ボタンと同じ要領で４つコピーしてタイトルをそれぞれ**名前**、**年齢**、**住所**、**経歴**
に変更
![ラベル４つコピー（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/a9513015-ea8d-402c-36ed-2badbc4b88e0.jpeg)


### 手順4. UIImageを配置
Imageをperson.fillに、Imageの色、背景色を変更
![イメージビューを配置（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/7a18c7bb-bd8a-2274-86d6-a43505a54ceb.jpeg)

### 手順5. TextFieldを配置
フォント、プレースホルダー変更
![テキストフィールド（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/b7e762aa-dcc5-e3be-3677-6803356a146d.jpeg)
- Font： System
- style： bold
- size： 20
- placeholder: Swift太郎

コピーしてプレースホルダーを変更
![テキストフィールドコピー（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/093b9ddc-1933-8218-2a11-660b5c5d5439.jpeg)


### 手順6. TextViewを配置
TextView配置して住所を入力、フォント変更
![住所テキストビュー（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/93802742-2278-aefd-31f1-8cf66a473256.jpeg)
- Font： System
- style： bold
- size： 20

背景色を変更
![住所の背景色変更（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/e5debd21-3daa-fd91-ab60-674a47124043.jpeg)

経歴のTextViewは新しく追加し、背景色のみ変更
![経歴テキストビュー（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/ce2b0547-b5fb-616d-6ac3-ff77956accbb.jpeg)


### 手順7. StackViewで小さいグループで囲む
どこで囲むかイメージする
![スタックビュー下書き（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/e733c994-3734-85f1-faca-eaa48bc6e163.jpeg)

StackしたいViewを選択
⌘押しながらクリックして複数選択
![スタック部品選択（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/ea011de2-e583-5c9c-e383-e221147a0a6a.jpeg)

Embed InのメニューからStackを選択
![スタックメニュー選択（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/570da44f-5eea-83f5-26e7-e890a9617227.jpeg)

同じ要領で全てグループ化
![全てグループ化（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/f786c581-de9b-097c-bae5-fa0708d4822c.jpeg)

わかりやすいようにStackに名前つをつける
名前を選択
![スタックに名前（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/fe6d7b89-fcc2-9fe9-228d-17e4dccf44a8.jpeg)

Returnキー押して編集
![スタックに名前つける（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/9fd5752a-4609-d36e-68e8-4e905111e37b.jpeg)

同じ要領で全てのStackに名前をつけ、画面と同じようにオブジェクトを並べ替える
![スタック名前つけて整列（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/6cf7e59c-a771-33ba-e1a0-c83f1348c7df.jpeg)


:::note
- 今回はView同士が重なるレイアウトではないので単純に上から順にしている。  本来はSafeAreaの近くに置いたViewは画面の奥に表示され、 逆に遠くに置いた場合は表に表示される。
- 顔写真を並び替えるときには間違ってStackに入れてしまわないように 注意。顔写真を一番上にした後、タブStackを顔写真の上に持っていくと良い。
:::

### 手順8.  中くらいグループ、大きいグループのStackで囲む

名前Stackと年齢Stackを中くらいのStackで囲む
Stack名を**名前と年齢**に変更
![中くらいスタック（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/0863e876-f8a4-8540-e285-c8c0ed80fe46.jpeg)

全てのオブジェクトを選択してStackで囲む
![大きいスタック（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/62959543-6d0d-cd58-0727-f1ee2623ff81.jpeg)

Stack名を**全画面**に変更
![全画面スタック（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/1010166d-c850-3f44-52cb-031881b4933a.jpeg)

### 手順9. 全画面Stackの調整
エディタの作成画面をiPhone14からiPhoneSE第３世代に変更
![エディタをSEに変更（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/56edf4bc-5b31-3b40-2f09-2898d1a175f9.jpeg)

全画面Stackの位置を画面中央に配置
![全画面隙間開ける（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/95333597-f8f2-bf2a-4c9b-273f3c84c377.jpeg)
_大体で良い。四隅に隙間が空いていればOK_

全画面Stackを選択して制約をつける。
上下左右のポイントは**０**に設定、Constrain to marginsのチェックを外す
念の為、制約の対象がSafeAreaになってるか確認する
![全画面に制約（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/8865bed6-5837-e71b-be44-3dac4249456f.jpeg)

:::note
SafeAreaとは
画面上でコンテンツを表示する安全な領域
端末のステータスバー、ホームインジケータ、ノッチや曲面ディスプレイ領域のこと
:::

制約をつけた後はこんな感じ
![全画面に制約つけた（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/5759b35a-831b-5a82-bd0e-234a9bdc7eb8.jpeg)

シュミレーターをiPhoneSE第３世代に変更し、実行して確認してみる
![シュミレーター選択（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/d1f8f7c2-6870-4108-9edf-f4ec981479cf.jpeg)
![スクショで最初の確認（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/c4f686da-981e-9934-a586-47edcf6755ef.jpeg)

全体が枠内に収まっていることを確認。
この時点でTextViewが表示されていないが、後ほど修正する

### 手順10. タブStackの編集

タブStackを選択してDistributionを**Fill Equally**、Spacingを**0**、
backgroundを**Tint Color**に変更
![タブプロパティ変更（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/6aeaf443-c76a-4d72-9663-9a6ded5c7107.jpeg)

タブStackを選択して制約を追加。
左右に５ポイントづつつける。対象は全画面Stack。
Heightは４０に設定
![タブ制約（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/44515219-a8a7-6308-86b6-96009126b0ce.jpeg)

タブStackを開いて編集画面ラベルを選択し、Alignmentを中央に変更
![編集画面ラベル中央（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/dfe70a7d-a954-bc0f-2533-c49c490b0b66.jpeg)
_この時エディタでは**キャンセル**の文字が２行になっているが、一旦保留_

シュミレータで確認
![タブ編集完了（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/6e4e2cb4-1547-a0db-ff26-ac56858ef4aa.jpeg)
_**キャンセル**の文字は１行に収まっているのでこのままでOK_

### 手順11. 顔写真の編集

顔写真を選択し制約を追加する。
WidthとHeightを共に１５０に設定。
![顔写真編集（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/97d37882-1400-8cc7-f913-aab51b924428.jpeg)

シュミレーターで確認
![顔写真の確認（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/c42811af-ce3c-45b5-4042-4bf45979ccb1.jpeg)

### 手順12. 名前と年齢Stackの編集
名前と年齢StackのSpacingを１０に設定
![名前と年齢スタック編集スペース（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/e56162bd-fc54-bdd4-c56a-c1c52919f1e4.jpeg)

名前と年齢Stackの制約を追加。左右を５に設定
![名前と年齢に制約（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/a3fee30b-5d6f-99f4-eb5a-c523b9f8c878.jpeg)

名前と年齢Stackを開いて、名前StackのSpacingを１０に設定
![名前のスペース１０（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/9c68eb1d-01fc-9bd9-5f3d-de6d25b48cd6.jpeg)

年齢StackのSpacingを１０に設定
![年齢スペース１０（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/5a0244e0-c4c7-0f63-d183-9625fa79ab58.jpeg)

シュミレーターで確認
![名前と年齢スクショ確認（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/80897feb-0bf8-22e8-8c1a-1d09ae11e3b5.jpeg)

### 手順13. 住所Stackの編集
住所StackのSpacingを１０に設定
![住所スタックスペース１０（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/0910441d-3cea-93cd-54a7-62c0f8797ff5.jpeg)

住所Stackの制約を追加。左右５に設定
![住所スタック制約５（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/a26a4611-78c7-5c24-c0fe-c10a6f66d832.jpeg)

住所のTextViewに制約を追加。左だけ１０、右と上下は０で設定。
左の制約対象は住所ラベルでOK。
![住所テキスト制約左だけ１０（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/e3aed3d6-8267-dacd-4324-7aad374698d0.jpeg)

シュミレーターで確認
すると住所が完全に表示されていない。
修正が必要。
![住所の確認シュミ、修正必要（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/99de594e-2066-67f2-bd9d-62cf007283cb.jpeg)

今回は住所StackにHeightの制約を９０で設定する
![住所stack高さ９０で設定（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/1a440642-2fd8-df7c-3165-9ca3b0d2d76b.jpeg)

シュミレーターで確認
![住所シュミ確認、調整後（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/0feb9c4d-9d7c-4506-d880-2a211421493a.jpeg)


### 手順14. 経歴Stackの編集

経歴StackのSpacingを１０に設定
![経歴Stackスペース１０（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/76097702-6878-fd3c-5452-b321931df0d6.jpeg)

経歴Stackの制約を追加。左右５に設定
![経歴Stack制約左右５（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/b0e83cce-6c38-9020-465f-41f064b3b171.jpeg)

経歴のTextViewに制約を追加。左だけ１０、右と上下は０で設定。
左の制約対象は経歴ラベルでOK。
![経歴テキスト制約（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/002c96d3-bee3-db0a-8208-dd75b916dcf4.jpeg)

シュミレーターで確認
![経歴シュミ確認（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/53d23bfa-847f-b892-c81c-d380a94a1131.jpeg)

### 手順15.削除ボタンの編集

制約を追加。左右に５づつ設定。
![削除ボタン制約（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/eea5bfba-8deb-1a09-a059-a945555b23c8.jpeg)

シュミレーターで確認
![削除ボタンシュミ確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/4349d0ad-de66-345d-40f6-faed2420c5cc.png)

### 手順16. 最終調整

名前と年齢StackでSpacingを１０に設定したので全画面Stackの
Spacingも１０にしておく
![最終調整、全体スペース１０（中）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/bd766531-f01b-a69b-a711-1e0b0db46205.jpeg)

これで完成。
最後にiPhoneSE第３世代、iPhone14、iPhone14ProMaxで確認する。
![最終確認、完成（大）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3058346/8446c74f-adb5-20e8-9fda-3d610e3bae84.jpeg)

## 終わりに
いかがだったでしょうか。私にとってAutoLayoutは本当に苦手な部類です。
最近ではSwiftUIの登場により、もしかしたらStoryboardでのレイアウト作成は
下火になっていくのかもしれません。しかし、諸先輩方からは

_「UIKitが原点となってSwiftUIはできている。Storyboardによるレイアウトの基本は学んだほうが_
  _後々役に立つよ！」_

と助言をいただきました。私もまだまだ完璧ではありませんが、沢山のレイアウトを作成して
StoryboardによるAutoLayoutを習得していきたいと思います。

この記事が初学者の方々の学習において、少しでもお役にたてれば幸いです。

## 参考記事
[ 【Swift】超便利StackViewの実践的使い方！まだAutoLayoutで消耗してるの？ - Qiita ](https://qiita.com/kinopontas/items/d08f84dbb711c5acbe28)
## 参考動画
[ 【脱初心者】AutoLayoutの基本を徹底解説 ](https://youtu.be/b86bb2yz5PI)