XCode 11.5 日本語化計画：自動レイアウトガイド

以下の文章は、自動レイアウトガイド (https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html) を日本語に訳したものです。

自動レイアウトの理解

自動レイアウトは、ビューに設定された制約に基づいて、ビュー階層内のすべてのビューのサイズと位置を動的に計算します。たとえば、ボタンをイメージビューで水平方向の中央に配置し、ボタンの上端が常にイメージの下端から 8 ポイント下に留まるようにボタンを制約できます。画像ビューのサイズまたは位置が変更されると、ボタンの位置が自動的に調整されます。

設計に対するこの制約ベースのアプローチにより、内部および外部の両方の変更に動的に応答するユーザーインターフェイスをビルドできます。

外部の変更

スーパービューのサイズまたは形状が変更されると、外部の変更が発生します。変更するたびに、ビュー階層のレイアウトを更新して、使用可能なスペースを最大限に活用しなければなりません。外部変更の一般的な原因は以下のとおりです。

• ユーザがウィンドウのサイズを変更する (OS X)。


• ユーザが iPad (iOS) で分割ビューに出入りする。


• デバイスが回転する (iOS)。


• アクティブな通話バーと音声録音バーが表示または非表示になる (iOS)。


• さまざまなサイズのクラスをサポートしたい。


• さまざまなスクリーンサイズをサポートしたい。

これらの変更のほとんどは実行時に発生する可能性があり、アプリからの動的な応答が必要です。その他、さまざまなスクリーンサイズのサポートなど、さまざまな環境に適応するアプリを表しています。通常、実行時にスクリーンのサイズが変化しない場合でも、最適化インターフェイスを作成すると、アプリを iPhone 4S、iPhone 6 Plus、または iPad でも同じように実行できます。自動レイアウトはまた、iPad のスライドオーバービューと分割ビューをサポートするための重要なコンポーネントでもあります。

内部の変更

ユーザーインターフェイスのビューまたはコントロールのサイズが変更されると、内部の変更が発生します。

内部の変更の一般的な原因は以下のとおりです。

• アプリで表示される内容が変わります。


• アプリは国際化をサポートしています。


• アプリは Dynamic Type (iOS) をサポートしています。

アプリのコンテンツが変更されると、新しいコンテンツでは古いコンテンツとは異なるレイアウトが必要になります。これは通常、テキストや画像を表示するアプリで発生します。たとえば、ニュースアプリは、個々のニュース記事のサイズに基づいてレイアウトを調整する必要があります。同様に、写真のコラージュは、幅広い画像サイズとアスペクト比を処理しなければなりません。

国際化とは、アプリをさまざまな言語、地域、文化に適応できるようにするプロセスです。国際化されたアプリのレイアウトでは、これらの違いを考慮し、アプリがサポートするすべての言語と地域で正しく表示されなければなりません。

国際化はレイアウトに 3 つの主な影響を及ぼします。第一に、ユーザインターフェイスを別の言語に翻訳すると、ラベルに必要なスペースの量が異なります。たとえば、ドイツ語は通常、英語よりもかなり多くのスペースが必要です。日本語は、しばしばはるかに少ない空白が必要です。

第二に、日付と数値を表すために使用される形式は、言語が変更されていなくても、地域によって異なる場合があります。通常、これらの変更は言語の変更よりも微妙ですが、ユーザインターフェイスは、サイズのわずかな変化にも適応する必要があります。

第三に、言語を変更すると、テキストのサイズだけでなく、レイアウトの構成にも影響を与えます。言語が異なれば、レイアウトの方向も異なります。たとえば、英語は左から右へのレイアウト方向を使用し、アラビア語とヘブライ語は右から左へのレイアウト方向を使用します。一般に、ユーザインターフェイス要素の順序は、レイアウトの方向と一致している必要があります。ボタンが英語のビューの右下隅にある場合、アラビア語では左下にある必要があります。

