IOS开发-VFL语言

Visual Format Language，翻译过来时可视化格式语言，是苹果公司用来简化Autolayout代码量的语言。

实例：

（1）H:[(redView(72))]-12-[blueView(50)]

首字母表示水平方向，意思是有一个redview宽度72，距离这个redview右边12个点的距离有一个宽度为50的blueview。

（2）H:[redView(>[email protected])]

redview的宽度大于等于60，优先级最大宽度是700（优先级最大值为1000，所以先满足700）

（3）V:[redView][blueView(==redView)]

redview在垂直方向上的下方紧接着一个blueview，其高度跟redview一致。

（4）H:|-10-[redview]-[blueView]-[yellowView(>=20)]-|

首尾两条竖线表示的是父控件的边缘，水平方向上redView距离父控件左边默认10个点的间隔，redview右边是blueView默认间隔，yellowView高度大于等于20距离在blueView的右边默认间隔。

应用例子：

CGFloat margin = 10;
    //添加水平方向约束
    NSString *vfl = @"H:|-margin-[buleView]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(buleView);
    NSDictionary *metrics = @{@"margin":@(margin)};
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];
    [self.view addConstraints:constraints];
    //添加竖直方向约束
    NSString *vfl2 = @"V:|-64-[buleView(50)]";
    NSDictionary *views2 = NSDictionaryOfVariableBindings(buleView);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:nil views:views2];
    [self.view addConstraints:constraints2];

代码如下：

    UIView *buleView = [[UIView alloc]init];
    buleView.translatesAutoresizingMaskIntoConstraints = NO;
    [buleView setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:buleView];

    UIView *redView = [[UIView alloc]init];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [redView setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:redView];

    CGFloat margin = 10;
    //添加水平方向约束
    NSString *vfl = @"H:|-margin-[buleView]-margin-[redView(==buleView)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(buleView,redView);
    NSDictionary *metrics = @{@"margin":@(margin)};
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];
    [self.view addConstraints:constraints];
    //添加竖直方向约束
    CGFloat height = 40;
    NSString *vfl2 = @"V:[buleView(height)]-margin-|";
    NSDictionary *views2 = NSDictionaryOfVariableBindings(buleView);
    NSDictionary *metrics2 =  @{@"margin":@(margin),@"height":@(height)};
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:metrics2 views:views2];
    [self.view addConstraints:constraints2];
    //添加还剩余的约束
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:buleView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    [self.view addConstraint:topConstraint];

    NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:buleView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:bottomConstraint];

为什么文中还是用了非vfl得语言，因为有些约束是不能通过vfl来表达的。这个苹果官方也有表明。但在文中可以在option那里填入NSLayoutFormatAlignAllTop|NSLayoutFormatAlignAllBottom，就能达到那个效果，就可以不用添加NSLayoutConstraint了。