VFL语言
介绍：
![]()
![复制代码]()
![复制代码]()
![复制代码]()
![复制代码]()
![]()
![]()
![]()
![]()
![复制代码]()
![复制代码]()
![复制代码]()
![复制代码]()
![复制代码]()
![复制代码]()
![复制代码]()
![复制代码]()
什么是VFL语言？
VFL全称是Visual Format Language，翻译过来是“可视化格式语言”
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
VFL示例：
H:[cancelButton(72)]-12-[acceptButton(50)]
cancelButton宽72，acceptButton宽50，它们之间间距12
H:[wideView(>=60@700)]
wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
V:[redBox]-[yellowBox(==redBox)]
竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）
VFL的使用：
使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
format ：VFL语句
opts ：约束类型
metrics ：VFL语句中用到的具体数值
views ：VFL语句中用到的控件
创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义
NSDictionaryOfVariableBindings(...)
具体实例如下：
练习一：
在控制器view底部添加2个view，1个蓝色，1个红色
2个view宽度、高度永远相等
距离父控件左边、右边、下边间距和2个view之间的间距相等
在ViewController.m文件的-(void)viewDidLoad{........}方法中代码如下：
//创建两个视图view1和view2,view1为蓝色，view2为红色
//创建view1 UIView *view1 = [[UIView alloc]init]; view1.backgroundColor = [UIColor blueColor]; view1.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:view1]; //创建view2 UIView *view2 = [[UIView alloc]init]; view2.backgroundColor = [UIColor redColor]; view2.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:view2];
//使用VFL语言生成view1、view2的约束
//使用VFL语言生成约束 NSDictionary *metrics = @{@"margin":@20,@"height":@200}; //NSDictionary *views = @{@"view1":view1,@"view2":view2}; //作用与下面的字典一样 NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
//获取view1、view2水平方向上的约束 NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[view1]-margin-[view2(==view1)]-margin-|" options:0 metrics:metrics views:views];
//获取view1竖直方向的约束 NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1(height)]-margin-|" options:0 metrics:metrics views:views];
//获取view2竖直方向上的约束 NSArray *conts3 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2(==view1)]-margin-|" options:0 metrics:metrics views:views];
//将生成的约束添加到它们的父视图中
//在父视图上添加VFL语言生成的约束 [self.view addConstraints:conts]; [self.view addConstraints:conts2]; [self.view addConstraints:conts3];
旋转屏幕的演示结果为：
练习二：
在控制器view顶部添加2个view，1个蓝色，1个红色
2个view高度永远相等
红色view和蓝色view右边对齐
蓝色view距离父控件左边、右边、上边间距相等
蓝色view距离红色view间距固定
红色view的左边和父控件的中点对齐
分析：虽然VFL语言简化了AutoLayout布局的代码量，但是它也有一个缺陷，那就是它无法生成视图与中心点处的约束，此时，需要再搭配AutoLayout的代码，才能完成这个需求。才上面的题可以看出，对view2需要使用
在ViewController.m文件的-(void)viewDidLoad{........}方法中代码如下：
创建视图view1和view2
//创建view1 UIView *view1 = [[UIView alloc]init]; view1.backgroundColor = [UIColor blueColor]; view1.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:view1]; //创建view2 UIView *view2 = [[UIView alloc]init]; view2.backgroundColor = [UIColor redColor]; view2.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:view2];
使用VFL语言生成view1水平方向的约束、view1和view2竖直方向的约束
//使用VFL语言生成view1的约束 NSDictionary *metrics = @{@"height":@100,@"margin":@20}; NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);
//获取水平方向上view1的约束 NSArray *constr = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[view1]-margin-|" options:0 metrics:metrics views:views]; //获取竖直方向上view1和view2的约束 NSArray *constr2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-margin-[view1(height)]-margin-[view2(==view1)]" options:0 metrics:metrics views:views];
使用Autolayout创建view2的约束
#pargma mark -使用Autolayout给view2创建约束
//创建view2右边与父视图右边的约束 NSLayoutConstraint *lcRight = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20];
//创建view2左边与父视图中心处的约束 NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
添加约束
//将AutoLayout创建的约束添加到父视图中 [self.view addConstraints:@[lcRight,constraint]]; //将VFL生成的约束添加到父视图中 [self.view addConstraints:constr]; [self.view addConstraints:constr2];
旋转屏幕的演示结果如下：
