完全に理解する Storyboard & UIKit (Day 4): Auto Layoutの基本原理

以前のiOSアプリ開発では、要素を (X: 50, Y: 100, Width: 200, Height: 50) のように絶対座標（Frame）で指定していました。しかし、iPhoneの画面サイズが多様化し、iPadや画面回転（Landscape）が登場したことで、絶対座標では対応しきれなくなりました。

そこで登場したのが、今回学ぶ Auto Layout（オートレイアウト） です。

1. Auto Layoutとは？

Auto Layout は、「このボタンは画面の右端から20pxはなれた場所に置く」「この画像は画面の幅の半分にする」といった 制約（Constraints） を数式的に定義し、システムに要素のサイズと位置を自動計算させるシステムです。

Auto Layoutを使う絶対的なルール（ゴール）はただ1つです。 「すべてのUI要素に対し、X座標、Y座標、幅(Width)、高さ(Height)の4つの情報が確定するだけの制約(Constraint)を与えること」

制約が足りなければ要素の場所が分からずエラー（Missing Constraints）になり、逆に矛盾する制約が多すぎるとシステムが計算できずに競合（Conflicting Constraints）を起こします。

2. アンカー（Anchor）の概念

要素同士の位置関係を定義するために、各UI要素の境界線には「アンカー（Anchor）」と呼ばれる基準点が存在します。

主要なアンカーは以下の通りです。

1. Top (上)
2. Bottom (下)
3. Leading (先頭 / 日本語環境では左側)
4. Trailing (末尾 / 日本語環境では右側)
5. CenterX (水平方向の中心)
6. CenterY (垂直方向の中心)

💡 Left / Right ではなく Leading / Trailing を使う理由 Appleは、アラビア語などの「右から左へ文字を読む（RTL: Right-to-Left）」言語に対応するため、Left/Rightの代わりにLeading(先頭)/Trailing(末尾)の概念を導入しています。RTL言語設定にすると、システムが自動的に左右のレイアウトを反転してくれます（Left/Rightを使ってしまうと反転しません）。

3. 制約（Constraint）の数式

Auto Layoutの裏側では、線形連立方程式のエンジン（Cassowaryアルゴリズム）が動いています。あなたがInterface Builderでポチポチと設定している制約は、実は以下のような一次方程式として処理されています。

[Item1.Attribute] = [Multiplier] * [Item2.Attribute] + [Constant]

• Item1, Item2: 対象となるビュー（ButtonやViewなど）。
• Attribute: アンカー（Top, Leading, Heightなど）。
• Multiplier: 倍率（例: 親の半分の幅にするなら 0.5）。
• Constant: 定数・余白スペース（例: + 20 ポイントの余白）。

例1：「ボタンのLeading端を、親ビューのLeading端から20px離す」 Button.Leading = 1.0 * ParentView.Leading + 20

4. Interface Builderでの制約の付け方

Storyboard上で制約をつける方法はいくつかありますが、最も確実でよく使う直感的な方法を紹介します。

「Pin」メニュー（Add New Constraints）を使う方法

キャンバスの右下部にある、四角形に線が生えたアイコン（Add New Constraints）を使います。

1. キャンバス上のUI要素（例えばボタン）を選択します。
2. 右下の Add New Constraints アイコンをクリックします。
3. 上部の4つのボックス（四方の空欄）で、隣接する要素との距離（Constant）を入力し、赤い実線（I字の線）をクリックして有効化します。
4. 下部で Width（幅）や Height（高さ）にチェックを入れて固定値を設定することもできます。
5. 一番下の「Add X Constraints」ボタンを押して適用します。

Ctrl + ドラッグ を使う方法

1. キャンバス上でButtonを選択します。
2. キーボードの Control キーを押しながら、Buttonから 基準としたい別の要素（親ビューなど） へドラッグ＆ドロップします。
3. ポップアップメニューが出るので、Center Horizontally in Container（水平方向の中央揃え）などを選びます。

制約の調整と確認

• つけた制約は、Size Inspector (⌥⌘5) で確認・編集できます。
• 制約の数値（Constant）を変えたり、対象となる要素を後から変更することも可能です。

📝 今日のまとめ

• Auto Layout とは、数学的な「制約」を使って画面サイズに依存しないUIを作るシステム。
• 目標は、すべての要素の**「Ｘ・Ｙ・幅・高さ」**をシステムが計算できるようにすること。
• 左・右ではなく、RTL対応のために Leading / Trailing を使うのが標準。
• 制約の実態は Item1 = Item2 * 倍率 + 定数 という一次方程式である。

基本は理解できました。「幅と高さ、位置の制約を正確につければ良いだけ」です。 しかし、ラベル（UILabel）のように「中身の文字の長さによってサイズが変わる要素」はどう扱えば良いのでしょうか？ 明日の Day 5 では、少し高度な Intrinsic Content Size と 制約の優先度（Priority） について学びます。Auto Layoutの真髄はここにあります。