iOS：VFL语言

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":@,@"height":@};

    //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: metrics:metrics views:views];

    //获取view1竖直方向的约束
    NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1(height)]-margin-|" options: metrics:metrics views:views];

    //获取view2竖直方向上的约束
    NSArray *conts3 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2(==view1)]-margin-|" options: 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":@,@"margin":@};
    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);

    //获取水平方向上view1的约束
    NSArray *constr = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[view1]-margin-|" options: metrics:metrics views:views];

    //获取竖直方向上view1和view2的约束
    NSArray *constr2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-margin-[view1(height)]-margin-[view2(==view1)]" options: 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:-];
    //创建view2左边与父视图中心处的约束
    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:];

添加约束

    //将AutoLayout创建的约束添加到父视图中
    [self.view addConstraints:@[lcRight,constraint]];

    //将VFL生成的约束添加到父视图中
    [self.view addConstraints:constr];
    [self.view addConstraints:constr2];

旋转屏幕的演示结果如下：