iOS Developer Library

デベロッパ

Auto Layoutガイド

このページの内容

Auto Layoutの概要

Auto Layoutは、ビュー階層に属する各ビューについて、それぞれに課された制約(constraint)を満たすよう、寸法や位置を動的に計算します。たとえば(ビューの一種である)ボタンに関して、横方向には「画像ビューと中央を揃える」、縦方向には「その上辺と画像の下辺との間隔を8ポイントにする」、という制約が考えられます。画像ビューの寸法や位置が変われば、ボタンの位置も自動的に追随します。

この制約ベースの設計手法により、内部要因、外部要因のいずれによる変化にも、動的に応答して追随するユーザインターフェイスが実現可能です。

外部要因による変化

(ビュー階層における)上位ビューの寸法や形状が変化したときに起こる変化です。その都度、与えられた空間を有効に使えるよう、ビュー階層のレイアウトを適切に更新しなければなりません。これはたとえば次のような状況で発生します。

  • ユーザがウインドウを拡大/縮小したとき(OS X)。

  • iPad上で、ユーザが画面を分割した、あるいはこれを解除したとき(分割ビューの機能、iOS)。

  • デバイスが回転したとき(iOS)。

  • 電話中や録音中を示すバーが現れた/消えたとき(iOS)。

  • さまざまなサイズクラスに対応するため。

  • さまざまな寸法の画面に対応するため。

多くは実行時に起こる変化なので、アプリケーションが動的に応答し、追随する必要があります。それ以外は、さまざまな寸法の画面に対応するなど、さまざまな環境に適応することが目的です。実行時に画面の寸法が変わることはまずありませんが、適応性の高いインターフェイスにすれば、iPhone 4SやiPhone 6 Plus、さらにはiPadでも良好に動作します。Auto Layoutは、iPad上でスライドオーバーや分割ビューを実現するための、重要なコンポーネントでもあります。

内部要因による変化

これはビューやコントロール部品の寸法が変化したときに起こります。

実際にこの変化が起こる状況をいくつか示します。

  • アプリケーションの表示内容が変化したとき。

  • 国際化に対応するため。

  • Dynamic Typeに対応するため(iOS)。

アプリケーションの表示内容が変化すれば、レイアウトも変えることになります。テキストや画像を表示するアプリケーションでは常に起こっていることです。たとえばニュース記事を表示する場合、その分量に応じてレイアウトを調整しなければなりません。同様に写真のコラージュも、さまざまな寸法やアスペクト比に対処する必要があるでしょう。

国際化とは、さまざまな言語、地域、文化に、アプリケーションを適応させることです。そのためには、対象とする言語や地域すべてを考慮し、適切に表示する必要があります。

国際化に伴い、レイアウトに関して次の4つを考慮しなければなりません。まず、画面上のテキストを各言語に翻訳すると、ラベル表示に必要な面積が変わります。たとえばドイツ語は、一般に英語よりも大きな空間を占めます。逆に日本語は、小さな空間で済む傾向があります。

次に、日付や数値の書式が、言語は同じであっても、地域によって異なることがあります。言語の違いに比べれば目立ちませんが、占める領域が多少でも変われば、画面を適応させなければなりません。

第3に、言語が違うと、テキスト領域の寸法だけでなくレイアウト構成も変わることがあります。言語によって書字方向は異なります。英語など左から右に書く言語だけでなく、アラビア語やヘブライ語のように、右から左に書く言語もあります。一般に、ユーザインターフェイス要素の配置順序は、この書字方向に合わせなければなりません。英語版で右下隅に配置したボタンは、アラビア語では左下隅になります。

最後に、iOSアプリケーションがDynamic Type対応である場合、ユーザはフォントの大きさを変更できます。その結果、画面上のテキスト要素の高さや幅が変わります。したがって、フォントだけでなくレイアウトも適応させなければなりません。

Auto Layoutとフレームベースのレイアウトの比較

画面のレイアウト方法には、大きく分けて3つの考え方があります。アプリケーション側にレイアウト処理を実装する方法、Autoresizing(自動寸法変更)マスクを用いる方法(ただし外部要因による変化の一部のみ)、Auto Layoutを用いる方法です。

従来は、ビュー階層に属する各ビューについて、フレームを設定するコードを実装し、レイアウトを決めるのが普通でした。フレームには、上位ビューの座標系で、ビューの位置(基準点)、高さ、幅を定義します。

image:../Art/layout_views.pdf

したがって、ビュー階層の各ビューについて、アプリケーション側で寸法や位置を計算する必要がありました。変化が起こると、その影響が及ぶビューすべてについて計算し直します。

これはさまざまな意味で、最も適応性に富んだ、強力な方法です。文字どおり、どのような変更でも施すことができるのです。逆に言えば、アプリケーション側ですべて管理しなければならない、ということでもあります。いかに単純な画面レイアウトであっても、設計、デバッグ、保守には相応の手間がかかるのです。本当に適応性が高いユーザインターフェイスを実装しようとすれば、規模に応じてどんどん難しくなります。

Autoresizingマスクを導入すれば、多少は楽になります。これは、上位ビューのフレームが変化したとき、当該ビューのフレームをどのように変えるか、定義したものです。したがって、外部要因による変化に適応するレイアウトは、かなり容易に実装できます。

しかし、この方法で対処できるレイアウトは、ごく一部に過ぎません。複雑なユーザインターフェイスを実現しようとすれば、アプリケーション側にプログラムを実装して補う必要があります。さらに、外部要因による変化にしか対応できない、という問題もあります。内部要因による変化には対処できません。

Autoresizingマスクは、アプリケーション側に実装するレイアウト処理のうち、常套的な処理を標準化しただけです。これに対し、Auto Layoutはまったく新しい原理にもとづきます。ビューのフレームではなく、ビューとビューとの関係を考える、という発想の転換です。

Auto Layoutでは、ユーザインターフェイスを定義するために、いくつかの制約を用います。制約は一般に、2つのビューの間に成り立つべき関係を表します。Auto Layoutはこの制約を満たすように、各ビューの寸法や位置を計算します。内部要因、外部要因のどちらによる変化にも追随し、動的にレイアウトを決めるようになっています。

image:../Art/layout_constraints.pdf

ある挙動を実現するため、一連の制約を設計する際に用いる論理は、手続き型あるいはオブジェクト指向のコードを記述するための論理とは大きく異なります。とは言え、他の考え方によるプログラムと比べ、習熟する上でそれほどの違いがあるわけではありません。学習は2段階で進めます。まず、「制約ベースのレイアウト」が拠って立つ考え方を理解します。その上で、具体的なAPIの使い方を学ぶことになります。この進め方は、他の考え方によるプログラムとまったく同じであり、Auto Layoutもその例外ではありません。

以降の章の目標は、発想を変え、Auto Layout流の考え方に切り換えることです。「制約を定義しない自動レイアウト」では、Auto Layoutを利用してユーザインターフェイスを実装する、大まかな手順を解説します。「制約の構造」では、Auto Layoutの背景にある理論を解説します。その考え方を自分のものとして「手なずける」ためには欠かせない理論です。「Interface Builderにおける制約の操作」ではAuto Layoutの設計ツールについて、「プログラムによる制約の生成」および「Auto Layoutの詳細」ではAPIについて詳しく解説します。「Auto Layoutの詳細」では、単純なものから順にさまざまな例を紹介します。学習の一助にするほか、自身の開発プロジェクトで利用しても構いません。さらに「Auto Layoutのデバッグ」では、問題が生じたときに役立つ事項を挙げ、ツールを紹介します。