【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に制約をつけた場合には
以下のような青い線が引かれて制約がつきます。この時、制約の対象にしているのは
デバイスの画面の端に対してです。

このように制約がつくと青い線が引かれます。

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

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

一方こちらは画面の絶対座標で制約をつけます。
絶対座標は水平方向のX軸と垂直方向のY軸で決定しています。
選択したViewが一つだった場合には画像のような下の２項目だけが選択可能です。

Horizontally in Container – SuperViewに対して水平方向、X軸、左右を調整
Vertically in Container – SuperViewに対して垂直方向、Y軸、上下を調整

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

2. StackViewを活用しよう

2-1. StackViewとは？

StackViewとは複数のViewを一つの塊として扱えるようにできるものです。
StackViewには次のが２種類あります。

水平方向、横にViewを並べるHorizontal Stack View
垂直方向、縦にViewを並べるVertical Stack View

2-2. StackViewを扱うメリット

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

3. レイアウトを組む上での注意点

3-1. 下書きをする

最初の頃ろはいきなりボタンやラベルを貼り付けて、気づいたら
足りないボタンがあって、でも制約つけてたからやり直し！という
ことが起きていました。紙でもツールでもいいので簡単なレイアウト
図を作成して完成イメージを整理してから挑みましょう。
私は今回の記事に執筆にあたってフリーボードという
Apple純正のアプリで作ってみました。

フリーボードで作った下書き

3-2. どこをStackViewにするか考える

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

3-3. Xcodeの調整項目や機能を調べる

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

NotionAIに書いてもらった機能の説明文

Iphoneの翻訳アプリ。どちらかいうとエラー文の翻訳向き

3-4. その他注意点

調整段階に入ったらなるべく画面サイズが小さいデバイスで作成する
作成中もこまめにシュミレータを立ち上げて状態を確認する
シュミレータは小、中、大のサイズで比較する
エディターと実際の見え方は違うことがあるので実物を確認する
制約の値を修正するときはプロパティーエリアの項目から直接選択する
大まかにオブジェクトを配置し終わったあとはエディタエリアではなく、 Document Outlineから選択する
制約をつける場合はどのViewに対してつけようとしているのか確認する

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

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

完成図

今回はiPhoneSE第３世代、iPhone14、iPhone14ProMaxで比較しながら
作成していきます。
ちなみに背景色やフォント、文章などは見分けがつきやすいように適当に設定しただけ
なので、お好みで変更してください。

手順1. Viewのバックグラウンドを変更

手順2. UIButtonを配置

フォントを変更

Font： System
style： bold
size： 20

背景色とボタン自体の色を変更

一つ目のボタンをコピーして２つ追加
オプションキーを押しながらドラッグ＆ドロップして離す、を２回

タイトルをキャンセル、保存、削除に変更

簡単に配置

手順3. UILabelを配置

タイトル:編集画面
Font： System
style： bold
size： 20

ボタンと同じ要領で４つコピーしてタイトルをそれぞれ名前、年齢、住所、経歴
に変更

手順4. UIImageを配置

Imageをperson.fillに、Imageの色、背景色を変更

手順5. TextFieldを配置

フォント、プレースホルダー変更

Font： System
style： bold
size： 20
placeholder: Swift太郎

コピーしてプレースホルダーを変更

手順6. TextViewを配置

TextView配置して住所を入力、フォント変更

Font： System
style： bold
size： 20

背景色を変更

経歴のTextViewは新しく追加し、背景色のみ変更

手順7. StackViewで小さいグループで囲む

どこで囲むかイメージする

StackしたいViewを選択
⌘押しながらクリックして複数選択

Embed InのメニューからStackを選択

同じ要領で全てグループ化

わかりやすいようにStackに名前つをつける
名前を選択

Returnキー押して編集

同じ要領で全てのStackに名前をつけ、画面と同じようにオブジェクトを並べ替える

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