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​

​。那么问题来了，这段火星文究竟是什么意思呢？其实意思非常easy：在水平方向。即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