VFL語(yǔ)言

什么是VFL語(yǔ)言
VFL全稱是Visual Format Language，翻譯過來(lái)是“可視化格式語(yǔ)言”
VFL是蘋果公司為了簡(jiǎn)化Autolayout的編碼而推出的抽象語(yǔ)言

VFL的使用

使用VFL來(lái)創(chuàng)建約束數(shù)組
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
format ：VFL語(yǔ)句
opts ：約束類型
metrics ：VFL語(yǔ)句中用到的具體數(shù)值
views ：VFL語(yǔ)句中用到的控件

創(chuàng)建一個(gè)字典（內(nèi)部包含VFL語(yǔ)句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)

VFL示例

H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton寬72，acceptButton寬50，它們之間間距12

H:[wideView(>=60@700)]
wideView寬度大于等于60point，該約束條件優(yōu)先級(jí)為700（優(yōu)先級(jí)最大值為1000，優(yōu)先級(jí)越高的約束越先被滿足）

V:[redBox][yellowBox(==redBox)]
豎直方向上，先有一個(gè)redBox，其下方緊接一個(gè)高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上，F(xiàn)ind距離父view左邊緣默認(rèn)間隔寬度，之后是FindNext距離Find間隔默認(rèn)寬度；再之后是寬度不小于20的FindField，它和FindNext以及父view右邊緣的間距都是默認(rèn)寬度。（豎線“|” 表示superview的邊緣）

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要將AutoresizingMask轉(zhuǎn)為Autolayout的約束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 不要將AutoresizingMask轉(zhuǎn)為Autolayout的約束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 間距
    NSNumber *margin = @20;
    
    // 添加水平方向的約束
    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加豎直方向的間距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:[blueView(height)]-margin-|";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];
    
    // 添加紅色剩余的約束
//    NSLayoutConstraint *redContraint1 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
//    NSLayoutConstraint *redContraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
//    [self.view addConstraint:redContraint1];
//    [self.view addConstraint:redContraint2];
}

- (void)test2
{
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要將AutoresizingMask轉(zhuǎn)為Autolayout的約束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    // 間距
    NSNumber *margin = @20;
    
    // 添加水平方向的約束
    NSString *vfl = @"H:|-margin-[blueView]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView);
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加豎直方向的間距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:|-margin-[blueView(height)]";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];
}

- (void)test1
{
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要將AutoresizingMask轉(zhuǎn)為Autolayout的約束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    // 添加水平方向的約束
    NSString *vfl = @"H:|-20-[abc]-20-|";
    NSDictionary *views = @{@"abc" : blueView};
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:views];
    [self.view addConstraints:constraints];
    
    // 添加豎直方向的間距
    NSString *vfl2 = @"V:|-20-[abc(40)]";
    NSDictionary *views2 = @{@"abc" : blueView};
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:nil views:views2];
    [self.view addConstraints:constraints2];
}
@end