用Masonry约束思想进行XIB约束

用代码和XIB分别进行约束实现以下效果

//代码实现约束
    UIView *red = [UIView new];
    red.backgroundColor = [UIColor colorWithRed:1.000 green:0.400 blue:0.400 alpha:1.000];
    [self.view addSubview:red];
    [red mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo (@49);
        make.left.equalTo(@10);
        make.width.equalTo(@130);
        make.height.equalTo(@200);
        
    }];
    
    for (int i = 1; i < 4; i++) {
        UIView *green = [UIView new];
        green.backgroundColor =[UIColor colorWithRed:0.400 green:1.000 blue:0.400 alpha:1.000];
        [self.view addSubview:green];
        [green mas_makeConstraints:^(MASConstraintMaker *make) {
            
            make.top.mas_equalTo(63 * i);
            make.height.equalTo(@49);
            make.right.equalTo(@-10);
            make.left.equalTo(red.mas_right).offset(20);
            
        }];
        
        
    }
    
    UIView *blue = [UIView new];
    blue.backgroundColor = [UIColor colorWithRed:0.400 green:0.800 blue:1.000 alpha:1.000];
    [self.view addSubview:blue];
    [blue mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(red.mas_bottom).offset(10);
        make.bottom.equalTo(@-5);
        make.right.equalTo(@-10);
        make.left.equalTo(@10);
        
    }];

第一步:对红色进行约束

第二步:对三个绿色进行约束

第三步:对蓝色进行约束

总结:大同小异