XCode 7.2 日本語化計画-自動レイアウトヘルプ

自動レイアウト制約の編集

属性インスペクタで、その値を編集することによって、制約の定義を変更してください。

手順

1. アウトラインビューで制約の名前をクリックするか、キャンバス上の制約を表す青色の実線をクリックして、Interface Builder で制約を選択します。



アウトラインビューが表示されない場合は、キャンバスの左下隅にあるドキュメントアウトライン表示コントロール () をクリックして表示します。ネストした項目のリストから制約を選択します。以下のスクリーンショットでは、高さの制約が Archer のボタンで選択されました。







複数の制約を選択するには、アウトラインビューで制約の範囲を Shift - クリックするか、または個々の制約を Command - クリックします。たとえば、すべてのイメージの width 属性を選択して、同じ値にそれらを等しくなるように設定できます。



2. ツールバーのユーティリティ表示コントロール () をクリックしてワークスペースウィンドウのユーティリティ領域を開きます。


3. インスペクタバーの属性インスペクタボタン () をクリックします。



選択した制約または制約の定義が、インスペクタに表示されます。






インスペクタは、数学的関係として制約の定義を提示します。上のスクリーンショットでは、属性インスペクタは、ボタンの高さ (Button.Height)は 38 ポイントに等しいことを示しています。




制約は、通常、２つの項目に適用されます。例えば、制約は、スーパービューの底部 (Superview.Bottom) は、以下のスクリーンショットのように、ボタンの底部 (Button.Bottom) から 44 ポイントに等しいか、それ以上でなければならないことを指定します。






4. 以下のいずれかの操作を実行します。


• 制約によって課せられた関係を変更するには、または最初の項目または２番目の項目のポップアップメニューに特定された属性を変更するには、対応するポップアップメニューを使用します。以下のスクリーンショットは、２番目の項目のポップアップメニューから選択した２つの項目を表示しています。これらのポップアップメニューの値を解釈し、変更する詳細については、以下の説明をお読みください。





• 乗数、定数、または優先フィールドの値を変更するには、そのテキストフィールド、ポップアップメニュー、またはステッパーコントロールを使用します。以下のスクリーンショットは、優先フィールドのポップアップメニューを示しています。これらのフィールドの値を解釈し、変更する詳細については、以下の説明をお読みください。





• ビルド時に制約を削除するには、プレースホルダのチェックボックスを選択します。スタックなどの一部のコンテナビューは、実行時にそれらのサイズを決定するために、それらのコンテンツのサイズに、依存しています。そのため、サイズは設計時には不明です。項目のコンテンツのサイズが定義されていないため、制約は曖昧になります。この問題に対処するには、このチェックボックスを選択することで、設計のプレースホルダーとして、ビューの最小幅のように、制約を設定する必要があります。


• 制約を削除するには、Delete キーを押します。

属性インスペクタは、平等の関係について、以下のような線形方程式を反映する方法に制約情報を提示するようにレイアウトされています：

FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant

この式では、最初の項目の属性は、２番目の項目の属性に等しく、スケーリング係数を乗じ、及びポイントの定数によってオフセットされています。より大きいか等しい (>=) またはより小さいか等しい (<=) の属性間の関係にも制約は、使用できます。

また、優先度の値は、自動レイアウトが、1000 が必要な制約を特定し、1000 以下の値はオプションの制約を指定する他の制約に比べて制約を満たすために使用する先例を指定します。以下のスクリーンショットは、式で表される制約を提示します：

Superview.Bottom >= (Button.Bottom * 1) + 44

1000 の優先度は、これを必要な制約にします。つまり、スーパービューの底部は、それによってスーパービューの底部には、少なくとも 44 ポイントボタンの底部から離れていることを確実にし、ボタンの底部、プラス 44 ポイントと等しいかそれ以上であることが要求されます。

この記事の残りの部分で説明されているように、属性インスペクタに表示される制約の値を編集できます。

最初の項目と第２の項目。 これらの項目のポップアップメニューを使用すると、それらの属性を編集できます。各ポップアップメニューのタイトルは、制約が適用される項目を示すか、または複数の項目の制約を選択した場合は、ポップアップメニューは、制約のある項目の数を示します。各ポップアップメニューは、その項目の属性も識別し、または異なる属性の制約を選択した場合、メニューは属性の数を示します。

