4-9. 制約

1.制約の適応

制約は、フレームのサイズを変更したときにオブジェクトがどのように変化するかを設定することが出来ます。
これにより、さまざまな画面サイズとデバイスでデザインがどのように表示されるかを制御することが出来ます。

例えば、図1のようにカードUIの大きさを可変してもそれを追従するように中の全ての要素がサイズと位置を変更することが出来ます。
これをコンポーネントと組み合わせて使うことで、UIデザインの作業効率を格段に上げることが出来るため、活用していきましょう。

制約を使うには、フレーム内に存在するオブジェクトを選択します。
次に、図2プロパティパネルの右に位置する「Consrains」セクションから設定を行うことができます。
図3のように十字部分をクリックすることで、どの位置を固定するかを選択することが出来ます。また、プルダウンメニューからでも選択することが可能です。制約を複数選択したい場合は、「Shift」を押しながらクリックすることで、複数の制約を選択することが出来ます。

また、制約を使う時のポイントは以下の通りです。

• フレーム内のオブジェクトにしか適応することが出来ません。
• 他のフレーム内に入れ子にしたフレームに制約を適用することも出来ます。
• オブジェクトに水平および垂直の両方の制約を適用することが出来ます。
• 制約を使用して、スクロールプロトタイプでのオブジェクトの応答方法を定義することが出来ます。
• グループには制約を適用することはできません。 

2.水平方向の制約

水平方向の制約は、x軸に沿ってフレームのサイズを変更するときのオブジェクトの動作を定義することが出来ます。図4参照

• Leftは、フレームの左側に対するオブジェクトの位置を維持します。
• Rightは、フレームの右側に対するオブジェクトの位置を維持します。
• Left+Rightは、フレームの両側に対するオブジェクトのサイズと位置を維持します。
• Centerは、フレームの水平中心に対するオブジェクトの位置を維持します。
• スケールは、オブジェクトのサイズと位置を親フレームに対して比率を維持します。

3.垂直方向の制約

垂直方向の制約は、y軸に沿ってフレームのサイズを変更するときのオブジェクトの動作を定義することが出来ます。

• Topは、フレームの上部に対するオブジェクトの位置を維持します。
• Bottomは、フレームの下部に対するオブジェクトの位置を維持します。
• Top+Bottomは、フレームの上下に対するオブジェクトのサイズと位置を維持します。
• Centerは、フレームの垂直中心に対するオブジェクトの位置を維持します。
• スケールは、オブジェクトのサイズと位置を親フレームに対して比率を維持します。

4.制約を無視する

ショートカットキー　制約無視(Command)

制約を適用せずに、オブジェクトのサイズを変更を行うことが出来ます。

制約を無視するには、Commandキーを押しながらフレームのサイズを変更します。 
すると、オブジェクトのConstraintsを無視し、オブジェクトをスケーリングすることが出来ます。