【转】使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

原文：http://www.cocoachina.com/ios/20141209/10549.html

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。

一：API介绍

NSLayoutConstraint API

1 NSLayoutConstraint constraintsWithVisualFormat: options:0 metrics:nil views:NSDictionaryOfVariableBindings();

参数介绍:

format:此参数为你的vfl语句，比如:@"H:|-[button]-|"

opts:枚举参数，默认写0，具体跟据你所实现的需求去选择你想要的枚举

metrics: 这里是一个字典，当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为 width,那么这个参数去哪里找呢？就是在这个字典里面找到key对就的值，如果没有找到这个值，app就会crash.

views:顾名思义，这是传所有你在vfl中使用到的view，那在上面这句例子中的应该怎么传呢？结果是这样的：NSDictionaryOfVariableBindings(button).如果你使用到了多个view，就可以这样 NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数 format中的一一对应，缺一不可.

2.UIView API

 - (void)addConstraints:(NSArray *)constraints;


在 上面1中返回值类型是NSArray,而现在这个方法的参数也刚好是一个NSArray类型。那么直接把上一个方法的返回值当作这个方法的参数就可以了。 如果你有多个VFL，你也可以利用可变数组( NSMutableArray)把这多个VFL返回的数据拼在一起，然后再调用addConstraints:方法。

二：简单的使用

1.单控件的使用(没有与其他控制有关联，比如空隙等)

新建一个单页面项目Single View Application）,在项目里面加上下面这段代码代码

 1 #import "ViewController.h"
 2 @interface ViewController ()
 3  
 4 @end
 5  
 6 @implementation ViewController
 7  
 8 - (void)viewDidLoad {
 9     [super viewDidLoad];
10     UIButton *button=[[UIButton alloc]init];
11     [button setTitle:@"点击一下" forState:UIControlStateNormal];
12     button.translatesAutoresizingMaskIntoConstraints=NO;
13     [button setBackgroundColor:[UIColor blackColor]];
14     [self.view addSubview:button];
15     NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|"
16 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0
17 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
18 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];
19      
20     NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]"
21 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0
22 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
23 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];
24      
25     [self.view addConstraints:constraints1];
26     [self.view addConstraints:constraints2];
27     
28      
29 }
30  
31 @end



运行程序，效果图如下：

可以看到，我们新建的button已经出来，证明上面的自动布局语句（VFL）已经生效。那么我们来详细看看这些语句的意义是什么。

1 NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|"
2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0
3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];


这 里的意思是：button在水平方向上距离它的superView，左右各20px，比如在这里他的大小就是320-20*2=280.在@"H:|- [button]-|"这个语句中，其中"H:"是表示这是水平方向上的约束，"|"是表示superView，"-"表示一个间隔空间，这个间隔如果是 如superView之间的，那么就是20px,如果是两个同级别的view，比如@"[button]-[button1]"，那么这里表示的是 8px.

1 NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]"
2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0
3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];

跟上面有点不同,@"V:|-20-[button(==30)]",其中"V:"中代表这是垂直方向上的约束,"|-20-"这里的意思就是距离头部为 20px，相当于y坐标为20。后面的"[button(==30)]"，是指定这个button的高度为30px.y坐标固定了，高度固定了，那这个 view的约束就完成了。如果你有需要，你的高度值（或者其他同类型的）可以使用>=,==,<=来表示，甚至你可以组合来用，像上面的 30，你可以指定一个区别，比如:(>=30,<=40)，这同样也是可以的。如果你想表达他的优先级别,可以使用@"V:|-20- [button(==30@1000)]",这个@1000，就是他的级别了。你可以适配XIB或者SB对它的优先级做更多的处理.

PS:值得注意的是,在用代码创建的UIView在，一定要加上下面这句代码

button.translatesAutoresizeingMaskIntoConstraints = NO；

如果没有上面这一行，你的约束将不生效,控制台会输出一连串的错误.

2:多控件之间关联使用

