Masonry基本用法

Masonry基本用法

2015年11月29日  黄仪标 18条评论 5,206 阅读

前言

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

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

效果图

本节详解Masonry的基本用法，先看看效果图：

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

核心代码

看下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

- ( 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的顶部、高度和底部也就自动计算出来了。

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

1 2 3

make . right . mas_equalTo ( - padding ) ;

其完整写法为：

1 2 3

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

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