< 返回首页

标哥的笔记,是记录在日常学习技术和日常开发中那些年遇到过的坑!本站为新站,原"标哥的技术博客"中的文章会慢慢移到本站,欢迎收藏本站!
在使用本站过程中,有任何建议请联系标哥! 另,承接App开发、网站开发和微信小程序开发!欢迎联系我们


iOS Masonry基本用法

 作者:标哥    发布日期:2017-01-13 11:26    阅读量:990次
 

说到iOS自动布局,有很多的解决办法。有的人使用xib/storyboard自动布局,也有人使用frame来适配。对于前者,笔者并不喜欢,也不支持。对于后者,更是麻烦,到处计算高度、宽度等,千万大量代码的冗余,对维护和开发的效率都很低。

笔者在这里介绍纯代码自动布局的第三方库:Masonry。这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的。

效果图

本节详解Masonry的基本用法,先看看效果图:

image

我们这里要布局使这三个控件的高度一致,而绿色和红色的控件高度和宽度相待。

核心代码

- (void)viewDidLoad {
  [super viewDidLoad];
  
  UIView *greenView = UIView.new;
  greenView.backgroundColor = UIColor.greenColor;
  greenView.layer.borderColor = UIColor.blackColor.CGColor;
  greenView.layer.borderWidth = 2;
  [self.view addSubview:greenView];
  
  UIView *redView = UIView.new;
  redView.backgroundColor = UIColor.redColor;
  redView.layer.borderColor = UIColor.blackColor.CGColor;
  redView.layer.borderWidth = 2;
  [self.view addSubview:redView];
  
  UIView *blueView = UIView.new;
  blueView.backgroundColor = UIColor.blueColor;
  blueView.layer.borderColor = UIColor.blackColor.CGColor;
  blueView.layer.borderWidth = 2;
  [self.view addSubview:blueView];
  
  // 使这三个控件等高
  CGFloat padding = 10;
  [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(padding);
    make.left.mas_equalTo(padding);
    make.right.mas_equalTo(redView.mas_left).offset(-padding);
    make.bottom.mas_equalTo(blueView.mas_top).offset(-padding);
    // 三个控件等高
    make.height.mas_equalTo(@[redView, blueView]);
    // 红、绿这两个控件等高
    make.width.mas_equalTo(redView);
  }];
  
  [redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.height.bottom.mas_equalTo(greenView);
    make.right.mas_equalTo(-padding);
    make.left.mas_equalTo(greenView.mas_right).offset(padding);
  }];
  
  [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.mas_equalTo(greenView);
    make.bottom.mas_equalTo(-padding);
    make.left.mas_equalTo(padding);
    make.right.mas_equalTo(-padding);
  }];
}

讲解

添加约束的方法是:mas_makeConstraints。我们可以看到,约束可以使用链式方式,使用方法很简单,看起来像一句话。

看这句话:make.top.height.bottom.mas_equalTo(greenView),意思是:使我的顶部、高度和底部都与greenView的顶部、高度和底部相等。因此,只要greenView的约束添加好了,那么redView的顶部、高度和底部也就自动计算出来了。

大多时候,我们并不会将一句话完整地写出来,而是使用简写的方式。如:

make.right.mas_equalTo(-padding);

其完整写法为:

make.right.mas_equalTo(bludView.superView.mas_right).offset(-padding);

当我们是要与父控件相对约束时,可以省略掉父视图。注意,并不是什么时候都可以省略,只有约束是同样的才可以省略。比如,约束都是right才可以。如果是一个left一个是right,那么就不能省略了。

源代码

大家可以到笔者的github下载源代码:https://github.com/CoderJackyHuang/MasonryDemo

温馨提示:本节所讲内容对应于BasicController中的内容

推荐阅读

CocoaChina上有一篇文章讲得也不错,叫Masonry介绍与使用实践:快速上手Autolayout 和IOS自适应前段库-Masonry的使用

文章中所讲的内容属于很基础的内容,如果有任何疑问可以联系博主哦!


承接:ThinkPHP项目开发、网站项目开发、微信项目开发、微信小程序项目开发、App开发,欢迎联系标哥QQ632840804