Masonry的使用

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);
    }];

效果图：