Masonry简介
Masonry是一个iOS开发布局框架,相比原生的NSLayoutConstraint,提高了使用容易度和代码的可阅读程度。Masonry使用了链式语法,例如:make.left.equalTo(view.mas_bottom).offset(0);不管是使用还是阅读,都是非常易懂的。
安装
基于CocoaPods
安装CocoaPods可参考iOS安装CocoaPods详细过程
安装过程很不容易。。需要耐心
注意
- 使用Masonry添加约束需要在addSubview方法之后,否则程序会崩
- 使用时经常会加mas_前缀,如果不想加前缀则在引用Masonry文件前加
//定义这个常量,就可以不用在开发过程中使用mas_前缀
#define MAS_SHORTHAND
//定义这个常量,就可以让Masonry帮我们自动把基础数据类型的数据,自动装箱为对象类型
#define MAS_SHORTHAND_GLOBALS
- equalTo和offset 的区别
make.top.mas_equalTo(10);//顶部等于10
make.top.mas_offset(10);//顶部距离父视图的mas_top有+10个单位,规定向下为正
使用
首先引用Masonry文件
#import "Masonry.h"
普普通通的视图(上,左,宽,长)
UIView *leftView = [[UIView alloc] init];
[self.view addSubview:leftView];
//添加约束
[leftView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_offset(100);
make.left.mas_equalTo(20);
make.width.mas_offset(50);
make.height.mas_equalTo(50);
//后两句等同于
// make.height.and.width.equalTo(@50);
}];
leftView.backgroundColor = [UIColor orangeColor];
设置中心点的视图
//中心点
UIView *centerView = [[UIView alloc] init];
[self.view addSubview:centerView];
[centerView mas_makeConstraints:^(MASConstraintMaker *make) {
//中心和视图的中心对齐
make.center.equalTo(self.view);
//相当于下面这两句
make.centerX.equalTo(self.view.mas_centerX);
make.centerY.equalTo(self.view.mas_centerY);
make.width.and.height.mas_equalTo(@100);
}];
centerView.backgroundColor = [UIColor blueColor];
边距
UIView *myView = [[UIView alloc] init];
[self.view addSubview:myView];
[myView mas_makeConstraints:^(MASConstraintMaker *make) {
//设置四周的边距,如果还设置了宽度和高度,则边距只有左和上生效
//insets不用区分正负,可以四个边距一起设置,缺点是写的有点长
//offset区分正负,如果四个边距用offset(10)的话,右下两个边距就会出问题
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
//如果边距分开设置就需要区分正负了,但是可以直接写数值,在这里我以第一种显示,自己可以两种方法显示都试试
// make.left.and.top.equalTo(self.view).offset(50);
// make.right.and.bottom.equalTo(self.view).offset(-50);
}];
//我将此视图设为半透明防止挡住上面的视图
myView.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0.5];
效果图
更新约束
Masonry提供了两个方法用来更新约束
//第一种删除以前的全部约束,添加新的约束
[leftView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(20);
make.top.mas_equalTo(30);
make.bottom.mas_equalTo(-20);
make.right.mas_equalTo(-20);
}];
效果图
leftView的位置完全改变
将第一种方法的代码注释掉,加上第二个方法的代码
//第二种会覆盖之前的某些特定约束
[leftView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(200);
}];
效果图
只改变了我更改的值
可能你会想 也许是因为我第一种方法将其位置全部重新赋值了,那么现在我也将第一种方法只更改一个值
也就是:
//第一种删除以前的全部约束,添加新的约束
[leftView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(200);
// make.top.mas_equalTo(30);
// make.bottom.mas_equalTo(-20);
// make.right.mas_equalTo(-20);
}];
效果图: