Masonry使用小记

1、简介
Masonry是目前最流行的Autolayout第三方框架，使我们能够用优雅的代码方式编写Autolayout，省去了苹果官方繁琐的Autolayout代码，大大提高了开发效率。

2、使用步骤
（1）使用CocoaPods托管该库或添加Masonry文件夹的所有源代码到项目中
（2）添加2个宏、导入主头文件

// 只要添加了这个宏，就不用带mas_前缀
#define MAS_SHORTHAND

// 只要添加了这个宏，equalTo就等价于mas_equalTo
#define MAS_SHORTHAND_GLOBALS

// 这个头文件一定要放在上面两个宏的后面
#import "Masonry.h"

（3） 添加约束的方法

// 这个方法只会添加新的约束
 [view makeConstraints:^(MASConstraintMaker *make) {

 }];

// 这个方法会将以前的所有约束删掉，添加新的约束
 [view remakeConstraints:^(MASConstraintMaker *make) {

 }];

 // 这个方法将会覆盖以前的某些特定的约束
 [view updateConstraints:^(MASConstraintMaker *make) {

 }];

（4）约束的类型
<1> 尺寸：width\height\size
<2> 边界：left\leading\right\trailing\top\bottom
<3> 中心点：center\centerX\centerY
<4> 边界：edges

3、使用举例

#import "ViewController.h"

//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND

//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS

#import "Masonry.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 蓝色控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    // 红色控件
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 添加约束
    CGFloat margin = 20;
    CGFloat height = 50;
    [blueView makeConstraints:^(MASConstraintMaker *make) {
        // 蓝色的左边＝父控件的左边＋margin
        make.left.equalTo(self.view.left).offset(margin);
        // 蓝色的右边＝红色的左边－margin
        make.right.equalTo(redView.left).offset(-margin);
        // 蓝色的底部 ＝ 父控件的底部－margin
        make.bottom.equalTo(self.view.bottom).offset(-margin);
        // 蓝色的高度 ＝ height
        make.height.equalTo(height);
        // 蓝色的顶部＝红色的顶部
        make.top.equalTo(redView.top);
        // 蓝色的底部＝红色的底部
        make.bottom.equalTo(redView.bottom);
        // 蓝色的宽度＝红色的宽度
        make.width.equalTo(redView.width);
    }];

    [redView makeConstraints:^(MASConstraintMaker *make) {
        // 红色的右边＝父控件的右边－margin
        make.right.equalTo(self.view.right).offset(-margin);
    }];
}

@end

约束结果如下：

备注：
（1）make.left.equalTo(self.view.left).offset(margin); 相当于 make.left.offset(margin);
这种写法，子控件默认就是相对于父控件而言的。

（2）

- (void)test4
{
    // 蓝色控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    // 添加约束
    [blueView makeConstraints:^(MASConstraintMaker *make) {
        // 蓝色的宽度＝父控件的宽度＊0.5
        //        make.width.equalTo(self.view.width).multipliedBy(0.5);
        // 蓝色的高度＝父控件的高度*0.5－100
        //        make.height.equalTo(self.view.height).multipliedBy(0.5).offset(-100);

        // 可用如下代码实现如上结果
        make.width.equalTo(100);
        make.height.equalTo(100);
        make.centerX.equalTo(self.view.centerX);
        make.centerY.equalTo(self.view.centerY);
    }];
}

显示如下：

知识点补充：
（1）mas_equalTo 和 equalTo
默认情况下，mas_equalTo有自动包装功能，比如自动将20包装为@20
equalTo没有自动包装功能。
如果添加了下面的宏，那么mas_equalTo和equalTo就没有区别。

#define MAS_SHORTHAND_GLOBALS
// 注意：这个宏一定要添加到#import "Masonry.h"前面

（2）mas_width 和 width
默认情况下
width是make对象的一个属性，用来添加宽度约束用的，表示对宽度进行约束
mas_width是一个属性值，用来当做equalTo的参数，表示某个控件的宽度属性。
如果添加了下面的宏，mas_width也可以写成width

#define MAS_SHORTHAND

mas_height、mas_centerX以此类推。

（3）可有可无的用法
以下方法都仅仅是为了提高可读性，可有可无

- (MASConstraint *)with {
    return self;
}

- (MASConstraint *)and {
    return self;
}