[iOS]-Masonry的使用

Masonry介绍

Masonry是一个iOS开发布局框架，可以适配各种机型，相比原生的NSLayoutConstraint，提高了使用容易度和代码的可阅读程度。

首先需要准备的点：

使用Masonry需要配置Cocoapods环境和安装Masonry第三方库
参考如下：
配置Cocoapods环境：2021年CocoaPods安装方法（这里推荐一位大佬的博客）
其中关键的点有：没有rvm的一定要按照给的方法安装rvm,如果失败就换个网络多试几次，安装rvm后需要按照所给的方法去安装ruby3.0（由于Big Sur系统的m1 mac现版本系统默认的是ruby2.6），完成上方的操作后最后再按流程完成其余的简单步骤即可实现配置Cocoapods环境

安装Masonry第三方库流程如下：

1. Xcode新建一个项目，用终端cd到项目目录下
2. 再到终端中输入 pod init 来创建一个Podfile文件
3. 接着再到终端中输入 open Podfile 来打开Podfile文件
4. 在文件中添加 pod ‘Masonry’ 这句话并保存退出
5. 最后在终端中输入 pod install 开始下载该第三方库

其中最后一步的pod install常常会由于网络等因素而下载失败，如果失败的话多试几次或者换个网络试，直到成功即可，成功之后打开项目只需要点击xxx.xcworkspace文件即可

Masonry的使用

重要的点：

1. 在需要使用Masonry来添加约束的文件中要写#import "Masonry.h"来引用Masonry文件。
2. 使用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