iOS分享【OC】—— Masonry布局

要想使用 Masonry 这个第三方进行布局，就要先对它进行一定简单的了解。

笔者个人理解的 Masonry 是一个相对布局，既然是相对布局，重要的一点也就是要确定，你当前部署的控件是要相对于谁来进行布局，也就是要确定一个基础控件。

Masonry 的布局方式有很多，其中经常用到的有以下几种：

上方：top

左侧：left

下方：bottom

右侧：right

中心：center

横向中心：centerX

纵向中心：centerY

宽：width

高：height

大小：size

介绍完布局常用的几种方式，接下来说一个重点，既然要有一个相对性，这个“相对”需要怎么来表示呢，Masonry 提供了两个函数：equalTo 和 mas_equalTo，都可以体现相对一词，但是具体的区别还是有的，看下面的这个例子，既尝试实现一下刚才说的几种布局，再跟大家一起分享以下equalTo 和 mas_equalTo的区别。

首先是下载 Masonry 第三方库文件导入到项目中，并且引用头文件。具体引用文件这里不细讲了，百度上已经有大神写好了，笔者习惯了用 cocoapods 导入第三方文件，这种方式导入第三方快捷，简单，方便。

#import "ViewController.h"
#import <Masonry.h>

#define WEAKSELF(weakSelf)  __weak __typeof(&*self)weakSelf = self;

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor orangeColor];
    
    WEAKSELF(weakSelf);
    
    UIView *myView = [[UIView alloc] init];
    myView.backgroundColor = [UIColor greenColor];
    
    [self.view addSubview:myView];
    
    [myView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(weakSelf.view.mas_top).offset(100);
        make.left.mas_equalTo(weakSelf.view.mas_left).offset(50);
        make.size.mas_equalTo(CGSizeMake(200, 300));
    }];
}

1、这段代码里，定义了一个宏，这个宏的作用是为了防止在 block 中引用 self 而产生内存溢出。

2、这是用 mas_equalTo()函数进行的布局，这个函数的括号中，首先要写出相对于那个基础视图：weakSelf.view 也就是 self.view，然后还要写出相对于这个基础视图的什么位置进行布局。说的直白一点，就是mas_equalTo()函数的括号中，要写清你是相对于基础视图的什么位置进行的布局。说好的比较呢？往下看。

    [myView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(weakSelf.view).offset(100);
        make.left.equalTo(weakSelf.view).offset(50);
        make.size.mas_equalTo(CGSizeMake(200, 300));
    }];

3、根据上面的代码进行了一下修改，将mas_equalTo()替换为equalTo()。替换后的不同之处，就是equalTo()函数的括号中只有基础视图，而没有其他的代码了，这个就是mas_equalTo()函数和equalTo()函数最大的区别：equalTo()函数的括号中只有基础视图，而mas_equalTo()函数的括号中还有其他的代码。

4、还要说一下的，就是后面的 offset()函数，这里面写的是具体的像素值，但是有正值，有负值。这个跟苹果自己制定的坐标轴关系有关，大家只要记住，左正右负，上正下负就可以了，最后我会写一个简单的例子，争取吧知识点都写进去。

5、最后要注意的一点是，在使用 Masonry 进行布局之前，先将初始化后要进行布局的视图 add 到基础视图中，否则就会报错，错误提示如下

最后的最后，写一个小例子，与大家一起分享，Masonry 布局为什么方便，在这个例子中也有一点点的体现。

#import "ViewController.h"
#import <Masonry.h>

#define WEAKSELF(weakSelf)  __weak __typeof(&*self)weakSelf = self;

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor orangeColor];
    
    WEAKSELF(weakSelf);
    
    UIView *myView1 = [[UIView alloc] init];
    myView1.backgroundColor = [UIColor greenColor];
    [self.view addSubview:myView1];
    
    [myView1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(weakSelf.view.mas_top).offset(100);
        make.left.equalTo(weakSelf.view).offset(50);
        make.size.mas_equalTo(CGSizeMake(200, 300));
    }];
    
    UIView *myView2 = [[UIView alloc] init];
    myView2.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:myView2];
    
    [myView2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(weakSelf.view).offset(-100);
        make.right.mas_equalTo(weakSelf.view.mas_right).offset(-50);
        make.size.mas_equalTo(CGSizeMake(200, 300));
    }];
    
    // 为什么要使用 Masonry 进行布局呢，这就是一个例子，方便，简单，快捷
    UIView *myView3 = [[UIView alloc] init];
    myView3.backgroundColor = [UIColor redColor];
    [self.view addSubview:myView3];
    
    [myView3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
        
        /* 等价于
         make.top.equalTo(weakSelf.view).offset(10);
         make.left.equalTo(weakSelf.view).offset(10);
         make.bottom.equalTo(weakSelf.view).offset(-10);
         make.right.equalTo(weakSelf.view).offset(-10);
         */
        
        /* 也等价于
         make.top.left.bottom.right.equalTo(weakSelf.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
         */
    }];
}