[iOS] オートレイアウトの設定:Storyboard

iPhoneの向きを変えてもレイアウトが崩れない方法(オートレイアウト)について詳しく解説します。

どのような機種の画面サイズであっても、画面を回転させても、画面上の要素の位置関係が崩れずに綺麗に表示されるオートレイアウトの設定方法を理解できます。

目次

概要

この講座で学習する内容
  • 次の記事で紹介しましたサイコロアプリオートレイアウトを設定します。
  • (応用問題)電卓画面のオートレイアウト→サイコロアプリの理解度を確認するための問題

アプリを作成する過程で、以下の内容を学習できます。

  • LaunchScreenについて
  • SafeAreaについて
  • Constraints
    画面上にどのようにレイアウトするかを指定するために設定できる制約
  • Alignment and Pinning
    整列、ピン留め、これらを組み合わせてアプリの横向き、縦向きの見え方をデザインする方法
  • コンテナViewの使い方
  • StackView
    画面上でコンポーネントを垂直方向と水平方向に積み重ねる方法
  • 黄色のエラー「Fixed width constraints may cause clipping.」の対処法

【参考にした講座】iOS & Swift – The Complete iOS App Development Bootcamp (Udemy)
 (Section6) Auto Layout and Responsive UIs

この講座で作成するアプリの概要
  • スマホの向きをどのように傾けても、スマホの機種(画面サイズ)を問わず、画像の位置関係が崩れない →オートレイアウトの設定
アプリの開発環境
  • Xcode: Version 14.2
  • macOS: Venture: Version 13.2.1
  • iOS: 16.4.1
GitHubからプロジェクトを入手したい方はこちら

サイコロアプリのオートレイアウト作成

まず、サイコロアプリを右に90度づつ回転した場合の画面のレイアウトがどのようになっているか確認してみましょう。

アプリは、正常に動作しているにも関わらず回転させようとすると、デザインが崩れてしまい(その一部が完全に切り取られてしまい)、アプリを正しく操作することができなくなります。

アプリを回転させるだけではなく、異なる画面サイズでアプリを実行しようとすると、デザインが崩れてしまいます

もちろん、アプリをそのままApp Storeにアップロードすることはできません。

デフォルト
右90度回転
180度回転
左90度回転

そこで、どんな向きや画面サイズでも美しく見えるようにする(オートレイアウト)ための方法を解説します。

1. LaunchScreenの設定

オートレイアウトについては、Main.storyboardをする前に、インターフェースがずっとシンプルであるLaunchScreenから行います。

LaunchScreenについても、左に90度回転させた画像から、メイン画面と同様な問題を抱えていることがわかります。

LaunchScreen
  • LaunchScreenは、メイン画面が表示される前に数秒間点滅する画面
  • LaunchScreenは、会社のロゴやキャッチフレーズを入れるのが一般的
デフォルト
左90度回転

1-1. 背景画像に制約(constraints)を設定する→4端にフィット

背景画像に制約を加え、横向きや別のデバイスで表示した場合でも携帯電話の4辺全てに接触し、画面全体にフィットするように伸縮するようにします。

STEP
4端に制約(constraints)を設定
  • 背景画像(AppBreweryBackground)を選択します
  • 右下にある小さいボタン②をクリックします
  • Add New Constraintsの上下左右4箇所の四角枠の数値を「0」、赤い線をクリックして破線から実線に変更します。
  • Add 4 Constraintsをクリックします
STEP
結果を確認

結果を確認するため、左に90度回転してみます。

先程より画面にフィットするようになりましたが、左右の両端まで背景画像が行き渡りません。

これは、SafeAreaという領域に両端が設定されているからです。

SafeArea
携帯電話のバッテリー情報または信号情報がある領域
ボタンがあるようなアプリを作成する場合は、この領域を避けるために設定されている

STEP
SafeAreaの調整

背景画像は画面全体を覆っても問題がないため、設定を変更します。

  • 「AppBreweryBackground.trailing = Safe Area.trailing」(右端)を選択します
  • 右上にある小さいボタン②をクリックします
  • Second Itemをクリックします
  • Superviewを選択します
  • 「AppBreweryBackground.leading = Safe Area.leading」(左端)も同様に①から④を行います
