你的位置:首页 > 操作系统

[操作系统]关于Masonry框架(AutoLayout)的用法


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

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:

 

 [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的高度变化而变化。*/

}];

//啰嗦下坐标

 

//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)  约束过多相悖或缺少    

 

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

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],程序也会崩溃。