Control - ドラッグしてレイアウトの制約を追加
２つの項目間または項目内を Control - ドラッグして、レイアウトの制約を追加します。
手順
- Interface Builder のキャンバスに、自身にか、制約を追加したい軸に沿って別の項目に、項目から、Control - ドラッグします。
- 表示されるショートカットメニューから、制約を選択してください。制約をクリックすると、ショートカットメニューを閉じます。
垂直に Control - ドラッグすると垂直な制約を設定し、水平に Control - ドラッグすると、水平の制約を設定します。両方の軸に沿って制約を追加するには、斜めに Control - ドラッグします。制約はあなたがそれからドラッグしている項目とあなたが向かってドラッグしている項目の間に追加できた場合、目的先の項目が青色で強調表示されます。
キャンバスを使用する代わりに、それ自体に、項目から Control - ドラッグするか、またはアウトラインビューで別の項目にドラッグします。アウトラインビューが表示されない場合は、キャンバスの左下隅にあるドキュメントアウトラインコントロール (
) をクリックして表示します。
すでに定義されている制約は、弾丸 (•) で表示されます。
このスクリーンショットでは、"コンテナで水平に中央" への制約は、イメージビューで選択されています。複数の制約を追加するには、Shift キーまたは Command キーを押しながら、メニューから制約を選択し、Returnキーを押します。選択された制約は、チェックマークで示されます。例えば、"コンテナで水平に中央" と"コンテナで垂直に中央" を Shift - クリックし、同時に両方の制約を設定します。
新しい制約は、アウトラインビューに表示されます。キャンバス上で、Interface Builder は、有効な新しい制約を表現するために青色の実線を追加します。Interface Builder は、制約が完全にオブジェクトのサイズと位置を指定しない場合、または制約が見当違いのビューに貢献する時、オレンジ色で制約の行を表示します。制約間の競合がある場合は、Interface Builder は赤で制約の行を表示します。
項目のために導入している可能性がある、レイアウトの問題を解決するには、それを選択し、選択した項目のレイアウトの問題を解決 で説明したように、自動レイアウトの問題解決ツールから操作を選択します。
項目の位置、サイズ、向き、またはそれにあなたが Control - ドラッグした項目、(自動レイアウトとレイアウト制約について で説明した) ポジショニングとサイズ属性を表示するショートカットメニューによります。これらの属性は、項目の整列用長方形を参照しています。属性は、以下の３つのカテゴリに分類されます。
- 水平位置：リーディング、トレーリング、および中央。(水平位置が左または右のいずれかに固定されたままである必要がある場合、項目のポップアップメニューで"言語の方向を優先" の選択を属性インスペクタを使用して解除します。自動レイアウトの制約の編集 で説明したように、この操作はリーディングとトレーリングの属性を、左と右の属性に変更します。)
- 垂直位置：トップ、ボトム、中央、ベースライン。(２つの項目を選択して、両方がベースラインの場合にのみ、ベースラインの属性が利用可能です。テキストのレンダリングビューは、ベースラインで最も一般的な項目です。)
- サイズ：幅、高さ、およびアスペクト比
ショートカットメニューから等しい幅または等しい高さを選択した場合、２番目の項目の比率として１項目の幅や高さを指定する属性インスペクタの乗数フィールドを編集できます。詳細については、自動レイアウトの制約の編集 を参照してください。
ショートカットメニューからアスペクト比を選択した場合は、１つまたは２つの項目について幅が高さの比であることを制約します。それ自身に項目から Control - ドラッグした後、アスペクト比を選択した場合は、項目の幅が比の分子として使用され、高さは分母として使用されます。例えば、もし項目の幅が 200 ポイント、高さが 100 ポイントである場合、最初の比は ２：１ です。この比率は、キャンバス上と属性インスペクタの乗数フィールドにおける水平制約行に表示されます。逆の比率は、垂直制約行に表示されます。
１つの項目から別へと Control - ドラッグした後のアスペクト比を選択した場合は、自動レイアウトは比率の分子の項目の１つとして幅を選択します。第２の項目の高さは分母になります。例えば、自動レイアウトが、分子として 200 ポイントの項目の幅を選択し、第２項目は 100 ポイントの高さである場合、両者の間の初期のアスペクト比は 2：1 です。最初の項目の幅は、それによって第２の項目の高さの２倍に制限されます。最初のアスペクト比を変更するには、制約の属性インスペクタの乗数フィールドを編集します。幅のために使用される項目を変更する場合、属性インスペクタの最初の項目または２番目の項目のポップアップメニューから"第１および第２の項目を逆に" を選択します。両方の操作とも 自動レイアウトの制約の編集 で説明しています。
制約を作成した後、属性インスペクタでその定義の任意の部分を編集できます。前述したように、リーディングとトレーリング属性を左と右に変更することができ、幅または高さの制約を比例的な制約にできます。以下の事もできます：
- 項目または項目 (複数) のサイズ、オフセット、およびアスペクト比を変更します
- (それらの間の最小または最大のスペースを指定することにより、など) 項目の間の関係を変更します
- 各項目に異なる属性を割り当てます (１つの項目のリーディング先端が別の項目の水平方向の中央に整列するようにする、など)
- 制約を適用するための優先度を指定します
他の選択： 以下に示す関連の記事で説明したように、項目を選択して、ピ二ングと整列用制約を追加できます。これらの代替の方法では、同時に２つ以上の項目に制約を適用することができます。以下に記載されている、自動レイアウトガイド で説明したように、プログラムで NSLayoutConstraint クラスを使用して制約を追加することもできます。
関連記事
自動レイアウトとレイアウト制約について
ピンと整列ツールで自動レイアウト制約の追加
自動レイアウトの制約の編集
ビューコントローラ、ウィンドウ、またはルートビューのレイアウトの問題の解決
決定済みの議論
自動レイアウトガイド