Interface Builder で AutoLayout を設定する(macos)

Storyboardでを使って画面を作成(子画面、TableViewなど)、画面遷移(セグエの利用)させることができ、AutoLayoutの概要をなんとか理解したので、実際にXCode、Interface Builderを使っての制約設定方法を覚える。

Auto Layout Guide: Working with Constraints in Interface Builder (apple.com)

Interface Builderで制約を操作

Interface Builderでオートレイアウトの制約を設定するには、主に3つのオプションがあります。

1. ビュー間のコントロールドラッグ
2. ピンツールとアラインツール
3. Interface Builderに制約を設定させ、その結果を編集または修正する

これらのアプローチには、それぞれ長所と短所があります。しかし、3つのアプローチを使いこなすことで、タスクに応じて素早くツールを切り替えることができます。

3つのオプションとも、まずオブジェクトライブラリからビューとコントロールをシーンにドラッグします。必要に応じて、サイズや位置を変更してください。キャンバス上にビューを配置すると、Interface Builderは自動的にプロトタイピング制約を作成し、ビューの現在のサイズと左上隅を基準とした位置を定義します。

プロトタイピングの制約

プロトタイピングの制約でアプリを構築し、実行することができます。これらの制約を使用して、ユーザー・インターフェースをすばやく視覚化し、テストしますが、その後、暗黙の制約を独自の明示的な制約に置き換えます。プロトタイピング制約を使用してアプリを出荷しないでください。

最初の制約を作成するとすぐに、システムは、制約によって参照されるビューからすべてのプロトタイピング制約を削除します。プロトタイピング制約がないと、レイアウトは、すべてのビューのサイズと位置を一意に決定するための十分な制約を持たなくなります。これは曖昧なレイアウトになります。影響を受ける制約が突然赤で表示され、Xcodeは多くの警告を生成します。

慌てないでください。レイアウトが完成するまで制約を追加し続けるだけです。1つの制約を追加した時点で、曖昧でなく、満足できるレイアウトを作成するために必要なすべての制約を追加する責任があります。

レイアウトの警告やエラーの修正に関する詳細については、Debugging AutoLayoutを参照。

コントロールドラッグによる制約

2つのビューの間に制約を作成するには、Controlキーを押しながら片方のビューをクリックし、もう片方のビューにドラッグします。

マウスを離すと、Interface Builderは、可能な制約のリストを含むポップアップメニューを表示します。

Interface Builderは、制約する項目とドラッグジェスチャーの方向に基づいて、制約のセットをインテリジェントに選択します。水平方向にドラッグすると、ビュー間の水平方向の間隔を設定するオプションと、ビューを垂直方向に整列させるオプションが表示されます。垂直方向に多かれ少なかれドラッグすると、垂直方向の間隔を設定するオプションと、ビューを水平方向に整列させるオプションが表示されます。どちらのジェスチャーにも、他のオプション（ビューの相対的なサイズの設定など）が含まれている場合があります。

コントロールドラッグは、制約を設定する非常に素早い方法ですが、制約の値はシーンの現在のレイアウトから推測されるため、1ポイントでもずれてしまうと簡単に終了します。より細かい制御が必要な場合は、制約を作成した後に制約を見直して編集するか、ピンツールとアラインツールを使用してください。

スタックツール、アラインツール、ピンツール、リゾルブツールの使い方

ピンツールとアラインツールは、制約を作る際に細かい制御をしたい場合や、複数の制約を一度に作りたい場合に使用します。さらに、これらのツールを使用すると、制約を作成する前にビューを正確に配置する必要がありません。代わりに、ビューの相対位置を大まかに設定し、制約を追加し、フレームを更新することができます。これにより、Auto Layoutが正しい位置を計算します。

Stack Tool

スタックツールは、スタックビューを素早く作成するためのツールです。レイアウトの中の1つまたは複数のアイテムを選択し、スタックツールをクリックします。Interface Builderは、選択したアイテムをスタックビューに埋め込み、スタックの内容に応じて現在のフィットサイズにリサイズします。

システムは、ビューの初期相対位置からスタックの軸とアライメントを推論します。軸とアライメントは、属性インスペクタを使って変更できます

Align Tool

