重读Masonry布局框架体会

刚开始使用Masonry框架时，代码写的很复杂，写一个视图的布局约束如下：

[self.leftBtn mas_makeConstraints:^(MASConstraintMaker *make) {     
   make.top.equalTo(self.mas_top).offset(10);  
   make.right.equalTo(self.lineView.mas_left).offset(-20);
   make.left.equalTo(self.mas_left).offset(15);      
   make.bottom.equalTo(self.mas_bottom).offset(-10);  
  }];

写多了之后，我就在思考，这个框架会不会提供简单的方法去供开发者使用，经过在网上冲浪发现，确实有，而且还有比自己在做等高、等宽的代码约束更简单的方式。看了之后，get到了其中的奥秘。例如向下面写的代码：

[greenView mas_makeConstraints:^(MASConstraintMaker *make) {     
   make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(NavBarHeight, 10, 10, 10)); 
   }];

这样的方式写，一行代码就完成了，简直很爽。

例如下面写的代码，都是通过框架中的insets方法去实现。

等高代码

CGFloat  padding = 10;    
//红色view   
 UIView * redView = [[UIView alloc] init];  
  redView.backgroundColor = [UIColor redColor];   
 [self.view addSubview:redView];   
 //蓝色view   
 UIView * blueView = [[UIView alloc] init];  
  blueView.backgroundColor = [UIColor blueColor];    
[self.view addSubview:blueView];   
 //黄色view  
  UIView * yellowView = [[UIView alloc] init]; 
   yellowView.backgroundColor = [UIColor yellowColor];  
  [self.view addSubview:yellowView]; 
   [redView mas_makeConstraints:^(MASConstraintMaker *make) {     
   make.top.left.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(padding, padding, 0, padding));   
   make.bottom.equalTo(blueView.mas_top).offset(-padding);
    }];
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(0, padding, 0 , padding));
        make.bottom.equalTo(yellowView.mas_top).offset(-padding);
    }];
    
    [yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.bottom.equalTo(self.view).with.insets(UIEdgeInsetsMake(0, padding, padding, padding));
        make.height.equalTo(@[redView,blueView]);
    }];

等宽代码

CGFloat  padding = 10;    
//红色view   
 UIView * redView = [[UIView alloc] init];   
 redView.backgroundColor = [UIColor redColor];  
  [self.view addSubview:redView];   
 //蓝色view   
 UIView * blueView = [[UIView alloc] init];  
  blueView.backgroundColor = [UIColor blueColor];   
 [self.view addSubview:blueView];   
 //黄色view  
  UIView * yellowView = [[UIView alloc] init]; 
   yellowView.backgroundColor = [UIColor yellowColor]; 
   [self.view addSubview:yellowView];   
 [redView mas_makeConstraints:^(MASConstraintMaker *make) {    
    make.top.left.bottom.equalTo(self.view).with.insets(UIEdgeInsetsMake(padding, padding, padding, 0));  
      make.right.equalTo(blueView.mas_left).offset(-padding);   
 }];  
  [blueView mas_makeConstraints:^(MASConstraintMaker *make) { 
    make.top.bottom.equalTo(self.view).with.insets(UIEdgeInsetsMake(padding, 0, padding, 0)); 
       make.right.equalTo(yellowView.mas_left).offset(-padding); 
   }]；   
 [yellowView mas_makeConstraints:^(MASConstraintMaker *make) {   
     make.top.bottom.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(padding, 0, padding, padding)); 
       make.width.equalTo(@[redView,blueView]);  
  }];

垂直居中

CGFloat  padding = 10;    
//红色view   
 UIView * redView = [[UIView alloc] init];  
  redView.backgroundColor = [UIColor redColor];   
 [self.view addSubview:redView];    
//蓝色view    
UIView * blueView = [[UIView alloc] init];   
 blueView.backgroundColor = [UIColor blueColor];   
 [self.view addSubview:blueView];  
  //黄色view   
 UIView * yellowView = [[UIView alloc] init];  
  yellowView.backgroundColor = [UIColor yellowColor];   
 [self.view addSubview:yellowView];    
[redView mas_makeConstraints:^(MASConstraintMaker *make) {   
     make.center.equalTo(self.view);     
     make.left.equalTo(self.view).mas_offset(padding);    
     make.right.equalTo(blueView.mas_left).mas_offset(-padding);
     make.height.mas_equalTo(150);   
 }];  
  [blueView mas_makeConstraints:^(MASConstraintMaker *make) {     
     make.center.equalTo(self.view);        
     make.right.equalTo(yellowView.mas_left).mas_offset(-padding);   
     make.height.mas_equalTo(150);  
  }];    
[yellowView mas_makeConstraints:^(MASConstraintMaker *make) {  
     make.center.equalTo(self.view);    
     make.right.equalTo(self.view).mas_offset(-padding);   
     make.width.equalTo(@[redView,blueView]);       
     make.height.mas_equalTo(150);   
 }];