最後に、iOS アプリがダイナミックタイプをサポートしている場合、ユーザはアプリで使用するフォントサイズを変更できます。これにより、ユーザインターフェイスのテキスト要素の高さと幅の両方を変更できます。アプリの実行中にユーザがフォントサイズを変更した場合、フォントとレイアウトの両方を調整しなければなりません。

自動レイアウトとフレームベースのレイアウト

ユーザインターフェイスのレイアウトには、主に 3 つの方法があります。プログラムでユーザインターフェイスをレイアウトしたり、自動サイズ変更マスクを使用して外部の変更に対する応答の一部を自動化したり、自動レイアウトを使用したりできます。

従来、アプリはビュー階層の各ビューのフレームをプログラムで設定することにより、ユーザインターフェイスをレイアウトしていました。フレームは、スーパービューの座標系でのビューの原点、高さ、および幅を定義していました。

ユーザインターフェイスをレイアウトするには、ビュー階層内のすべてのビューのサイズと位置を計算する必要がありました。次に、変更が発生した場合、影響を受けるすべてのビューのフレームを再計算する必要がありました。

多くの点で、ビューのフレームをプログラムで定義することで、最も柔軟性とパワーが得られます。変更が発生した場合、文字通り必要な変更を行うことができます。ただし、すべての変更を自分で管理しなければならないため、単純なユーザインターフェイスをレイアウトするには、設計、デバッグ、および保守にかなりの労力が必要です。真に適応性のあるユーザインターフェイスを作成するにおは、難易度が一桁上がります。

自動サイズ変更マスクを使用して、この作業の一部を軽減することができます。自動サイズ変更マスクは、スーパービューのフレームが変化したときにビューのフレームがどのように変化するかを定義します。これにより、外部の変更に適応するレイアウトの作成が簡単になります。

ただし、自動サイズ変更マスクは、可能なレイアウトの比較的小さなサブセットをサポートします。複雑なユーザインターフェイスの場合は、通常、自動サイズ変更マスクを独自のプログラムによる変更で拡張する必要があります。さらに、自動サイズ変更マスクは外部の変更にのみ適応します。内部の変更はサポートされていません。

自動サイズ変更マスクは、プログラムによるレイアウトの反復的な改善にすぎませんが、自動レイアウトはまったく新しいパラダイムを表します。ビューのフレームについて考える代わりに、ビューの関係について考えます。

自動レイアウトは、一連の制約を使用してユーザインターフェイスを定義します。制約は通常、2 つのビュー間の関係を表します。自動レイアウトは、これらの制約に基づいて各ビューのサイズと位置を計算します。これにより、内部および外部の両方の変更に動的に応答するレイアウトが生成されます。

特定の動作を作成するための一連の制約を設計するために使用されるロジックは、手続き型またはオブジェクト指向のコードを記述するために使用されるロジックとは大きく異なります。幸いなことに、自動レイアウトの習得は、他のプログラミングタスクの習得と違いません。基本的な手順は 2 つあります。最初に制約ベースのレイアウトの背後にあるロジックを理解する必要があり、次に API を学ぶ必要があります。他のプログラミングタスクを学習するときに、これらの手順を正常に実行したでしょう。自動レイアウトも例外ではありません。

このガイドの残りの部分は、自動レイアウトへの移行を容易にするために設計されています。制約のない自動レイアウト の章では、自動レイアウトに基づくユーザインターフェイスの作成を簡略化する高レベルの抽象化について説明します。制約の構造 の章では、自動レイアウトを自分で正しく操作するために理解する必要がある背景理論について説明します。Interface Builder での制約の操作 では、自動レイアウトを設計するためのツールについて説明し、プログラムによる制約の作成 および 自動レイアウトレシピ集 の章では、API について詳しく説明します。最後に、自動レイアウトレシピ集 は、さまざまなレベルの複雑さの幅広いサンプルレイアウトを示し、独自のプロジェクトで学習して使用できます。自動レイアウトのデバッグ は、問題が発生した場合に修正するためのアドバイスとツールを提供します。