STEP
結果を確認

結果を確認するため、左に90度回転してみます。

背景画像が両端まで行き渡るようになりました。

1-2. ロゴ画像の設定(constraints)→常に真ん中

ロゴ画像はどのように回転しても、常に真ん中になるように設定します。

  • ロゴ画像「AppBreweryLogo」を選択します
  • 右下にある小さいボタン②をクリックします
  • 「Add New Alignment Constraints」の中にある「Horizontally in Container」(水平方向)、「Vertically in Container」(垂直方向)をクリックします
  • Add 2 Constraintsをクリックします

1-3. ロゴ画像の下にラベルを設定する→常にロゴ画像から30ピクセル

ロゴ画像がどのように回転しても、常にロゴ画像から30ピクセル下にラベルが表示されるように設定します。

STEP
ラベルを水平方向の真ん中に設定

まず、ラベルが水平方向の真ん中に位置するように設定します。

  • ラベル「Learn to Code By Marketing App」を図のように、適当に配置します。
  • 「Learn to Code By Marketing App」を選択します
  • 「Horizontally in Container」(水平方向)をクリックします
  • Add 1 Constraintsをクリックします
STEP
ラベルをロゴ画像の下30ピクセルの位置に設定

次に、ラベルがロゴ画像の下30ピクセルの位置になるように設定します。

  • 「Learn to Code By Marketing App」を選択します
  • 右下にある小さいボタン②をクリックします
  • 「Add New Constraints」にある③の四角枠の数値を30に変更します
  • 「AppBreweryLogo」を選択します
  • Add 1 Constraintsをクリックします

2. Main.storyboardの設定

2-1. 背景画像に制約(constraints)を設定する→4端にフィット

  • Main.storyboardを選択する
  • 背景画像「GreenBackground」を選択する
  • 右下にある小さいボタン③をクリックします
  • 「Add New Constraints」にある④の四角枠の数値を0に変更します
    数値の右端の矢印をクリックし、View(赤マーカ)を選択する
  • Add 4 Constraintsをクリックします

2-2. 画面を3分割しコンテナ(View)を埋め込む

画面には、ロゴ画像、サイコロ画像×2、Rollボタンの4つがあります。

画面をどのように回転しても位置関係が崩れずに綺麗に見えるように設定します。

STEP
画面を3分割にして、要素を配置

コンテナ(View)を使用して画面を3分割し、それぞれの要素をコンテナ(View)に埋め込むようにします。

  • 画面を3分割し、①の領域にロゴ画像を配置する
  • ②の領域にサイコロ画像×2を配置する
  • ③の領域にRollボタンを配置する
STEP
①の領域:ロゴ画像の設定
  • Viewを配置する
  • DiceeLogoがViewに格納されるように②の階層を調整する
STEP
②の領域:サイコロ画像×2の設定
  • サイコロ画像を2つ選択します
  • 「Editor」→「Embed in」→「View」を選択します
Embed in View
項目説明
View複数のビューやUI要素をグループ化するための透明なコンテナ。視覚的な整理や制約の管理に使用。
View Without Insetビューを透明なコンテナなしで埋め込むオプション。ビューの位置がそのまま反映される。
Scroll Viewコンテンツが画面に収まらない場合に、スクロール可能なエリアを提供。大きなコンテンツを表示。
Stack View複数のビューやUI要素を自動的に積み重ねる。簡単な整列やレイアウトのために便利。
STEP
③の領域:Rollボタンの設定
  • Rollボタンを選択します
  • 右下にある小さいボタン②をクリックします
  • Viewを選択します

2-3. 3つのコンテナ(View)の位置関係を設定する

3つのコンテナ(View)の位置関係を設定します。

STEP
Viewの名称変更

Viewを区別するため、上から「TopView」「MiddleView」「BottomView」に名称変更する