単一の制約の場合は、メニューのタイトルはピリオド (.) で区切られた各部分と２つの部分の文字列です。文字列の最初の部分は、項目を識別します。以下のスクリーンショットでは、最初の項目はスーパービューです。

制約メニューの項目を識別するために使用される名前は、アウトラインビューで使用したものと同じです。アウトラインビュー内の全てのカスタマイズされた名前は、ラベルのタイトルに使用されています。たとえば、以下の図では、２つの項目のそれぞれは、ラベルで、アウトラインビューの名前は、最初の項目 "エキスパート" と第２の項目 "初心者" のラベルに含まれる文字列です。

ピリオド (.) によってポップアップメニューのタイトルの最初の部分から離して、タイトルの第２の部分は、属性を識別します。項目とその方向の位置やサイズに応じて、インスペクタは、(自動レイアウトとレイアウト制約について で説明したように) 属性のこれらのグループのいずれか１つを表示します。

• 水平位置：リーディングトレーリング、左、右、センター X
• 垂直位置：トップ、ボトム、センター Y、およびベースライン
• サイズ：幅と高さ

また、水平方向または垂直方向の制約のタイトルの第２の部分は 余白 をもって終了できます。これは制約が、端ではなく、コンテナの余白にあることを意味します。以下の余白の議論を参照してください。

項目の属性を変更するには、項目のポップアップメニューから属性を選択します。以下のスクリーンショットでは、属性は、[リーディング(Leading)] 属性はセンター X を置き換えるように選択されています：

水平方向の属性をリーディングとトレーリングから左と右に変更するには、"言語の方向を尊重" の選択を解除するために、そのポップアップメニューを使用します (ただし、一般的に、左と右の代わりにリーディングとトレーリングを使用するのは、あなたのインターフェースがすべての言語で適切にレイアウトされている事を確認してください。)

水平位置属性をは、リーディングとトレーリングに戻して変更するには、"言語の方向を尊重" を再び選択します。(もしあなたがリーディングとトレーリングの複数の制約を左または右の属性に選択した場合、属性はそれらの混合した状態を反映するため、ポップアップメニューで薄暗く表示されます。)

項目に関連するメソッドについての情報を参照するには、項目の上にポインタを移動してください。

同じ属性を持つ複数の制約を選択した場合は、インスペクタは、属性と項目の数を示します。以下のスクリーンショットでは、センター X の属性は、最初の項目のポップアップメニュー内の２つの項目 (イメージビューとグレーの活動指標) に適用されます。

選択した複数の制約に関連する項目を識別するには、ポップアップメニューの上にポインタを移動するのが役立ちます。以下のスクリーンショットで Archer と Warrior のラベル付きボタンなどの項目は、キャンバス上で強調表示されます。

同じ項目の異なる属性の複数の制約を選択した場合は、インスペクタは、属性の数を示し、項目を識別します。以下のスクリーンショットでは、(属性の高さと幅で) ２つの制約は、ボタンとして選択されています。

各項目のポップアップメニューで別の属性を指定できるため、クロス属性の制約を作成できます。例えば、ラベル "Easy" のため、以下の図に示すように、スライダーの先端がラベルの センター X 位置と整列する (つまり、等しい) ように指定できます。

項目のポップアップメニューはまた、２つの項目を逆転させることができます。あなたが[第１および第２の項目を逆転(Reverse First and Second Item)] を選択すると、自動レイアウトは、数学的に等価な方法で制約を逆転します。ラベルがイメージビューの半分の高さになるように制約して、項目を逆にした場合、イメージビューは、ラベルの高さの２倍になるように制約されます。

余白。 コンテナビューへの水平方向と垂直方向の制約は 余白 やエッジにすることができます。余白は、UIView の layoutMargins 属性の値に対応し、コンテナビューのエッジと子供の対応するエッジ間の推薦された最小距離を指定します。詳細については、layoutMargins の API ドキュメントを参照してください。

制約ポップアップメニューの余白の使用を切り替えるには、Option キーを押したままにします。制約に応じて、以下の２つのことを行えます：

• 切り替える：エッジを使用する、コンテナの余白を使用して制約を切り替えます。
• 切り替える：余白を使用する、コンテナの余白を使用していない制約を切り替えます。

