視覚書式言語
この付録では、自動レイアウトの視覚書式言語を使用して、標準の間隔と寸法、垂直レイアウト、そして優先順位の異なる制約など、一般的な制約を指定する方法を示します。さらに、この付録には完全な言語の文法が含まれています。
視覚書式構文
以下は、視覚書式を使用して指定できる制約の例です。テキストが視覚的にどのように画像と一致するかに注意してください。
標準の間隔
[button]-[textField]
幅の制約
[button(>=50)]
Superview への接続
|-50-[purpleBox]-50-|
垂直のレイアウト
V:[topField]-10-[bottomField]
同じ高さのビュー
[maroonView][blueView]
優先度
[button(100@20)]
等しい幅
[button1(==button2)]
複数の述語 (Multiple Predicates)
[flexibleButton(>=70,<=100)]
レイアウトの完全な行
|-[find]-[findNext]-[findField(>=20)]-|
表記は、表現可能性の完全性よりも良い視覚化を好みます。実際のユーザインターフェイスで役立つ制約のほとんどは、視覚形式の構文を使用して表現できますが、できないものもいくつかあります。表現できない便利な制約の 1 つは、固定 アスペクト比です (たとえば、imageView.width = 2 * imageView.height)。このような制約を作成するには、 constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant: を使用しなければなりません。
視覚書式文字列文法
視覚書式文字列の文法は以下のように定義されています (リテラルは code font; で示されています。e は空の文字列を示します)。
| シンボル | 置き換えルール |
| <visualFormatString> | (<orientation>:)? (<superview><connection>)? <view>(<connection><view>)* (<connection><superview>)? |
| <orientation> | H|V |
| <superview> | | |
| <view> | [<viewName>(<predicateListWithParens>)?] |
| <connection> | e|-<predicateList>-|- |
| <predicateList> | <simplePredicate>|<predicateListWithParens> |
| <simplePredicate> | <metricName>|<positiveNumber> |
| <predicateListWithParens> | (<predicate>(,<predicate>)*) |
| <predicate> | (<relation>)?(<objectOfPredicate>)(@<priority>)? |
| <relation> | ==|<=|>= |
| <objectOfPredicate> | <constant>|<viewName> (see note) |
| <priority> | <metricName>|<number> |
| <constant> | <metricName>|<number> |
| <viewName> | C の識別子として解析されます。これは、渡された views の辞書の NSView のインスタンスへのキーマッピングでなければなりません。 |
| <metricName> | C の識別子として解析されます。これは、渡された metrics の辞書の NSView のインスタンスへのキーマッピングでなければなりません。 |
| <number> | C のロケールで、strtod_l によって解析されます。 |
objectOfPredicate を生み出す場合、述語 (predicate) の主語がビューの幅または高さである場合にのみ、viewName を使用できます。つまり、[view1(== view2)] を使用して、view1 と view2 が同じ幅になるように指定できます。
構文を間違えると、診断メッセージとともに例外が throw されます。例えば：
1 Expected ':' after 'V' to specify vertical arrangement 2 V|[backgroundBox]| 3 ^ 4 5 A predicate on a view's thickness must end with ')' and the view must end with ']' 6 |[whiteBox1][blackBox4(blackWidth][redBox]| 7 ^ 8 9 Unable to find view with name blackBox 10 |[whiteBox2][blackBox] 11 ^ 12 13 Unknown relation. Must be ==, >=, or <= 14 V:|[blackBox4(>30)]| 15 ^
前：制約の変更