（八十八）VFL语言初步 - 实现布局

【基本的语法】

VFL的语法为H:和V:开头。代表水平和垂直。

接下来假设要涉及距离。使用|-x-，x为距离的点数。

对于视图。用[ ]包围，比如[blueView]。

①以下的语句实现了blueView水平方向左右各距离控制器的边缘20点：

H:|-20-[blueView]-20|

②假设要指定宽高，在视图名称之后用圆括号内填入常量数值，以下的代码实现了blueView距离左边20点，宽度固定为120点：

H:|-20-[blueView(20)]

③假设要指定相等关系，比如redView的宽度和blueView相等，则在开头为H:的条件下写[redView(==blueView)]。

④假设出现乘除计算，不能使用VFL，这时候应该使用NSLayoutConstraint的constraintWithItem:::::方法，计算公式为firstItem.x ＝ (secondItem.x + constant) * multiplier，x为attribute指定的计算量。注意这个约束应该被加入到他们公共的父节点上。

【实现方法】

使用constraintsWithVisualFormat::::方法：

/**
     Format: VFL语句
     options：对齐方式
     metrics：VFL用到的变量
     views：VFL用到的视图
*/
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

①假设不须要对齐，options填入0。

②views为在VFL中相应实际View的根据，比如@{@"redView":self.redView}，当VFL中出现redView时。系统会通过views字典查找到self.redView，从而实现改动self.redView的尺寸。

③metrics为VFL中使用的变量。对于多次出现的值。能够用一个变量取代，然后在metrics中指定变量的值。

【实例】

以下的代码实现了blueView距离控制器View边缘左、中、右各20点，redView在blueView下20点，右对齐。宽度为blueView的一半。

须要注意的是禁用AutoResizing。

- (void)viewDidLoad {
    
    [super viewDidLoad];

    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    NSArray *blueViewHori = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}];
    [self.view addConstraints:blueViewHori];
    NSArray *blueRedVerti = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
    [self.view addConstraints:blueRedVerti];
    
    NSLayoutConstraint *redViewWidthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redViewWidthConstraint];
    
    
}