常用的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
#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 到基础视图中，否则就会报错，错误提示如下
[图片上传中。。。（1）]

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

#import "ViewController.h"
#import
#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));
*/
}];
}