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 = ;
    //添加水準方向限制
    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 = ;
    //添加水準方向限制
    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 = ;
    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: constant:];
    [self.view addConstraint:topConstraint];

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

為什麼文中還是用了非vfl得語言，因為有些限制是不能通過vfl來表達的。這個蘋果官方也有表明。但在文中可以在option那裡填入NSLayoutFormatAlignAllTop|NSLayoutFormatAlignAllBottom，就能達到那個效果，就可以不用添加NSLayoutConstraint了。