Visual format language（1）

需求：添加一个控件，高度40，距离顶部，左边，右边 20

    // 1.创建控件
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 2.添加约束
    //水平方向约束
    NSString *vfl = @"H:|-20-[blueView]-20-|";
    NSDictionary *views = @{@"blueView" : blueView};
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:views];
    [self.view addConstraints:constraints];
    
    //垂直方向约束
    NSString *vfl2 = @"V:|-20-[blueView(40)]";
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:nil views:views];
    [self.view addConstraints:constraints2];

优化后的代码：

    // 1.创建控件
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    //间距
    NSNumber *margin = @20;
    
    // 2.添加约束
    //水平方向约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView);
    NSDictionary *metrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];
    [self.view addConstraints:constraints];
    
    //垂直方向约束
    NSNumber *height = @40;
    NSString *vfl2 = @"V:|-margin-[blueView(height)]";
    NSDictionary *metrics2 =NSDictionaryOfVariableBindings(margin,height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:metrics2 views:views];
    [self.view addConstraints:constraints2];