不同于XIB的第三方 Masonry 自动布局

这个第三方还是比较好用的，当然你也可以使用XIB，但是在有些场景下，Masonry更为好用，比如说此时你创建的视图并不是全局属性，或者是所添加的视图是在某些情况下才会创建，也就是说这个视图是局部变量，而此时用XIB就很牵强了。所以，Masonry这时候就果断的站出来了，他可以直接进行局部变量的布局，而且布局思路和XIB的约束也是有些类似，但是他是纯代码哦，也比较好懂，用的是链式的简单语言。这里要注意的是 语句中的and 和 with 实际上时无意义的，只是便于我们去理解代码的意思。说了这么多，直接来代码给你们解释Zzzz

我也是慢慢的学习，所以这篇文章还会一直补充，希望不要断了。。。。

我就直接上代码了，不解释太多了，代码里面有很多注释，还是比较详细的。

这个代码是直接写在控制器的ViewDidLoad方法里面的

说下我遇到的大坑吧，就是在设置布局的时候，一定要进行添加，其实添加到哪个视图上影响的只是视图的层次关系，并不是他的布局，具体的布局还是要看 make.edges.equalTo(view1) 这句，这里是将布局的相对对象设置成view1了

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    
#pragma mark ---- 一个视图在另一个视图上的布局 -----
    
    UIView *view1 = [UIView new];
    view1.backgroundColor = [UIColor redColor];
    
    // 要有一个父视图
    [self.view addSubview:view1];
    
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 将图形设置居中（在self.view）中
        make.center.equalTo(self.view);
        
        // 设置尺寸
        make.size.mas_equalTo(CGSizeMake(350, 350));
        
    }];
//
    
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor cyanColor];
    
     // 要有一个父视图，这个只是图层的关系，布局还是和make.edges.equalTo(view1) 对象有关
    [view1 addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // 这里的make 就相当于调用对象view2
        // equalTo（对象）, 这里指的是相对布局对象
        // 注意这里是with 是一种链式的自然语言
        // 上左下右
        make.edges.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
        
        // 可以看到 edges 其实就是top,left,bottom,right的一个简化 分开写也可以 一句话更省事
        
         // 等价于
       make.top.equalTo(view1).with.offset(10);
       make.left.equalTo(view1).with.offset(10);
       make.bottom.equalTo(view1).with.offset(-10);
       make.right.equalTo(view1).with.offset(-10);
     
        // 那么为什么bottom和right里的offset是负数呢? 因为这里计算的是绝对的数值 计算的bottom需要小于view1的底部高度 所以要-10 同理用于right
        
        
        // 也等价于
  //make.top.left.bottom.and.right.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];
     
    
  
    
//    - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//    - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//    - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
    
     
     //mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
     //mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
     //mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
    // 三种函数善加利用 就可以应对各种情况了
     
     
    

  
    
    
    
    
    
#pragma mark ---- 两个视图在另一个视图上的布局，自动调整适应 -----
    
    UIView *view3 = [[UIView alloc] init];
    UIView *view4 = [[UIView alloc] init];
    
    view3.backgroundColor = [UIColor yellowColor];
    view4.backgroundColor = [UIColor yellowColor];
    
    // 要有一个父视图
    [view1 addSubview:view3];
    [view1 addSubview:view4];
    // 设置距离的变量
    int padding = 10;
    // 先对view3布局
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
       
        // 这里只是两个视图在同一条水平线上，所以不用center.X
        make.centerY.mas_equalTo(view1.mas_centerY);
        // 这里是相对布局，不需要设置距离底端和上端的距离，直接设置高度
//        make.top.equalTo(self.view.mas_top).offset(padding);
//  make.bottom.equalTo(self.view.mas_bottom).with.offset(- padding);
        make.left.equalTo(view1.mas_left).with.offset(padding);
        
        
        make.right.equalTo(view4.mas_left).with.offset(- padding);
        
        // 设置高度的数值
        // mas_equalTo 用来设置数值
        // equalTo 是直接等于某个对象的数值
        make.height.mas_equalTo(150);
        
        // 设置和view4等宽
        make.width.equalTo(view4);
        
        
        
        
    }];
    
    [view4 mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.centerY.mas_equalTo(view1.mas_centerY);
        make.left.equalTo(view3.mas_right).with.offset(padding);
        make.right.equalTo(view1.mas_right).with.offset(- padding);
        
        make.height.mas_equalTo(150);
        make.width.equalTo(view3);
        
        
    }];
    

贴张最后效果图，视图从最下到上一次是view1，view2，view3 +view4

A9CE0A9D-0339-4C83-8510-42FFE94AE962.png

OK 就到这里，我看明天有没有空继续补充吧，不定时补充~~~~
未完待续~~~~~~~~~