重读Masonry布局框架体会

重读Masonry布局框架体会

IOS小彩虹2021-08-15 9:47:20200A+A-

刚开始使用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);   
 }];

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们