Masonry还不使用就out了

最近在梳理技术点，又一次看到Masonry，实操一下，将来原理部分可能会添加

厌倦了天天计算frame的coder们，就不要犹豫了
举个 吧

嘻嘻嘻嘻嘻嘻.png

• 比如这样的效果，平时实现起来，屏幕宽度/2,再计算间距什么的，即使不是特别麻烦，但终归效率不高且代码有点冗余
• 如果你依旧乐此不疲，那这里就帮你适当简化一下这样的代码

self.view.frame.origin.x   -> self.view.left

框架肯定不少，这里列2个我自己接触过的

• YYKit 中有一个分支是有这个功能的，具体懒得看的
• UIViewAdditions 使用了多年的一个小型第三方

进入正题之前提一下

iOS自动布局核心计算公式
Obj1.property1 = Obj2.property2 * multiplier + constant value

Masonry的设置方式
make.top.equalTo(self.view.mas_top).multipliedBy(1.0).offset(20);

接下来进入正题

• 示例1：

    UIView * redV = [[UIView alloc]init];
    redV.backgroundColor = [UIColor redColor];
    //约束后添加会崩溃
    [self.view addSubview:redV];

//    equalTo 和 mas_equalTo 等效
    [redV mas_makeConstraints:^(MASConstraintMaker *make) {
        //redV的顶部=self.view的顶部 * 1 + 20；
        make.top.equalTo(self.view.mas_top).multipliedBy(1.0).offset(20);
        make.left.equalTo(self.view.mas_left).offset(20);//.multipliedBy(1.0) 可以不写默认*1
        make.right.equalTo(self.view).offset(-20); //.mas_rightt 也可以不写，就是根据self.view设置make.right
        make.bottom.offset(-20);//.equalTo(self.view.mas_bottom) 也可以不写，默认相对于父控件
        
//       设置上左  左下 可以通过连写
//        make.top.and.left.offset(20);
//        make.left.bottom.offset(-20); //.and 可以删掉，默认就有，以及with
        
//        make.edges.equalTo(self.view)insets(UIEdgeInsetsMake(20, 20, -20, -20))
//        make.edges.insets(UIEdgeInsetsMake(20, 20, -20, -20));//.equalTo(self.view) 可以删掉
    }];

可以看出，基本代码可以简化在简化，但是为了提升阅读性，改怎么写，相信大家心里都有数，看一下效果图

示例1.png

• 示例2：

        UIView * greeV = [[UIView alloc]init];
        greeV.backgroundColor = [UIColor greenColor];
        [self.view addSubview:greeV];
        
        [greeV mas_makeConstraints:^(MASConstraintMaker *make) {
            //普通写法
            make.width.equalTo(@100); //默认需要传入基本类型
            make.height.mas_equalTo(100); //将传入的基本类型包装成对象类型
            make.centerX.equalTo(self.view.mas_centerX);
            make.centerY.equalTo(self.view);//.mas_centerX 可以不写
            
            //简单写法
//            make.size.mas_equalTo(CGSizeMake(100, 100));
//            make.center.mas_equalTo(self.view);
            
        }];

看一下效果图

示例2.png

• 示例3：
  也就是开局的那个效果

    UIView * blue = [[UIView alloc]init];
    blue.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blue];
    
    UIView * orange = [[UIView alloc]init];
    orange.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:orange];
    
    [blue mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(30);
        make.top.mas_equalTo(self.view.mas_top).offset(30);
        make.right.mas_equalTo(orange.mas_left).offset(-30);
        make.width.mas_equalTo(orange.mas_width);
        make.height.mas_equalTo(50);
    }];
    [orange mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.mas_equalTo(self.view).offset(-30);
        make.top.mas_equalTo(self.view).offset(30);
        make.height.mas_equalTo(50);
//
//        make.top.mas_equalTo(blue.mas_top);
//        make.bottom.mas_equalTo(blue.mas_bottom);

    }];

还是在看一眼效果吧

示例3.png

• 对应的有设置，就有修改和删除

    //更新约束，有则更新，无则添加
    [greeV mas_updateConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@600); //equalTo 默认需要传入基本类型

    }];
    
    //删除之前所有的约束，并在block内先加新的约束
    [greeV mas_remakeConstraints:^(MASConstraintMaker *make) {

    }];