因为工作原因，需要用到VFL，所以在放假期间不得不研究一下VFL的使用，很多地方仍然不熟悉，在次记录下使用方法。
VFL基本语法介绍
功能 表达式
水平方向 H:
垂直方向 V:
Views [view]
SuperView |
关系 >=,==,<=
空间,间隙(默认值8) -
优先级 @value
举例示范
| 语法示例 | 图片展示 | 语法介绍 |
|---|---|---|
| H:[button]-[textField] |
standard Space
|
设置视图间距 |
| H:[button(>=50)] |
Width Constraint
|
设置宽度大于等于50 |
connectionToSuperView
|
距父视图左右边距50 | |
| V:[topField-10-[bottomField]] |
VerticalLayout
|
竖直方向设置间距 |
| H:[maroonView][blueView] |
|
对齐 |
| H:[button(@200)] |
|
设置优先级 |
| H:[button1(==button2)] |
|
等宽 |
| [flexibleButton(>=70,<=100)] |
|
多个谓语设置尺寸 |
第三句的语法，应为"H:|-50-[purpleBox]-50-|",因为与MarkDown表格语法冲突，所以无法显示"|",在此处更正下.
VFL API
NSLayoutConstraint
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
参数介绍：
format：此参数就是我们需要设置的VFL语句，如 "|H:-50-[purpleBox]-50-|"
options：枚举参数，默认写0，具体跟你你所实现的需求去选择你想要的枚举。
metrics：这里是一个字典，当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为width,那么这个参数去哪里找呢？就是在这个字典里面找到key对就的值，如果没有找到这个值，app就会crash.
views：顾名思义，这是传所有你在vfl中使用到的view，那在上面这句例子中的应该怎么传呢？结果是这样的：NSDictionaryOfVariableBindings(button).如果你使用到了多个view，就可以这样NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数format中的一一对应，缺一不可.
NSLayoutConstraint
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
参数介绍：
view1：需要添加约束的view
attr1：枚举，添加约束对应的属性，例如：NSLayoutAttributeLeft；
relation：枚举，添加约束与关联的view之间的关系，关系有 ==， >= ,<=
view2：添加约束需要关联的view
attr2：关联的view对应的属性
multiplier：与关联view对应属性的倍数关系
constraint：约束值
UIView API
UIView
- (void)addConstraints:(NSArray *)constraints;
在VFL的第一个API中返回值类型是NSArray,而现在这个方法的参数也刚好是一个NSArray类型。那么直接把上一个方法的返回值当作这个方法的参数就可以了。如果你有多个VFL，你也可以利用可变数组( NSMutableArray)把这多个VFL返回的数据拼在一起，然后再调用addConstraints:方法。
UIView
- (void)addConstraint:(NSLayoutConstraint *)constraint;
在VFL的第二个API中返回值类型是NSLayoutConstraint，现在这个方法的参数也是NSLayoutConstraint。那么直接把上一个方法的返回值当作这个方法的参数就可以了。
代码示例
现在我们有一个需求，页面中有一张图片和一段文字，我们需要图片距离父视图左边和上边各20，宽高固定为80，文字距图片下方20，父视图左边20，宽高根据文本内容变化。
如下图：
根据以上的需求，实现代码如下：
//初始化ImageView
UIImageView *imageView = [UIImageView new];
imageView.image = [UIImage imageNamed:@"2.jpg"];
imageView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:imageView];
//初始化Label
UILabel *label = [UILabel new];
label.translatesAutoresizingMaskIntoConstraints = NO;
label.text = @"这是一个优美的句子。";
[self.view addSubview:label];
//imageView的约束设置
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(imageView);
NSArray *imageViewHorizontalContriants = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[imageView(==80)]" options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:imageViewHorizontalContriants];
NSArray *imageViewVerticalContriants = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[imageView(==80)]" options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:imageViewVerticalContriants];
//label的约束设置
NSArray *labelHorizontalContraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[label]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(label)];
[self.view addConstraints:labelHorizontalContraints];
NSArray *labelVerticalContraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageView]-20-[label]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(imageView,label)];
[self.view addConstraints:labelVerticalContraints];
现在我们的需求改变一下，我们需要图片和文字居中对齐。
这样的话，我们可以把约束代码更新如下：
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(imageView);
NSArray *imageViewHorizontalContriants = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView(==80)]" options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:imageViewHorizontalContriants];
NSArray *imageViewVerticalContriants = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[imageView(==80)]" options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:imageViewVerticalContriants];
NSLayoutConstraint *imageViewConstraint = [NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
[self.view addConstraint:imageViewConstraint];
NSArray *labelVerticalContraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageView]-20-[label]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(imageView,label)];
[self.view addConstraints:labelVerticalContraints];
NSLayoutConstraint *labelConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
[self.view addConstraint:labelConstraint];
下面把需求难度提升一下，我们需要文字可以自动换行，而且距父视图大于等于10。
添加label的约束代码如下：
label.numberOfLines = 0;
NSArray *labelHorizantalContraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|->=10-[label]->=10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(label)];
[self.view addConstraints:labelHorizantalContraints];