Autolayout

    // 1.添加控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;//关闭自动缩放子试图
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

    // 2.约束蓝色
    // 2.1.高度
    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40];//蓝色视图的高度等于 高度乘以1加上40
    [blueView addConstraint:blueHeight];
    // 2.2.左边
    CGFloat margin = 20;
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];//蓝色左边等于view的左边乘以1家加上20
    [self.view addConstraint:blueLeft];
    // 2.3.顶部
    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];//顶部顶部加上20
    [self.view addConstraint:blueTop];
    // 2.4.右边
    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];//右边等于右边-20
    [self.view addConstraint:blueRight];
    
    // 3.约束红色
    // 3.1.右边
    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];//红色蓝色右边
    [self.view addConstraint:redRight];
    
    // 3.2.高度
    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];//高度
    [self.view addConstraint:redHeight];
    
    // 3.3.顶部
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];//顶部
    [self.view addConstraint:redTop];
    
    // 3.4.宽度
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];//宽度
    [self.view addConstraint:redWidth];


    //+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;  。。。。。。。。。。。。。。。。视图1的属性，等于视图2的属性，乘以？加上？

    
    // 1.添加控件
    UIView *blueView1 = [[UIView alloc] init];
    blueView1.translatesAutoresizingMaskIntoConstraints = NO;
    blueView1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView1];
    
    // width == 100
    NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:blueView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];//宽度 100
    [blueView1 addConstraint:width];
    
    // height == 100
    NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:blueView1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];//高度 100
    [blueView1 addConstraint:height];
    
    // blueView的CenterX == self.view的CenterX * 1.0 + 0.0
    NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:blueView1 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];//中点等于view的中点x乘于1加上0
    [self.view addConstraint:centerX];//跟父控件有关的约束要加到父控件上面
    
    // blueView的CenterY == self.view的CenterY * 1.0 + 0.0
    NSLayoutConstraint *centerY = [NSLayoutConstraint constraintWithItem:blueView1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];// 中点等于view的中点y乘于1加上0
    [self.view addConstraint:centerY];
    
    //父约束子
    //1. 对于两个同层级view之间的约束关系，添加到它们的父view上
    //2. 对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
    //3. 对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

//    // 1.添加控件
//    UIView *blueView = [[UIView alloc] init];
//    blueView.backgroundColor = [UIColor blueColor];
//    blueView.translatesAutoresizingMaskIntoConstraints = NO;
//    [self.view addSubview:blueView];
//    
//    UIView *redView = [[UIView alloc] init];
//    redView.backgroundColor = [UIColor redColor];
//    redView.translatesAutoresizingMaskIntoConstraints = NO;
//    [self.view addSubview:redView];
//    
//    // 2.VFL生成约束
//    NSDictionary *mertrics = @{@"margin" : @20}; // 参数\数值
//    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);//变量捆绑
//    NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];//约束通过可视化的语言xxx;对其头部，对其底部，
//    
//    NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:@{@"blueHeight" : @40, @"margin" : @20} views:views];//约束
//    [self.view addConstraints:conts];
//    [self.view addConstraints:conts2];

    /*
     
     H:[cancelButton(72)]-12-[acceptButton(50)]
     canelButton宽72，acceptButton宽50，它们之间间距12
     
     H:[wideView(>=60@700)]
     wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
     
     V:[redBox]-[yellowBox(==redBox)]
     竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox
     
     H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
     水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）
     */
    
    /*
     使用VFL来创建约束数组
     + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
     format ：VFL语句
     opts ：约束类型
     metrics ：VFL语句中用到的具体数值
     views ：VFL语句中用到的控件
     
     创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义
     NSDictionaryOfVariableBindings(...)


     */
    
    // 1.添加控件
    UIView *blueView1 = [[UIView alloc] init];
    blueView1.backgroundColor = [UIColor blueColor];
    blueView1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView1];
    
    UIView *redView1 = [[UIView alloc] init];
    redView1.backgroundColor = [UIColor redColor];
    redView1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView1];
    
    // 2.VFL生成约束
    NSArray *conts_1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView1}];
    [self.view addConstraints:conts_1];
    
    NSArray *conts_2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(40)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView1, @"redView" : redView1}];
    [self.view addConstraints:conts_2];
    
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView1 attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:redWidth];