VFL的简单使用教程

因为工作原因，需要用到VFL，所以在放假期间不得不研究一下VFL的使用，很多地方仍然不熟悉，在次记录下使用方法。

VFL基本语法介绍

功能　　　　　　　　表达式

水平方向 　　　　　　 H:

垂直方向 　　　　　　 V:

Views　　　　　　　　 [view]

SuperView　　　　　　|

关系　　　　　　　　　>=,==,<=

空间,间隙(默认值8)　　 -

优先级　　　　　　　　@value

举例示范

语法示例	图片展示	语法介绍
H:[button]-[textField]	standard Space	设置视图间距
H:[button(>=50)]	Width Constraint	设置宽度大于等于50
H:-50-[purpleBox]-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];