STEP
StakViewの設定
  • Viewを3つ選択します
  • 右下にある小さいボタン②をクリックします
  • StackViewを選択します
STEP
StackViewに制約(画面全体を占める)

画面がどのような向きであっても、StackViewが伸縮し画面全体を占めるようになる制約を設定します。

  • StackViewを選択します
  • 右下にある小さいボタン②をクリックします
  • 「Add New Constraints」にある④の四角枠の数値を0に変更します
    数値の右端の矢印をクリックし、SafeAreaを選択します
  • Add 4 Constraintsをクリックします

上記③のところでStackView.topはSafeAreaが選択できなかったため、個別で設定することにしました。

  • StackView.topを選択します
  • 右上にある小さいボタン②をクリックします
  • 「Second Item」にある変更したい「SuperView.Top」を選択します
  • Safe Areaを選択します

2-4. ロゴ画像、Rollボタンの位置調整

ロゴ画像、Rollボタンが格納されているViewに対し、どのように回転しても常に真ん中になるように調整します。

詳細な説明については、すでに解説済みのため省略し、画像のみ載せておきます。

STEP
ロゴ画像を中心に設定
STEP
Rollボタンを中心に設定

2-5. サイコロ画像×2の位置調整

STEP
StackViewを配置

サイコロ画像は、ロゴ画像、Rollボタンと異なり、画像が2つあるため、2つの画像をStackViewに配置します。

  • 「Dice Image View1」と「Dice Image View2」を選択します
  • 右下にある小さいボタン②をクリックします
  • StackViewを選択します
STEP
StackViewに制約(水平・垂直)を設定

次に、2つのサイコロ画像を格納したStackViewに対し、水平方向、垂直方向中心の制約を設定します。

  • StackViewを選択します
  • 右下にある小さいボタン②をクリックします
  • 「Horizontally in Container」(水平方向)、「Vertically in Container」(垂直方向)をクリックします
  • Add 2 Constraintsをクリックします

2-6. コンテナ(View)の最終調整

最後に、3つのコンテナの位置関係の調整、2つのサイコロ画像の位置関係の調整、コンテナを非表示にする設定などを行います。

STEP
3つのコンテナ(View)の位置関係を調整
  • StackViewを選択します
  • 右上にある小さいボタン②をクリックします
  • Spacingを1に設定します
STEP
2つのサイコロ画像の位置関係の調整
  • StackViewを選択します
  • 右上にある小さいボタン②をクリックします
  • Spacingを50に設定します
STEP
コンテナを非表示にする設定
  • 3つのViewを選択します
  • 右上にある小さいボタン②をクリックします
  • BackgroundColorをDefault(透明)に変更します
STEP
Rollボタンのサイズに制約を追加する←サイズの制約がなく小さすぎるため
  • Rollボタンを選択します
  • 右下にある小さいボタン②をクリックします
  • Weight 100、Height 50のサイズ制約を追加する
  • Add 2 Constraintsをクリックします

Rollボタンのサイズに制約を加えたことのより、黄色のエラー「Fixed width constraints may cause clipping.」が出てきます。これはRollボタンのText文字数が増えた時にサイズに収まらなくなる可能性があることに対し注意喚起しています。

「Fixed width constraints may cause clipping.」の対処方法
  • Remove Constraint
    制約を解除してラベルのサイズをコンテンツのサイズに変更する
  • Set Constraint >= Current Width
    現在のレイアウトを維持しながら、より長いテキストでラベルの幅を拡張できます。
  • Set Constraint to >= Minimum Width
    ボタンサイズが最小幅より小さくならないように設定する。

ここでは、真ん中の選択肢、「Set Constraint >= Current Width」を選択します。

これにより、テキストの文字数が少ない場合はCurrent Widthである100が設定され、文字数が多い場合は、文字数に合わせてサイズを拡大してくれます。

STEP
最終結果

これまでの設定により。画面をどのように回転しても、綺麗に見えるようになりました。

(応用問題)電卓画面のオートレイアウト作成

問題:電卓画面にオートレイアウトを設定してください。(下図の状況から開始)
完成図(縦向き)
完成図(横向き)
GitHubからクローンプロジェクトを入手したい方はこちら

