視覚書式言語


この付録では、自動レイアウトの視覚書式言語を使用して、標準の間隔と寸法、垂直レイアウト、そして優先順位の異なる制約など、一般的な制約を指定する方法を示します。さらに、この付録には完全な言語の文法が含まれています。


視覚書式構文


以下は、視覚書式を使用して指定できる制約の例です。テキストが視覚的にどのように画像と一致するかに注意してください。


標準の間隔

[button]-[textField]



standardSpace



幅の制約

[button(>=50)]



widthConstraint



Superview への接続

|-50-[purpleBox]-50-|



connectionToSuperview



垂直のレイアウト

V:[topField]-10-[bottomField]



verticalLayout



同じ高さのビュー

[maroonView][blueView]



flushViews



優先度

[button(100@20)]



priority



等しい幅

[button1(==button2)]



equalWidths



複数の述語 (Multiple Predicates)

[flexibleButton(>=70,<=100)]



multiplePredicates



レイアウトの完全な行

|-[find]-[findNext]-[findField(>=20)]-|



completeLayout



表記は、表現可能性の完全性よりも良い視覚化を好みます。実際のユーザインターフェイスで役立つ制約のほとんどは、視覚形式の構文を使用して表現できますが、できないものもいくつかあります。表現できない便利な制約の 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)] を使用して、view1view2 が同じ幅になるように指定できます。




構文を間違えると、診断メッセージとともに例外が 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                   		   ^


前:制約の変更


































目次
Xcode の新機能

  • 始めましょう

  • 自動レイアウトガイド全メニュー

  • 自動レイアウトレシピ集

  • 自動レイアウトのデバッグ

  • 高度な自動レイアウト

  • 付録
  • 視覚書式言語
  • 視覚書式構文
    視覚書式文字列文法

  • 改訂記録











  • トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ









    トップへ