【初心者向け】Swift・iOS開発におけるXcode Auto Layoutの使い方と制約の基本

Auto Layoutとは？

Auto Layout（オートレイアウト）は、iOSデバイス向けユーザーインターフェース（UI）の開発に使用される、制約（コンストレイント）ベースのレイアウトシステムです。この制約ベースのシステムにより、画面サイズや向き（縦持ち・横持ち）が異なるさまざまなデバイスへ自動的に適応する「アダプティブUI」を実現できます。

Auto Layoutは完全に制約に依存しており、開発者は隣接する要素や親要素との位置関係を定義することで、UIコンポーネントの位置を確定させます。

なぜAuto Layoutが必要なのか

iOSアプリを設計する際には、開発するUIがすべての画面サイズと向きで正しく表示されることを保証しなければなりません。そのような場面でAuto Layoutが威力を発揮します。

次の画像をご覧ください。iPhone 6では画面中央に配置されたボタンが、他のデバイスでは中央に揃っていません。これは、iOSデバイスごとに画面の寸法が異なるためです。この記事では主に制約について解説しますが、各デバイスの寸法について詳しく知りたい方は https://iosres.com/ を参照してください。

開発したUIをすべてのデバイスと向きで統一して表示するために、これからAuto Layoutを使用していきます。それでは始めましょう。

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

Xcode → New Project → Single View Application の順に選択し、プロジェクト名を「AutoLayout」とします。

ステップ2：ボタンの配置

Main.storyboard を開き、以下のようにボタンを追加します。参考として、デバイスはiPhone 7 Plusを選択してください。

ここでは、制約を一切設定せずにボタンをランダムな位置に1つ追加しました。目標は、このボタンを画面中央に配置し、すべてのデバイスと向きに対応させることです。ステップ3に進む前に、具体的に何をすべきか、どうやって実現するのかを理解しておきましょう。

制約を定義する2つの方法

Xcodeには、Auto Layoutの制約を定義する2つの方法があります。「Auto Layoutバー」と「Controlドラッグ」です。この記事では主にAuto Layoutバーを使用しますが、Controlドラッグの使い方も必ず紹介します。Interface Builderの右下には5つのボタンが並んでおり、これらは制約を定義するための「レイアウトボタン」と呼ばれます。

それでは、Auto Layoutバーを使ってボタンに制約を設定していきます。

制約システム全体を支える基本となる理論は、4つのパラメータ（leading＝先頭、trailing＝末尾、top＝上端、bottom＝下端）に加え、高さ（height）、幅（width）、そして垂直・水平方向の中心（centerY / centerX）です。

ステップ3：中央揃えの制約を追加

ボタンをクリックして「Align」を選択し、下図のように「Horizontally in Container」と「Vertically in Container」にチェックを入れます。

両方の制約を追加すると、ボタンが画面中央に配置されているのが確認できます。

また、以下のようにControlドラッグ機能でも同じ操作が可能です。UIコンポーネントを選択し、Controlキーを押しながらドラッグして制約を設定し、「Center Horizontally」と「Center Vertically」を選択します。

ステップ4：幅と高さの定義

次に、ボタンの幅と高さを定義します。下図のように「Add New Constraints」オプションを選択し、高さと幅を追加しましょう。

あるいは、コンテナに対する水平・垂直方向のセンタリングを設定しない場合は、leading制約・trailing制約・上マージン・下マージンを指定する方法もあります。

ステップ5：動作確認

これで必要な制約はすべて設定完了です。常に覚えておきたいのは、4つのエッジ（上下左右）、X軸への整列、Y軸への整列、幅、高さという要素であり、これらを組み合わせてUIコンポーネントの位置とサイズを固定します。

それでは、さまざまなデバイスと向きでアプリを実行し、結果を確認してみましょう。

制約の編集・削除方法

制約を修正したり削除したりしたい場合は、右側ペインのユーティリティエリアで5番目のアイコン（Size Inspector）を選択し、下にスクロールすると、画像のように制約の一覧から編集できます。

まとめ

このチュートリアルでは、Auto Layoutと制約を使ってアダプティブUIを開発する方法の基礎を解説しました。今回紹介した基本概念をもとに、複数のUIコンポーネントを組み合わせて、ぜひ実際に試してみてください。