基于上面的代码上，我们重新加了一段代码，现在的全部代码如下:

 1 #import "ViewController.h"
 2 @interface ViewController ()
 3  
 4 @end
 5  
 6 @implementation ViewController
 7  
 8 - (void)viewDidLoad {
 9     [super viewDidLoad];
10     UIButton *button=[[UIButton alloc]init];
11     [button setTitle:@"点击一下" forState:UIControlStateNormal];
12     button.translatesAutoresizingMaskIntoConstraints=NO;
13     [button setBackgroundColor:[UIColor blackColor]];
14     [self.view addSubview:button];
15     NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|"
16 　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0
17 　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
18  　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];
19      
20     NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]"
21 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0
22 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
23 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button)];
24      
25     [self.view addConstraints:constraints1];
26     [self.view addConstraints:constraints2];
27      
28      
29     UIButton *button1=[[UIButton alloc]init];
30     button1.translatesAutoresizingMaskIntoConstraints=NO;
31     [button1 setTitle:@"请不要点击我" forState:UIControlStateNormal];
32     [button1 setBackgroundColor:[UIColor redColor]];
33     [self.view addSubview:button1];
34      
35     NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|"
36 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 options:0
37 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
38 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1)];
39      
40     NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]"
41 　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0
42 　　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
43 　　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];
44      
45     [self.view addConstraints:constraints3];
46     [self.view addConstraints:constraints4];
47      
48 }



运行的效果图如下:

通过代码对比，可以看出，在button1的垂直方向约束上，我们做了一点改变。水平方向上跟button一样，这里就不多作解释。我们来看看垂直方向上的。

1 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]"
2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0
3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

VFL 语句为：@"V:[button]-[button1(==30)]"，这里用到了两个view在VFL语句里面。刚才我们也说到，"-"在同一级别的 View上使用的时候表示的间距为8个像素点,整一句的意思就是button1的y坐标离button有8个像素点.在不使用auto layout的时候，可以这样表达CGRectGetMaxY(button.frame)+8.

我再改一下上面这一句VFL

1 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==height)]"
2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0
3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:@{@"height":@30}
4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

再次运行，你会发现，效果是一样的。这样你就知道怎么动态去给view加上高度或者宽度，或是其他间距了吧？

那么，如何做到两个View，或是多个View之间等高，或者等宽呢？能用VFL可以做到吗？除了通过上面的直接赋值宽高的数值外，VFL还提供了另外一种写法用于等宽等高上。

还是上面的Demo，我们改一下代码

1 NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1(button)]"
2 　　　　　　　　　　　　　　　　　　　　　　　　　options:0
3 　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
4 　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];
5      
6     NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(button)]"
7 　　　　　　　　　　　　　　　　　　　　　　　　　　　options:0
8 　　　　　　　　　　　　　　　　　　　　　　　　　　　metrics:nil
9 　　　　　　　　　　　　　　　　　　　　　　　　　　　views:NSDictionaryOfVariableBindings(button1,button)];

通过@"H:|-[button1(button)]"，@"V:[button]-[button1(button)]"，这两句就可以轻松实现等宽等高了！

三：最后对格式的字符串作一个总结介绍

功能　　　　　　　　表达式

水平方向　　　　　　 H:

垂直方向　　　　　　 V:

Views　　　　　　　　 [view]

SuperView　　　　　　|

关系　　　　　　　　　>=,==,<=

空间,间隙　　　　　　　-

优先级　　　　　　　　@value

关于constraintsWithVisualFormat：函数介绍：

constraintsWithVisualFormat:参数为NSString型，指定Contsraint的属性，是垂直方向的限定还是水平方向的限定，参数定义一般如下：

V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离

若是要定义水平方向，则将V：改成H：即可

在接着后面-[]中括号里面对当前的View/控件的高度/宽度进行设定；

options：字典类型的值；这里的值一般在系统定义的一个enum里面选取

metrics：nil；一般为nil ，参数类型为NSDictionary，从外部传入 //衡量标准

views：就是上面所加入到NSDictionary中的绑定的View

在这里要注意的是 AddConstraints 和 AddConstraint 之间的区别，一个添加的参数是NSArray，一个是NSLayoutConstraint

使用规则

|: 表示父视图

-:表示距离

V: :表示垂直

H: :表示水平

>= :表示视图间距、宽度和高度必须大于或等于某个值

<= :表示视图间距、宽度和高度必须小宇或等于某个值

== :表示视图间距、宽度或者高度必须等于某个值

@ :>=、<=、== 限制最大为 1000

1.|-[view]-|: 视图处在父视图的左右边缘内

2.|-[view] : 视图处在父视图的左边缘

3.|[view] : 视图和父视图左边对齐

4.-[view]- : 设置视图的宽度高度

5.|-30.0-[view]-30.0-|: 表示离父视图左右间距 30

6.[view(200.0)] : 表示视图宽度为 200.0

7.|-[view(view1)]-[view1]-| :表示视图宽度一样，并且在父视图左右边缘内

8. V:|-[view(50.0)] : 视图高度为 50

9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离

为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。

10: [wideView(>=60@700)] :视图的宽度为至少为60 不能超过 700

11: 如果没有声明方向默认为水平 V:

希望对各位读者有所帮助，如果不妥的地方还望指出.