整列ツールを使うと、レイアウト内のアイテムを素早く整列させることができます。整列させたい項目を選択し、「整列」ツールをクリックします。Interface Builderは、いくつかの可能な整列を含むポップアップビューを表示します。

Pin Tool

ピンツールを使うと、ビューの位置を隣のビューと相対的にすばやく定義したり、サイズをすばやく定義したりすることができます。位置やサイズを固定したい項目を選択し、ピンツールをクリックします。Interface Builderは、いくつかのオプションを含むポップオーバービューを表示します

ポップオーバーの上部では、選択したアイテムの先頭、上端、後端、下端を最も近い位置に固定することができます。関連する数値は、キャンバス内のアイテム間の現在の間隔を表します。カスタム間隔を入力するか、三角形をクリックしてどのビューに拘束されるかを設定するか、標準間隔を選択することができます。マージンに拘束” チェックボックスは、スーパービューへの拘束がスーパービューのマージンまたはそのエッジのどちらを使用するかを決定します。

ポップオーバーの下部では、アイテムの幅や高さを設定することができます。幅と高さの制約のデフォルトは現在のキャンバスサイズですが、異なる値を入力することができます。縦横比の制約もアイテムの現在の縦横比を使用しますが、この比率を変更したい場合は、制約の作成後に制約を確認し、編集する必要があります。

通常、固定するビューを1つ選択しますが、2つ以上のビューを選択して、同じ幅または同じ高さを与えることもできます。また、一度に複数の制約を作成したり、制約を追加しながらフレームを更新したりすることもできます。必要なオプションを設定したら、[制約の追加]ボタンをクリックして制約を作成します。

Resolve Auto Layout Issues Tool

自動レイアウトに関する一般的な問題を解決するためのオプションが多数用意されています。メニューの上半分にあるオプションは、現在選択されているビューにのみ影響します。下半分のオプションは、シーン内のすべてのビューに影響します。

Interface Builderで制約を作成させる

Interface Builderは、一部またはすべての制約を作成することができます。この方法を使う場合、Interface Builderはビューの現在のサイズとキャンバス内の位置から最適な制約を推論しようとします。わずかな間隔の違いでレイアウトが大きく変わることがあるので、ビューの位置には十分注意してください。

Interface Builderにすべての制約を作成させるには、［自動レイアウトの問題を解決する］ツール > ［提案された制約にリセットする］をクリックします。Interface Builderは、選択されたビュー（またはシーン内のすべてのビュー）に対して、必要なすべての制約を作成します。

または、いくつかの制約を自分で追加してから、Resolve Auto Layout Issuesツール > Add Missing Constraintsをクリックすることもできます。このオプションは、曖昧でないレイアウトを持つために必要な制約を追加します。この場合も、選択したビューまたはシーン内のすべてのビューに制約を追加することができます。

この方法によって、曖昧さのない、満足できるレイアウトをすばやく構築できますが、ユーザーインターフェイスが簡単でなければ、出来上がったレイアウトは思い通りに動作しないかもしれません。常にユーザーインターフェイスをテストし、意図した結果が得られるまで制約を変更してください。

制約の検索と編集

制約を追加した後は、制約を見つけ、表示し、編集できるようにする必要があります。制約にアクセスするためのオプションがいくつかあります。

キャンバスで制約を表示する

エディタには、現在選択されているビューに影響を与えるすべての制約が、キャンバス上に色付きの線で表示されます。形状、ストロークの種類、および線の色から、制約の現在の状態について多くのことを知ることができます。

表示される線	内容
Iバー（T字型のエンドキャップが付いた線）	空間の大きさを表す。このスペースは、2つのアイテムの距離、またはアイテムの高さや幅のいずれかを指定することができます。
プレーンライン（エンドキャップのない直線）	端が揃う位置を示す。
実線	必要な制約を表します（優先度=1000）
破線	オプションの制約を表します (優先度 < 1000)
赤線	この制約の影響を受ける項目の1つがエラーになっています。その項目のレイアウトがあいまいであるか、そのレイアウトが満足できないかのどちらかです。
オレンジ色の線	この制約の影響を受けるアイテムの1つのフレームが、現在の制約のセットに基づいて正しい位置にないことを示します。
青い線	制約の影響を受けるアイテムは、曖昧でない満足できるレイアウトを持ち、アイテムのフレームはオートレイアウトエンジンによって計算された正しい位置にあります
等しいバッジ	2つのアイテムに同じ幅または同じ高さを与える制約を、各アイテムに個別のバーとして表示します。両方のバーには、内部に等号（=）を含む青いバッジが付けられます。
大なり小なりバッジ	大なり小なりの関係を表すすべての制約に、内側に>=または<=の記号を持つ小さな青いバッジを付けます。

