免費(fèi)AI編程助手
[譯]AutoLayout中的Visual Format Language
前言
今天使用Swift手寫AutoLayout時(shí)發(fā)現(xiàn)OC中的constraintWithItem方法竟然不翼而飛（后來發(fā)現(xiàn)其實(shí)是變成了init），只有原來的constraintsWithVisualFormat方法還健在，因?yàn)橹皼]有用過這個(gè)方法，所以就Google了下，然后就發(fā)現(xiàn)了一個(gè)神奇的東西：Visual Format Language，繼續(xù)Google發(fā)現(xiàn)有不少博客講了這個(gè)，但是看得不是很明白，忍不住打開官方文檔，發(fā)現(xiàn)它靜靜地躺在AutoLayout的附錄A中，看了一遍發(fā)現(xiàn)某些情況下真的是非常方便，而且看起來也蠻清晰。所以就把官方文檔翻譯了下，希望對(duì)大家有所幫助。
正文
Visual Format語言
該附錄告訴你如何使用AutoLayout中的Visual Format Language來添加約束，包括標(biāo)準(zhǔn)間距和尺寸，豎向布局，以及不同優(yōu)先級(jí)下的約束。另外，該附錄包含了完整的語法。
Visual Format語法
下面是使用Visual Format添加約束的一些例子。
標(biāo)準(zhǔn)間距
[button]-[textField]
寬度約束
[button(>=50)]
和父view做約束
|-50-[purpleBox]-50-|
豎向布局
V:[topField]-10-[bottomField]
刷新視圖
[maroonView][blueView]
優(yōu)先級(jí)
[button(100@20)]
等寬
[button1(==button2)]
多條件
[flexibleButton(>=70,<=100)]
完整的行布局
|-[find]-[findNext]-[findField(>=20)]-|
和完整性相比，標(biāo)記法更傾向于良好的可視化。雖然大部分實(shí)用的用戶界面都可以用Visual Format語法來添加約束，但是仍然有一些不能。其中一個(gè)經(jīng)常用到的約束就是寬高比約束（比如，imageView.width = 2 * imageView.height）。如果要為它們添加約束，請(qǐng)使用constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:。
Visual Format字符串語法
Visual Format字符串語法的定義如下（文本以代碼字體顯示；e代表空字符串）
| 符號(hào) | 替代規(guī)則（意思就是第一列這個(gè)符號(hào)可以用后面的串來表示） |
|---|---|
| <visualFormatString> | (<orientation<:)?<br/>(<superview><connection>)?<br/><view>(<connection><view>)*<br/>(<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> (查看注意事項(xiàng)) |
| <priority> | <metricName>|<number> |
| <constant> | <metricName>|<number> |
| <viewName> | 解析為一個(gè)C標(biāo)識(shí)符。<br/>通過入?yún)?code>views傳入，入?yún)?code>views是key為NSString類型，value為NSView類型的一個(gè)字典，通過viewName這個(gè)key可以取到對(duì)應(yīng)的NSView類型實(shí)例 |
| <metricName> | 解析為一個(gè)C標(biāo)識(shí)符。<br/>通過入?yún)?code>metrics傳入，入?yún)?code>metrics是key為NSString類型，value為NSNumber類型的一個(gè)字典，通過metricName這個(gè)key可以取到對(duì)應(yīng)的NSNumber類型實(shí)例 |
| <number> | C語言中可以用strtod_l解析的串，其實(shí)就是數(shù)字 |
注意：對(duì)于
objectOfPredicate，只有在謂語的主語是一個(gè)view的寬度或者長度時(shí)，這個(gè)約束在viewName上才會(huì)生效。也就是說，你可以使用[view1(==view2)]來指定view1和view2的寬度一致。
如果語法有誤，會(huì)拋出一個(gè)帶診斷信息的異常，例如：
Expected ':' after 'V' to specify vertical arrangement
V|[backgroundBox]|
^
A predicate on a view's thickness must end with ')' and the view must end with ']'
|[whiteBox1][blackBox4(blackWidth][redBox]|
^
Unable to find view with name blackBox
|[whiteBox2][blackBox]
^
Unknown relation. Must be ==, >=, or <=
V:|[blackBox4(>30)]|
更多建議：