1.简介:
Masonry就是为屏幕适配而生的三方框架, 原理是对系统的NSLayoutConstraints封装,实际上使用的还是NSLayoutConstraints. 与NSLayoutConstraints对比如下

2.集成: Cocoapods集成
在 CocoaPods 中添加下面代码:
pod 'Masonry'
3.Masonry使用注意事项:
在使用Masonry添加约束之前,需要在addSubview方法之后才能使用,否则会导致崩溃。
4.Masonry API 介绍
mas_makeConstraints() 添加约束
mas_remakeConstraints() 移除之前的约束,重新添加新的约束
mas_updateConstraints() 更新约束,写哪条更新哪条,其他约束不变
equalTo() 参数是对象类型,一般是视图对象或者mas_width这样的坐标系对象
mas_equalTo() 和上面功能相同,参数可以传递基础数据类型对象,可以理解为比上面的API更强大
width() 用来表示宽度,例如代表view的宽度
mas_width() 用来获取宽度的值。和上面的区别在于,一个代表某个坐标系对象,一个用来获取坐标系对象的值
5.更新约束和布局
- (void)updateConstraintsIfNeeded 调用此方法,如果有标记为需要重新布局的约束,则立即进行重新布局,内部会调用updateConstraints方法
- (void)updateConstraints 重写此方法,内部实现自定义布局过程
- (BOOL)needsUpdateConstraints 当前是否需要重新布局,内部会判断当前有没有被标记的约束
- (void)setNeedsUpdateConstraints 标记需要进行重新布局
6.常用方法
设置testView视图和self.view等大,并且有10的内边距。注意根据UIView的坐标系,下面right和bottom进行了取反.
[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view).with.offset(10);
make.top.equalTo(self.view).with.offset(10);
make.right.equalTo(self.view).with.offset(-10);
make.bottom.equalTo(self.view).with.offset(-10);
}];
通过insets简化设置内边距的方式
[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
// 下、右不需要写负号,insets方法中已经为我们做了取反的操作了。
make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
大于等于和小于等于某个值的约束
[self.testLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.xibButton.mas_bottom).with.offset(10);
make.left.mas_equalTo(self.xibButton);
// 设置宽度小于等于200
make.width.mas_lessThanOrEqualTo(200);
// 设置高度大于等于60
make.height.mas_greaterThanOrEqualTo(60);
}];
使用基础数据类型当做参数
/**
如果想使用基础数据类型当做参数,Masonry为我们提供了"mas_xx"格式的宏定义。
这些宏定义会将传入的基础数据类型转换为NSNumber类型,这个过程叫做封箱(Auto Boxing)。
"mas_xx"开头的宏定义,内部都是通过MASBoxValue()函数实现的。
这样的宏定义主要有四个,分别是mas_equalTo()、mas_offset()和大于等于、小于等于四个。
*/
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.width.mas_equalTo(100);
make.height.mas_equalTo(100);
}];
设置约束比例
[self.xibButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.button.mas_bottom).with.offset(10);
make.left.mas_equalTo(self.button);
make.height.mas_equalTo(40);
// 设置当前约束值乘以多少,例如这个例子是xibButton的宽度是self.view宽度的0.2倍。
make.width.mas_equalTo(self.view).multipliedBy(0.8);
}];
UIScrollView自动布局
布局小技巧:
给UIScrollView添加的约束是定义其frame,设置contentSize是定义其内部大小。UIScrollView进行addSubview操作,都是将其子视图添加到contentView上。
所以,添加到UIScrollView上的子视图,对UIScrollView添加的约束都是作用于contentView上的。只需要按照这样的思路给UIScrollView设置约束,就可以掌握设置约束的技巧了。
这个例子中将会展示动态改变contentSize的大小,内部视图有多少contentSize就自动扩充到多大。
这种方式的实现,主要是依赖于创建一个containerView内容视图,并添加到UIScrollView上作为子视图。UIScrollView原来的子视图都添加到containerView上,并且和这个视图设置约束。
因为对UIScrollView进行addSubview操作的时候,本质上是往其contentView上添加。也就是containerView的父视图是contentView,通过containerView撑起contentView视图的大小,以此来实现动态改变contentSize
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(10,10,10,10));
}];
[self.containerView mas_updateConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView);
}];
[self.redView mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.left.right.bottom.equalTo(self.containerView);
make.height.mas_equalTo(self.view);
make.width.mas_equalTo(300);
}];
网友评论