关于Masonry框架(AutoLayout)的用法--面向初学者

Masonry作为目前较为流行的自动布局第三方框架，简单易用，大大减少了程序员花在UI布局和屏幕适配的精力与时间。

1 基本用法

1.1 事例1：

图1-1

// 首先是view1自动布局

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

// view1左边与superView左边对齐

make.left.equalTo(superView.mas_left);

// view1右边与superView右边对齐.

make.right.equalTo(superView.mas_right);

/* 这两句代码约束了view1的左边与右边，等价于约束了view1的宽

度,宽度与superView的宽度相等，superView宽度变了，view1宽度也

更着改变*/

// viewe1上边于superView上边对齐

make.top.equalTo(superView.mas_top);

// view1高度固定为44,等于一个数时用mas_equalTo();

make.height.mas_equalTo(44);

/* 到这里view1布局完成，它的origin(位置：x,y)和size(尺寸：

width,height)都确定了,实际上就是view1的frame确定了。*/

}];

/* 任意一个UIView的布局都需要确定位置和尺寸：x和y, width和

height，缺一不可。下面是view2的布局 */

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

// view2左边与view1左边对齐,即x确定，也可以与superView对齐

make.left.equalTo(view1.mas_left);

// view1宽度固定为90,即width确定。

make.width.mas_equalTo(90);

// 这里view2的高度与view1的高度相等,即height确定.

make.height.equalTo(view1.mas_height);

// 底边与superView底边对齐,结合高度约束，y确定。

make.bottom.equalTo(superView.mas_bottom);

}];

/* x,y既可以通过left,top直接确定，也可以通right结合width,bottom

结合height间接确定 ，width和height通过mas_equalTo()直接确定以及

通过equalTo(view)依赖view的宽高间接确定 */

1.2 事例2:

图1-2

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

// 与superView左边对齐，x确定。

make.left.equalTo(superView.mas_left);

// 与superView上边对齐，y确定。

make.top.equalTo(superView.mas_top);

// view1宽度固定为90，width确定。

make.width.mas_equalTo(90);

// view1高度height未确定。

}];

//view2布局，假设双箭头( 间距 )为20;

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

/* view2的左边与superView左边+一个数对齐，从这里换个说法

,view2的左边等于superView的左边加上一个间距，x确定。*/

make.left.equalTo(superView.mas_left).offset(20)

// view2的底边等于superView底边。

make.bottom.equalTo(superView.mas_bottom);

// view2的尺寸等于view1的尺寸(高度和宽度)，size(width,height)确定

make.size.equalTo(view1);

/* 上面一句等价于make.height.width.equalTo(view1); */

// view2的顶边等于view1的底边加上间距，结合高度约束，y确定。

make.top.equalTo(view1.mas_bottom).offset(20)

/* 四个要素确定，约束完成，view2的宽高度与view1的宽高度相同，

由于两者没有。固定高度，只有固定的间距，故view1和view2的高度

会随着superView的高度变化而变化。*/

}];

//啰嗦下坐标

图1-3

//view3布局，假设间距为20。

[view3 mas_makeConstraints:^(MASConstraintMaker *make) {

/* 从图中看出右边最好确定，右边等于superView的右边加上间距 */

make.right.equalTo(superView.mas_right).offset(-20);

// 坐标计算: 往左-20,往右+20。

// view3的顶边等于superView顶边加一个间距

make.top.equalTo(superView.mas_top).offset(20); //往上-20, 往下+20

// view3的底边等于superView的底边加上一个间距。

make.bottom.equalTo(superView.mas_bottom).offset(-20)

// 到这里view3的高度确定，但宽度和x,y都尚未确定

// view3宽度确定后结合right约束x跟着确定

make.width.mas_equalTo(90);

/* 剩下y未确定,从图中可以看出view3在superView中应该是垂

直方向上居中,可以直接设置centerY */

make.centerY.equalTo(superView.mas_centerY);

/* 无论superView高宽怎么变化，view3始终在垂直方向上居中，

且紧挨着superView右侧，高度会随着superView变化而变化，当

然，你也可以直接固定高度，顶边与底边就不用在设置了，这样，

superView高度变大变小，view3始终那么高，如何选择肯定是跟

UI界面需求有关 */

}];

/* 这部分主要介绍了基本用法, top, bottom, left, right, centerY(相应的有

centerX), equalTo(), mas_equalTo(), offset() */

2 注意事项

2.1 问题

(1)  view 进行布局了但没有效果

1)  view为空,相当于给空指针发送消息，没有作用。

2)  布局依赖的UIView(如superView,view2)没有布局好.(说明：

make.equalTo(view2),view2为依赖的UIView).

3)  view 本身没有显示什么东西

4)  view 没有添加到superView

5)  等等。。。。。。。

(2)  约束过多相悖或缺少

Unable to simultaneously satisfy constraints.

Probably at least one of the constraints in the following list is one you don't want.

(3)程序崩溃，一般是约束依赖的对象(如superView)为空

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'attempting to add unsupported attribute: (null)';

2.2 综合解决方法

设置view的背景以便观察，辅以View UI Hierarchy观测.

最直接有效的方法是在当前界面的第一个自动布局的view处打上断点，一行一行往下走( step over )，若直接跳过当前view布局，一般是当前view为空; 若进去在某一行程序崩溃，一般是当前约束语句依赖的对象为空。

2.3 细节( 自行忽略 )

规律：边界:view1与superView对齐,相邻：view2与view1的左边、右边、顶边或者底边对齐，中心：centerX，centerY对齐,一个整体内的view与该整体对齐.固定与变化的选择依UI需求.

一般情况下，布局是在layoutSubViews()或者控制器viewDidLayoutSubViews(),若不是，如：view1在布局约束前未执行[superView addSubViews:view1],程序也会崩溃。

有些view，如UILabel没有约束高度而设置了numerOfLines = 0时UILabel的高度会随着内容的多少而变化。