1、Masonry概述

目前最流行的Autolayout第三方框架

用優雅的程式碼方式編寫Autolayout

省去了蘋果官方噁心的Autolayout程式碼

大大提高了開發效率

框架地址：https://github.com/SnapKit/Masonry

2、常用方法

這個方法只會新增新的約束

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {

}];

這個方法會將以前的所有約束刪掉，新增新的約束

[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {

}];

這個方法將會覆蓋以前的某些特定的約束

[blueView mas_updateConstraints:^(MASConstraintMaker *make) {

}];

3、約束型別

尺寸：

width（寬）\height（高）\size（大小）

寬度約束

make.width.mas_equalTo(100);

高度約束

make.height.mas_equalTo(100);

大小約束（與上面兩句等價）

make.size.mas_equalTo(CGSizeMake(100, 100));

邊界：

left\leading（左邊界）\right\trailing（右邊界）\top（頂部邊界）\bottom（底部邊界）

左邊（leading類似）

make.left.mas_equalTo(self.view).offset(50);

右邊（trailing類似）

make.right.equalTo(self.view).offset(-20);

頂部

make.top.equalTo(self.view).offset(20);

底部

make.bottom.mas_equalTo(self.view).offset(-50);

中心點：

center\centerX\centerY

居中（水平+垂直）

尺寸是父控制元件的一半

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.size.mas_equalTo(self.view).multipliedBy(0.5);

        make.center.mas_equalTo(self.view); // 與下面兩句程式碼等價

//        make.centerX.mas_equalTo(self.view);

//        make.centerY.mas_equalTo(self.view);

}];

內邊距實現邊界約束：

edges

UIEdgeInsets 內邊距

make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));

4、mas_字首修飾與不修飾的區別

mas_equalTo和equalTo

預設情況下：

mas_equalTo有自動包裝功能，比如自動將20包裝為@20

equalTo沒有自動包裝功能

mas_equalTo的功能強於 > equalTo，可以一直使用mas_equalTo

mas_width和width

預設情況下：

width是make物件的一個屬性，用來新增寬度約束用的，表示對寬度進行約束

mas_width是一個屬性值，用來當做equalTo的引數，表示某個控制元件的寬度屬性

mas_height、mas_centerX以此類推

消除區別辦法

如果新增了下面的巨集，那麼 mas_equalTo 和 equalTo 就沒有區別

#define MAS_SHORTHAND_GLOBALS 

注意：這個巨集一定要新增到#import "Masonry.h"前面

如果新增了下面的巨集，mas_width也可以寫成width

#define MAS_SHORTHAND

示例程式碼：

//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"

- (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) {

        make.left.equalTo(self.view.left).offset(margin);

        make.right.equalTo(redView.left).offset(-margin);

        make.bottom.equalTo(self.view.bottom).offset(-margin);

        make.height.equalTo(height);

        make.top.equalTo(redView.top);

        make.bottom.equalTo(redView.bottom);

        make.width.equalTo(redView.width);

    }];

    [redView makeConstraints:^(MASConstraintMaker *make) {

        make.right.equalTo(self.view.right).offset(-margin);

    }];

}

5、可有可無的用法

以下方法都僅僅是為了提高可讀性，可有可無

with

- (MASConstraint*)with {

    return self;

}

使用情況示例程式碼

// 尺寸限制：100x100

// 位置：粘著父控制元件右下角，間距是20

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {

    // 寬度約束

    make.width.equalTo(@100);

    // 高度約束

    make.height.equalTo(@100);

    // 右邊

    make.right.equalTo(self.view.mas_right).with.offset(-20);

    // 頂部

    make.top.equalTo(self.view.mas_top).with.offset(20);

}];

and

- (MASConstraint*)and {

    return self;

}

使用情況示例程式碼

// 尺寸限制：100x100

// 位置：粘著父控制元件右下角，間距是20

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {

    // 寬度高度約束

    make.width.and.height.mas_equalTo(100);

    // 右邊

    make.right.equalTo(self.view).offset(-20);

    // 頂部

    make.top.equalTo(self.view).offset(20);

}];