Auto Layout之创建布局约束

上篇文章给大家介绍了AutoLayout 的由来及OC中关于AutoLayout 的类。这篇文章将向大家介绍，在iOS 编程中如何使用Auto Layout 构建布局约束。

创建布局约束

创建布局约束的方式

在iOS 中使用Auto Layout构建布局约束的方式有三种：

• 用IB设计界面。IB可以生成帮助开发者快速布局你的约束，你可以在可视化编辑器中定制你的约束集合
• 为每一个视图提供一个约束，来构建NSLayoutConstraint类的实例对象

• 使用可视化格式语言（VFL）描述约束，进行UI布局

  对于以上三种创建布局约束的方式，作者在开发中经常用到是VFL。

创建布局约束的规则

无论是哪有一种方式创建布局约束，读者都应该明白哪些视图之间是可以创建约束的。

当约束引用两个视图的时候，这两个视图一定要属于同一视图层次结构。即：

1. 一个视图是另外一个视图的父视图
2. 两个视图是必须是兄弟视图

在Interface Builder上使用AutoLayout布局

对于厌烦手动编写代码的程序员来讲，在IB中使用来AutoLayout布局，无疑是喜闻乐见的。事实上，对于在IB中使用来AutoLayout布局效率也是极高，但是前提你要知道IB上的元素以及IB为开发者提供的组件。

鉴于在IB中使用来AutoLayout布局，无法用文字描述，作者很贴心的为各位读者录制了教学视频，大家可以观看。点击进入

VFL

对于为每一个视图提供一个约束，来构建NSLayoutConstraint类的实例对象，因而进行AutoLayout 布局的这种方式，无疑会让咱们代码会很长很长，这种方式在实际开发中并不适用。苹果官方的建议，相较于基于代码的方案，优先使用IB，其次使用VFL,最后考虑构建NSLayoutConstraint类的实例对象来为每个视图构建约束。

那么什么是VFL？

VFL介绍

可视化格式语言有一个描述视图布局的文本字符串组成。开发者只需要根据UI中视图出现的顺序依次列出它们，中间加上相应的符号。这些符号指定了视图间的间隔、不等量和优先级。事实上，可视化格式语言将我们的UI设计界面形象地表现为一个简短的字符串。

下面我们来看一个代码示例：

NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1]-20-[view2(==width)]" options:0 metrics:@{@"width":[NSNumber numberWithFloat:44]} views:NSDictionaryOfVariableBindings(view1,view2)];

上面一段代码就是向大家介绍如何使用VFL 构建约束。其中H:[view1]-20-[view2(==width)] 就是VFL。那么问题来了，这段火星文到底是什么意思呢？其实意思很简单：在水平方向，即x轴方向，view1和view2的间隔20个像素点，且view2的宽度等于width，其中width为44。

VFL语法结构

(<orientation>:)?(<superView><connection>)?<view>(<connection><view>)*(<connection><superView>)?

?代表可选项
*代表该项会出现0次或者多次

从上面的语法结构定义来看，三个字：看不懂！然而其实写起来灰常简单。

1. 方向orientation:VFL的开始是从一个可选方向开始的，可以是H:，代表水平方向；也可以是V:,代表垂直方向。如这样的一个语法格式：H:[view1]-30-[view2],表示在水平方向上，view1的右边距离view2的左边30个像素。又如这样的一个语法格式：V:[view1]-30-[view2],表示在垂直方向上，view1的下边距离view2的上边30个像素。如果不写H:或者V:，那么系统会默认为H:,但是作者并不建议这样做。

2. 视图名称：视图的名称被一对方括号包围，如:[view1]。当然view1不是随便取的，它需要和你控件对象的变量名要一样。
   

3. 链接符：-

解释到这里大家对VFL语法依然不是很懂。那么下面就列一个表格系统给大家解释.

类型 格式 示例 方向 H: V: H:表示水平方向 V:表示垂直方向 视图 [item] [view1] 父视图 | H:|-30-[view1]-30-| 表示view1的前后距离父视图的间距都为30 关系 == <= >= H:[view1]-(>=20)-[view2] 表示view2的前面距离view1的后面至少20个像素 固定的宽度 [item(width)] H:[view1(44)] 固定的高度 [item(height)] V:[view1(44)] 最大或最小宽度/高度 [item(<=size)] [item(>=size)] H:[view1(>=44)] V:[view1(>=44)] 与另一个视图匹配宽度或高度 [item1(==item2)] [item1(>=item2)] [item1(<=item2)] H:[view1(==view2)]表示view1和view2的宽度相等 V:[view1(==view2)]表示view1和View2的高度相等 优先级(0-100) @value H:[view1(<=50@20)] 表示view1的宽度不大于50像素，优先级为20

---

希望童鞋将这些语法点记在心里，后面将为大家讲解几个示例，来告诉大家如何使用VFL。敬请期待下篇博客！