1. オートレイアウトをするにあたっての方針、確認事項

  • 縦並びで6つのコンテナを配置する。
    「0」の行
    「%」から「÷」の行
    「7」から「×」の行
    「4」から「-」の行
    「1」から「+」の行
    「0」から「=」の行
  • 「0」の行の右端に少し空白を入れる
  • 「0」から「=」の行の「0」は横幅を他のキーの2倍にする
  • 上下のSafeAreaには画像が入り込まないようにする。

2. 縦並びで6つのコンテナを配置

2-1. 6つの各行にView(StackView)を埋め込む

STEP
「0」の行の設定
  • 「0」の行の画像を選択します
  • 右下にある小さいボタン②をクリックします
  • Viewを選択します
STEP
その他の行の設定

以下の行については、ViewをStackViewに読み替えて同様に①から③を行う
「%」から「÷」の行
「7」から「×」の行
「4」から「-」の行
「1」から「+」の行
「0」から「=」の行

6つのコンテナを配置すると、下図のようになります。

2-2. 6つのコンテナ(View)の位置関係を設定する

STEP
StackViewの設定
  • 6つのViewを選択します
  • 右下にある小さいボタン②をクリックします
  • StackViewを選択します
STEP
画面4端にフィット

次に、設定したStackViewに制約(Constraints)を設定し、画面4端にフィットするようにします。

  • StackViewを選択します
  • 右下にある小さいボタン②をクリックします
  • 「Add New Constraints」にある③の四角枠の数値を0(4箇所)に設定、数値右横にある矢印をクリックしView(画面の端)を選択する
STEP
SafeAreaの設定

次に、上下のSafeAreaには画像が入り込まないようにするため、StackView.topをSafeAreaに設定する。

  • 「Stack View.top = top」を選択する
  • 「Second Item」を選択する
  • SuperViewをSafeAreaに変更する
  • Constantを0にする
STEP
結果確認

その結果、下図のように、上下のSafeAreaには画像が入り込まないようになっていることを確認する。

STEP
均等配置

次に、6つのコンテナを上下間隔1ピクセル空けて、均等に配置します。

  • StackViewを選択する
  • AlignmentをFillに設定する
  • DistributionをFill Equalityに設定する
  • Spacingを1に設定する

3.コンテナ各行の設定

3-1. 一番下「0」から「=」の行を均等配置の設定

「0」キー1つの横幅が他のキー(「.」、「=」)の2倍の幅がある。

STEP
「.」、「=」を包含するStackViewを設定
STEP
そのViewと「0」キーが均等に配置するように設定

3-2. 中にある4つの行均等配置の設定

  • 以下の行を格納するStackViewを選択する
    「%」から「÷」の行
    「7」から「×」の行
    「4」から「-」の行
    「1」から「+」の行
  • DistributionをFill Equalityに設定する

3-3. 一番上の行、「0」の行を設定する

「0」が見えるように、格納しているViewのbackgroundをdefault(透明)に設定する

  • 「0」を選択する
  • 右下にある小さいボタン②をクリックします
  • 「Add New Constraints」にある③の四角枠の数値を0(4箇所)に設定、数値右横にある矢印をクリックしView(画面の端)を選択する

4. これまで設定した内容の動作確認

STEP
縦向き、横向きにした時の動作確認1回目
縦向き
横向き

横向きにした時、SafeAreaに電卓キーが入り込んでしまっているため、追加で修正する必要があります。

STEP
StackViewの設定を修正

再度、画面全体を覆うStackViewの設定を確認し、修正します。

  • 「trailing = Stack View.trailing」を選択する
  • 「First Item」または「Second Item」を選択する
  • SuperViewをSafeAreaに変更する
  • Constantを0にする
  • 同様に、「Stack View.leading = leading」についても①〜④を行う
STEP
縦向き、横向きにした時の動作確認2回目

再度確認した結果が下図の通りです。予定通りの設定をすることができました。

縦向き
横向き

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次