【Xcode】Auto Layoutの制約を使ってiOSで画面下部にビューを配置する方法

iOSアプリ開発において、ビューを画面の下部に配置する最も推奨されるモダンな方法は、Auto Layoutの「制約（Constraints）」を使用することです。この記事では、制約を活用してビューを画面下部に配置する手順を、初心者の方にもわかるように丁寧に解説していきます。

ステップ1：新規プロジェクトの作成

Xcodeを起動し、「New Project」→「Single View Application」を選択して新しいプロジェクトを作成します。ここではプロジェクト名を「ViewAlignment」とします。

本記事ではUIViewを使用しますが、同じ手順でUIButtonやUILabelなど、任意のUIコンポーネントにも応用できます。

ステップ2：Storyboardの編集

Main.storyboardを開き、ViewControllerの背景色を変更します（これは見た目のわかりやすさを高めるためです）。その後、画面にUIViewを追加してください。

ステップ3：制約（Constraints）の追加

UIViewを選択した状態で、「Add New Constraints」ボタンをクリックし、制約を追加していきます。

制約を設定する際には、必ず以下の4つの要素を意識しましょう。

• X軸の位置（Leading：左端 ／ Trailing：右端）
• Y軸の位置（Top：上端 ／ Bottom：下端）
• 高さ（Height）
• 幅（Width）

これらのうち1つでも欠けていると、UIが意図しないレイアウトになり、最悪の場合はアプリがクラッシュすることもあります。

今回は、UIViewを画面の下端・左端・右端に対してそれぞれ0ポイントで固定し、高さを100ポイントに設定します。ビューの周囲に余白を持たせたい場合は、5〜10ポイント程度の値を指定するとよいでしょう。

ステップ4：ビューの色を変更して確認

UIViewの背景色をシアン（水色）に変更すると、ビューは以下のように画面下部にぴったりと配置されます。

ステップ5：各種デバイスでの動作確認

制約（Auto Layout）を使ってビューを正しく配置できていれば、アプリはどの画面サイズでも、縦向き・横向きの両方の向きでも問題なく表示されるはずです。

ここでは、iPhone 8とiPad Pro（9.7インチ）の2つのデバイスで、縦横それぞれの向きを確認してみましょう。