Autolayout之可视化语言（Visual Format Language）

注：本文翻译自Visual Format Language

这篇附录阐述了如何使用Auto Layout可视化语言来设定普通约束，包括标准间距、尺寸、垂直布局和带有不同优先级的约束等。此外，本附录还包含了一个完整的语法说明。

可视化句法

以下是一些通过可视化格式指定的约束示例。请注意其中文字是如何匹配示意图的。

• 标准间距

[button]-[textField]

img

• 宽度约束

[button(>=50)]

img

• 连接到父视图

|-50-[purpleBox]-50-|

img

• 垂直布局

V:[topField]-10-[bottomField]

img

• 对齐的视图

[maroonView][blueView]

img

• 优先级

[button(100@20)] // 这里优先级为20

img

• 等宽

[button1(==button2)]

img

• 多项描述

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

img

• 完整的一行布局

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

img

这种表示法通过完整的表达式提高了可读性。大多数的可用约束都可以通过可视化格式句法在用户界面中表示出来，但是还是有一些不可以。一种不能表示的约束即指定的宽高比（例如，imageView.width = 2 * imageView.height）。要创建这个约束，你必须使用constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:方法。

可视化格式字符串语法

可视化格式字符串语法的定义如下（字面量使用代码字体表示，e代表空字符串）。

译者注：

• 表中的“?”代表修饰项为可选的，
• “*”代表前面的修饰项的个数是任意的
• “替换规则”中的每一项“<...>”可当做变量在“符号”中查找替换

符号	替换规则
<可视化格式字符串>	(<方向>:)?(<父视图><连接>)?<视图>(<连接><视图>)*(<连接><父视图>)?
<方向>	H 或 V
<父视图>	|
<视图>	[ <视图名>(<带括号的描述列表>)? ]
<连接>	e 或 -<描述列表>- 或 -
<描述列表>	<简单描述> 或 <带括号的描述列表>
<简单描述>	<度量名称> 或 <确定数字>
<带括号的描述列表>	( <描述>(,<描述>)* )
<描述>	(<关系>)?(<描述的对象>)(@<优先级>)?
<关系>	== 或 <= 或 >=
<描述的对象>	<常量值> 或 <视图名称> （见说明）
<优先级>	<度量名称> 或 <数字>
<常量值>	<度量名称> 或 <数字>
<视图名称>	解析为C语言符号。此对象必须是传入的视图字典中，一个UIView实例对应的key值。
<度量名称>	解析为C语言符号。此对象必须是传入的度量字典中，一个NSNumber实例对应的key值。
<数字>	通过strtod_l解析（注：解析成浮点数），使用C语言格式

说明

在描述的对象的生成方式中，只有当描述的对象是视图的宽或高时，视图名称才可以作为其中的一部分。也就是说，你可以使用 [view1(==view2)] 的方式来指定view1和view2拥有相同宽度。

如果你产生了句法错误，系统会抛出异常并带有诊断信息。例如：

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)]|