ピンと整列用ツールで自動レイアウト制約を追加
ユーザーインターフェイス内の１つ以上の項目の固定サイズ、アスペクト比、または位置を指定し、ピンと整列用ツールで自動レイアウトの制約を作成して、２つ以上の項目間の距離や整列を指定します。
手順
- Interface Builder で、アウトラインビューまたはキャンバス上でクリックして項目を選択します。
- キャンバスの下部にあるレイアウトバーで[ピンツール(Pin Tool)] ボタンをクリックします。
- 以下のいずれかの操作を実行します。
- "最も近い隣への間隔" の制約を選択するには、項目の適切な側面に対応する赤い点線を選択します。その後、一定の距離を指定するポイントの所望の数を入力します。以下のスクリーンショットでは、左の最も近い隣までの距離が 80 ポイントになるように指定されています。
- 選択した項目 (または項目(複数)) の幅や高さを設定するには、適切なチェックボックスを選択し、テキストフィールドでポイントのサイズを指定します。
- 複数の選択した項目で同じ幅または高さを設定するには、適切なチェックボックスを選択します。別の割合として１つのオブジェクトの幅または高さを指定するには、同じ幅または高さを設定し、自動レイアウト制約の編集 で説明したように、その後属性インスペクタで乗数フィールドを編集します。
- 選択した項目(または項目(複数)) のアスペクト比の制約を設定するには、アスペクト比のチェックボックスを選択します。単一の項目のアスペクト比を選択した場合、項目の幅が比の分子として使用され、高さは分母として使用されます。複数の項目のアスペクト比を選択した場合は、自動レイアウトは、１つの項目の幅を分子とし、別の項目の高さを分母として選択します。最初のアスペクト比を変更するには、制約の属性インスペクタの乗数フィールドを編集します。幅または高さに使用する項目を変更するには、属性インスペクタの最初の項目と２番目の項目のポップアップメニューを使用して下さい。どちらの操作も、自動レイアウト制約の編集 で説明されています。
- ピンツールを使用して２つ以上の項目を整列するには、[整列(Align)] のチェックボックスを選択し、ポップアップメニューから属性を選択します：リーディングエッジ、トレーリングエッジ、トップエッジ、ベースライン、水平センター、または垂直センター。また、上の図に示したように、整列用ツールを使用することもできます。
- [制約の追加(Add Constraint)] をクリックします。
複数の項目を選択するには、アウトラインビュー内の項目の範囲を、Shift - クリックし、アウトラインビューで個々の項目をCommand - クリックするか、キャンバス上で個々の項目を Shift - クリックするか、Command - クリックします。たとえば、それらのすべてに同じ高さを指定するには複数の項目を選択することもできます。
アウトラインビューが表示されない場合は、キャンバスの左下隅にあるドキュメントアウトライン表示コントロール(
) をクリックして表示します。
Interface Builder は (自動レイアウトとレイアウト制約について で説明したように) 位置決めとサイズ属性を示す、ピンツールを表示します。これらの属性は、選択した項目の整列用長方形を参照します。有効な制約のオプションのみが有効になっています。例えば、単一の項目のみを選択している場合、複数の項目を必要とする制約は無効になっています。
項目間の推奨された間隔を使用するには、テキストフィールド内の黒の下矢印をクリックし、メニューから[標準値を使用(Use Standard Value)] を選択します。最も近い隣ではない別の項目に関連する制約を作成するには、テキストフィールド内の黒の下矢印をクリックし、ポップアップメニューから別の近くの項目を選択します。
いくつかのビュー・オブジェクトが固有のサイズを持っていることに注意してください。例えば、UILabel 要素は、選択されたフォントのテキスト文字列を表示するのに十分な大きさです。一般的には、幅と高さを設定するよりも、固有のサイズを使用する方がいいです。
水平方向の位置が左または右のいずれかに固定されたままにする必要がある場合、属性インスペクタを使って、項目のポップアップメニューで"言語の方向を尊重" を選択解除します。自動レイアウト制約の編集 で説明したように、この操作は、制約のリーディングとトレーリング属性を、左と右に変更します。
２つ以上の項目を選択して、すべてがベースラインを持っている場合にのみ、ベースライン属性が利用可能です。
あるいは、複数のオブジェクトを整列させるためだけでなく、コンテナの水平または垂直方向の (または両方の) 中心を単一のオブジェクトを整列させるための整列ツールとして使用できます。
すべての新しい制約の追加を最もよく満たすレイアウトのデザインでキャンバスを更新するには、は、[アップデートフレーム(Update Frame)] ポップアップメニューから"新しい制約の項目(Items of New Constrains)" か"コンテナ内のすべてのフレーム(All Frames in Container)" かを選択します。あなたが"新しい制約の項目" を選んだ場合、Interface Builder は、あなたの選択した項目のフレームのみを更新します。あなたが"コンテナ内のすべてのフレーム" を選択した場合は、、Interface Builder は、コンテナビュー内のすべてのフレームを更新します。[制約の追加] をクリックしたときに更新が有効になります。
ボタンのタイトルは、指定した新しい制約の数を反映しており、例えば、１つの制約を追加、２つの制約を追加、というように。このボタンをクリックすると、レイアウトに新しい制約 (または制約(複数)) を追加します。あなたは、既存の制約を編集してはいません。(既存の制約の編集については、自動レイアウト制約の編集 を参照してください。)
ボタンをクリックした後、新たな制約がアウトラインビューに表示されます。キャンバス上で、Interface Builder は、有効な新しい制約を表現するために青色の実線を追加します。制約は見当違いのビューに貢献するときまたはオブジェクトのサイズと位置を完全に指定しない場合には Interface Builder はオレンジ色で制約の行を表示します。制約間の競合がある場合、Interface Builder は赤で制約の行を表示します。
項目を導入したための、レイアウトの問題を解決するには、それを選択し、選択した項目のレイアウトの問題の解決 で説明したように、[自動レイアウトの問題解決(Resolve Auto Layout Issues)] ツールから操作を選択します。
ピンツールを使用すると、そのコンテナを基準に固定された位置に、ユーザーインターフェイスの項目を制約できます。
制約を作成した後、属性インスペクタでその定義の任意の部分を編集できます。前述したように、リーディングとトレーリング属性を左と右に変更できますし、幅または高さの制約を比例する制約にすることができます。以下の事もできます：
- 項目または項目 (複数) のサイズ、オフセット、およびアスペクト比を変更します
- (それらの間の最小または最大のスペースを指定することにより、など) 項目の間の関係を変更します
- (１つのオブジェクトのリーディングエッジが別のオブジェクトの水平方向の中央に整列させることのように) 各項目に異なる属性を割り当てます
- 制約を適用するための優先権を指定します
整列用ツールを使用すると、水平または垂直方向 (あるいはその両方) に、コンテナ内の単一項目を中央にできます。これをするには：
- 項目を選択します。
- キャンバスの下部にある整列用ツールボタンをクリックします。
- "コンテナ内の水平方向の中心" または"コンテナ内の垂直方向の中心"、またはその両方を選択します。
- [フレームを更新(Update Frame)] から選択し、新しい制約のあるキャンバスを更新してください。
- [制約を追加(Add Constraint)] のボタンをクリックします。
整列用ツールで整列用制約を追加することができ、以下にリストした関連する記事で説明したように、２つの項目の間または１つの項目内で Control - ドラッグして、制約のレイアウトを追加できます。以下にリストされている、自動レイアウトガイド で説明したように、プログラムで使用した NSLayoutConstraint クラスを使用して制約を追加できます。
関連記事
自動レイアウトとレイアウト制約について
Control - ドラッグしてレイアウトの制約を追加
自動レイアウト制約の編集
ビューコントローラ、ウィンドウ、またはルートビューのレイアウト問題の解決
決定済みの議論
自動レイアウトガイド