関係。 ポップアップメニューのタイトルは、制約によって課せられた関係を識別します。あなたは３つの値のいずれか１つとの関係を設定できます：等しい、以下、または以上。あなたが別の関係を持つ複数の制約を選択した場合は、ポップアップメニューのタイトルは、複数の値を読み込み、メニュータイトルは、混合状態を反映するように薄暗く表示されます。

乗数。 自動レイアウトは、最初の項目の属性が２番目の項目の属性と、その乗数の結果であると計算します。１以外の全ての値は、比例制約を作成します。以下のスクリーンショットに示すように、幅の属性としては、例えば、最初の項目の幅は、第２の項目の幅の２倍に設定できます。乗数を 10 進数 (2.0)、パーセント (200％)、分数 (2/1)、または割合 (2:1) にすることができます。

アスペクト比の制約の場合、乗数は、高さに対する幅の比です。単一項目の制約の場合、例えば、もし乗数が 1:2 なら、項目の幅が高さの半分に制限されます。２つの項目の場合、乗数は、第２の項目の高さへの最初の項目の幅の比です。乗数が 1:2 の場合、例えば、最初の項目の幅は、第２の項目の高さの半分に制約されます。

ステッパーをクリックして、乗数を増分あるいは減分し、その値を小数点値数で 0.1 増分すると、(例えば 2.0 から 2.1 へ) パーセンテージでは 1 % (例えば 50 ％から 51 ％に) で、分数の分子と比の場合 (例えば、1/5 から 2/5 へと 1:5 から 2:5へ）。

乗数を逆にするには、乗数フィールドのポップアップメニューから[乗数を逆に(Reverse Multiplier)] を選択します。例えば、分数 1/2 は 2/1 になります。比 1：2 は 2：1 になります。小数点値 0.5 は 2 になります。また、50％ は 200％ になります。

非小数乗数値を小数点値に変更するには、ポップアップメニューから[小数に変換] を選択します。例えば、分数 1/2 は 0.5 に変換されます。

また、メニュー内の３つのプリセット比から選択することもできます。これらのプリセットから作業する比を選択する簡単な方法を提供していますが、メニューは、これらは、標準または推奨のシステム値であることを意味するものではありません。

定数。 この値は、制約の、ポイント単位で、物理的なサイズまたはオフセットを定義します。たとえば、定義するのに、このフィールドを使用できます。

• ボタンの高さが 38 ポイントに等しくなるようにします：





• ラベルの幅が 68 ポイントに等しくなるようにします：





• スーパービューの底部とボタンの底部との間の垂直方向のスペースは、44 ポイント以上になるようにします：

項目間の距離を指定する制約の推奨された間隔を使用するには、定数フィールドのポップアップメニューから[標準値を使用(Use Standard Value)] を選択します。あなたが[標準値を使用] を選択した後、手動でキャンバス上の項目間の距離を変更しない限り、[キャンバス値を使用(Use Canvas Value)] はメニュー内で薄暗く表示されます。

優先権。 新しい制約は、それらを必要とする 1000 のデフォルトの優先権で作成されます。通常は、デフォルトの優先権を変更する必要はありません。ただし、意図しない方法で相互作用する制約が見つかった (例えば、１つの項目が移動し、別の項目がクリップされる) 場合は、問題を解決するため、重要度の低い制約に低い優先権を与えてみてください。

優先権を変更するには、テキストフィールドに 1〜1000 の整数値を入力します。すぐに設定するには[必要(Required)] (1000)、[高い(High)] (750)、または[低い(Low)] (250) に優先権を設定し、ポップアップメニューからこれらのいずれか１つの値を選択してください。値を増減するには、テキストフィールドの右にあるステッパーコントロールを使用します。1000 未満の優先権を持つ任意の制約の場合、自動レイアウトは、完全にそれを達成できない場合であっても、それが制約を満たすようにできる限り近づきます。

クリッピングされうる内容の項目については、ポップアップメニューには、クリッピングを防止するためのコマンドが含まれています。たとえば、375 の幅によって制約されたイメージは、ランドスケープの向きで綺麗に表示されることがありますが、ポートレイトの向きで近くの他の項目によってクリッピングされます。あなたが「クリッピングから 項目名 を防止する(Prevent item-name From Clipping)」を選択すると、自動レイアウトは、クリップされる事から項目を防ぐのに十分に高い優先権を計算し提供します。

関連記事

決定済みの議論