ドキュメントアウトラインの制約事項の一覧表示

Interface Builderは、ドキュメントアウトラインにある全ての制約を、それらを保持するビューの下にグループ化してリストアップします。制約は、制約の両方のアイテムを含む最も近いビューによって保持されます。この計算では、各ビューはそれ自身とそのすべてのサブビューを含み、トップとボトムのレイアウトガイドはシーンのルートビューによって含まれます。

制約がアウトラインのあちこちに散らばっていても、ほとんどの制約はシーンのルートビューの下で終わります。すべての制約を見つけたことを確認したい場合は、ビュー階層全体を展開します。

制約は、擬似コードを使用して一覧表示されます。これらのリストは長いことが多く、頻繁に似たようなビューのセットで始まるので、意味のある情報を見る前にアウトラインの幅を広げる必要があるかもしれません。アウトラインで制約を選択すると、キャンバスでその制約がハイライト表示されます。この機能を使用して、調べたい制約をすばやく特定することができます。

シンプルなシーンの場合、アウトラインはシーンのすべての制約に目を通すのに最適な場所です。しかし、レイアウトがより複雑になると、特定の制約を見つけるのが難しくなります。多くの場合、キャンバスでビューを選択するか、サイズインスペクタでビューを確認しながら、制約を一度に1つずつ調べた方がよいでしょう。

サイズインスペクタで制約を見つける

サイズインスペクタには、現在選択されているビューに影響を与えるすべての制約が表示されます。必須の制約は実線のアウトラインで表示され、オプションの制約は破線のアウトラインで表示されます。説明には、制約に関する重要な情報が一覧表示されます。説明には、影響を受ける属性と、制約の他の項目が常に含まれます。また、関係、定数値、および乗数または比率が含まれることもあります。

制約条件を調べる・編集する

キャンバスまたはドキュメントアウトラインのいずれかで制約を選択すると、属性インスペクタに制約のすべての属性が表示されます。これには、制約式からのすべての値（最初の項目、関係、2番目の項目、定数、乗数）が含まれます。また、属性インスペクタには、制約の優先順位とその識別子も表示されます。

制約のidentifierプロパティでは、コンソール・ログやその他のデバッグ・タスクで制約をより簡単に特定できるように、説明的な名前を指定することができます。

制約をプレースホルダーとしてマークすることもできます。これらの制約は、設計時にのみ存在します。アプリの実行時にレイアウトに含まれることはありません。通常、実行時に制約を動的に追加する予定がある場合は、プレースホルダ制約を追加します。曖昧でない、満足できるレイアウトを作成するために必要な制約を一時的に追加することで、Interface Builderの警告やエラーをクリアすることができます。

Constant、Priority、Multiplier、Relation、Identifier、Placeholderの属性は、自由に変更することができます。しかし、1番目と2番目の項目については、選択肢がより制限されます。1番目と2番目の項目を入れ替えることができます（必要に応じて、乗数や定数を反転させる）。また、項目の属性を変更することはできますが、項目そのものを変更することはできません。制約をまったく別の項目に移動する必要がある場合は、制約を削除して新しい制約と置き換えてください。

一部の編集は、「サイズ」インスペクタから直接行うこともできます。いずれかの制約の「編集」ボタンをクリックすると、ポップオーバーが表示され、制約の関係、定数、優先度、または乗数を変更することができます。さらに変更を加えるには、制約をダブルクリックして選択し、「属性」インスペクタで開きます。

コンテンツ・ハギングと圧縮抵抗の優先順位を設定する

ビューのコンテンツハギングと圧縮抵抗の優先順位 (CHCR 優先順位) を設定するには、キャンバスまたはドキュメントアウトラインのいずれかでビューを選択します。サイズ」インスペクタを開き、「コンテンツハギングプライオリティ」と「圧縮抵抗プライオリティ」の設定が見つかるまで下にスクロールします。