通过代码实现约束 NSLayoutConstraint + VFL添加约束

 //1.禁止auturezing
//    self.view.translatesAutoresizingMaskIntoConstraints = NO;
   
//    2.添加两个视图到父试图上
//    2.1 添加蓝色View
    UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
   
   
    //    2.2 添加红色View
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
   
//    3.添加约束
//    3.1 添加蓝色View到父试图左边的距离固定为20
    /*
     1.Item = fist item  需要设置约束的空间
     2.attribute == 等于需要设置的属性
     3.relatedBy == relation 等于
     4.toItem == second item   被参照的空间
     5.attribute == 需要设置的约束
     6.multiplier == multiplier  乘于多少
     7.constant== constant   加上多少
    
     */
    NSLayoutConstraint *lefeCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:lefeCos];
   
    //    3.2 添加蓝色View到父试图右边的距离固定为20
      NSLayoutConstraint *rightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight  relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:rightCos];
   
    //    3.3 添加蓝色View到父试图顶部的距离固定为20
   
      NSLayoutConstraint *TopCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:TopCos];
    //    3.4 添加蓝色View的高度为50
   
        NSLayoutConstraint *heightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50];
    [blueView addConstraint:heightCos];

   

//    4.设置红色的约束
//    红色的高度和蓝色的一样  高度
   
    NSLayoutConstraint *redheightCos = [NSLayoutConstraint constraintWithItem:redView  attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
    [self.view addConstraint:redheightCos];
//    红色的右边和蓝色的右边对其  X
   
    NSLayoutConstraint *rightRedCos = [NSLayoutConstraint constraintWithItem:redView  attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
    [self.view addConstraint:rightRedCos];
   
   
//   红色顶部和蓝色的底部固定  Y
    NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView  attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
    [self.view addConstraint:redTopCos];
   
   
//    设置红色的宽度是蓝色的一半
   
    NSLayoutConstraint *wideRedCos = [NSLayoutConstraint constraintWithItem:redView  attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

    [self.view addConstraint:wideRedCos];

 

 

 

 

 

=================================================

VFL添加约束

nH:[cancelButton(72)]-12-[acceptButton(50)]

pcanelButton宽72，acceptButton宽50，它们之间间距12

n

nH:[wideView(>=60@700)]

pwideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

n

nV:[redBox]-[yellowBox(==redBox)]

p竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

n

nH:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

p水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

 

 //1.禁止auturezing
    //    self.view.translatesAutoresizingMaskIntoConstraints = NO;
   
    //    2.添加两个视图到父试图上
    //    2.1 添加蓝色View
    UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
   
   
    //    2.2 添加红色View
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
   
//    3.添加约束
    /*
     1.lFormat 存放VFL语句
     2.options 对齐方法
     3.metrics VFL 中用到变量
      4.views VFL 语句中用到得控件
     */
    //设置蓝色View左边和右边有20 的间距  X  宽
    NSArray *blueViewH  = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}];
   
    [self.view addConstraints:blueViewH];
   
    //设置蓝色View距离顶部20的间距，并且高度等于50 y 和 宽
        // 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度
    // 并且设置红色和蓝色右对齐
   

    NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
    [self.view addConstraints:blueViewV];
   
    // 注意: 在VFL语句中, 是不支持乘除法
    //    NSArray *redVeiwH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView )]" options:0 metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
    //    [self.view addConstraints:redVeiwH];
   
    NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

    [self.view addConstraint:redVeiwW];