Masonry介绍
Masonry是一个iOS开发布局框架,可以适配各种机型,相比原生的NSLayoutConstraint,提高了使用容易度和代码的可阅读程度。
首先需要准备的点:
使用Masonry需要配置Cocoapods环境和安装Masonry第三方库
参考如下:
配置Cocoapods环境:2021年CocoaPods安装方法(这里推荐一位大佬的博客)
其中关键的点有:没有rvm的一定要按照给的方法安装rvm,如果失败就换个网络多试几次,安装rvm后需要按照所给的方法去安装ruby3.0(由于Big Sur系统的m1 mac现版本系统默认的是ruby2.6),完成上方的操作后最后再按流程完成其余的简单步骤即可实现配置Cocoapods环境
安装Masonry第三方库流程如下:
- Xcode新建一个项目,用终端cd到项目目录下
- 再到终端中输入 pod init 来创建一个Podfile文件
- 接着再到终端中输入 open Podfile 来打开Podfile文件
- 在文件中添加 pod ‘Masonry’ 这句话并保存退出
- 最后在终端中输入 pod install 开始下载该第三方库
其中最后一步的pod install常常会由于网络等因素而下载失败,如果失败的话多试几次或者换个网络试,直到成功即可,成功之后打开项目只需要点击xxx.xcworkspace文件即可
Masonry的使用
重要的点:
- 在需要使用Masonry来添加约束的文件中要写
#import "Masonry.h"
来引用Masonry文件。 - 使用Masonry添加约束需要在addSubview方法之后,否则程序会报错。
Masonry的使用其实就是对于其中的API的使用,一些基础的API如下:
//添加约束
mas_makeConstraints()
//移除之前的约束,重新添加新的约束
mas_remakeConstraints()
//更新约束,写哪条更新哪条,其他约束不变
mas_updateConstraints()
//equalTo的类型为id,里面不能直接填数字,例如如果非要填,括号里就要填成@100等(数字前面加@):
equalTo()
//和上面功能相同,参数可以传递基础数据类型对象,可以理解为比上面的API更强大,例如要添加数字时就可以直接写成100等
mas_equalTo()
//顶部距离父视图的mas_top有+x个单位(x为实际括号里所输入的值),规定向下为正
mas_offset()
//用来表示宽度,例如代表view的宽度
width()
//用来获取宽度的值。和上面的区别在于,一个代表某个坐标系对象,一个用来获取坐标系对象的值
mas_width()
更新约束:(苹果官方建议:添加/更新约束在方法:updateConstraints内)代码如下:
//例如点击一个按钮后更新约束,则代码写在按钮的点击时间中,如下:
- (void) pressButton:(UIButton *)button {
//方法有三种,分别如下:
//1.告知需要更新约束,但不会立刻开始,系统然后调用updateConstraints
[self setNeedsUpdateConstraints];
//2.告知立刻更新约束,系统立即调用updateConstraints
[self updateConstraintsIfNeeded];
//3.这里动画当然可以取消,具体看项目的需求
//系统block内引用不会导致循环引用,block结束就会释放引用对象
[UIView animateWithDuration:0.4 animations:^{
[self layoutIfNeeded]; //告知页面立刻刷新,系统立即调用updateConstraints
}];
}
//在方法:updateConstraints内更新约束
- (void)updateConstraints {
//更新约束
[self.xxx updateConstraints:^(MASConstraintMaker *make) {
//code
}];
//最后必须调用父类的更新约束
[super updateConstraints];
}
//设置requiresConstraintBasedLayout为YES
+ (BOOL)requiresConstraintBasedLayout{
return YES ;
}
一个Masonry使用的最基础的例子:
例如将视图二添加到视图一上这样一个简单的层级关系:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor];
//使用Masonry布局,基本可以抛弃CGRectMake了,直接初始化即可
UIView *firstView = [[UIView alloc] initWithFrame:CGRectZero];
firstView.backgroundColor = [UIColor orangeColor];
UIView *secondView = [[UIView alloc] initWithFrame:CGRectZero];
secondView.backgroundColor = [UIColor greenColor];
//在做布局之前,一定要先将view添加到superview上,否则会报错
[self.view addSubview:firstView];
[firstView addSubview:secondView];
//mas_makeConstrains就是Masonry的autolayout添加函数,将所需的约束添加到block中就行
[firstView mas_makeConstraints:^(MASConstraintMaker *make) {
//规定当前视图距离父视图顶端的距离
make.top.mas_offset(100);
//规定当前视图距离父视图左端的距离
make.left.mas_equalTo(20);
//规定当前视图自身的宽度
make.width.mas_offset(250);
//规定当前视图自身的高度
make.height.mas_equalTo(250);
}];
[secondView mas_makeConstraints:^(MASConstraintMaker *make) {
//规定当前视图距离父视图顶端的距离
make.top.mas_offset(25);
//规定当前视图距离父视图左端的距离
make.left.mas_equalTo(25);
//规定当前视图自身的宽度
make.width.mas_offset(200);
//规定当前视图自身的高度
make.height.mas_equalTo(200);
}];
}
@end
最终的显示效果:
Masonry Demo