Masonry是一個(gè)輕量級(jí)的布局框架，擁有自己的描述語(yǔ)法，采用更優(yōu)雅的鏈?zhǔn)秸Z(yǔ)法封裝自動(dòng)布局，簡(jiǎn)潔明了并具有高可讀性，而且同時(shí)支持 iOS 和 Max OS X。Masonry是一個(gè)用代碼寫(xiě)iOS或OS界面的庫(kù)，可以代替Auto layout。Masonry的github地址：https://github.com/SnapKit/Masonry
Masonry使用講解:
mas_makeConstraints 是給view添加約束，約束有幾種，分別是邊距，寬，高，左上右下距離，基準(zhǔn)線(xiàn)。添加過(guò)約束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正。
語(yǔ)法一般是 make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍數(shù)和位移修正。
注意點(diǎn)1： 使用 mas_makeConstraints方法的元素必須事先添加到父元素的中，例如[self.view addSubview:view];
注意點(diǎn)2： masequalTo 和 equalTo 區(qū)別：masequalTo 比equalTo多了類(lèi)型轉(zhuǎn)換操作，一般來(lái)說(shuō)，大多數(shù)時(shí)候兩個(gè)方法都是 通用的，但是對(duì)于數(shù)值元素使用mas_equalTo。對(duì)于對(duì)象或是多個(gè)屬性的處理，使用equalTo。特別是多個(gè)屬性時(shí)，必須使用equalTo,例如 make.left.and.right.equalTo(self.view);
注意點(diǎn)3: 注意到方法with和and,這連個(gè)方法其實(shí)沒(méi)有做任何操作，方法只是返回對(duì)象本身，這這個(gè)方法的左右完全是為了方法寫(xiě)的時(shí)候的可讀性 。make.left.and.right.equalTo(self.view);和make.left.right.equalTo(self.view);是完全一樣的，但是明顯的加了and方法的語(yǔ)句可讀性 更好點(diǎn)。
下面帶著例子來(lái)看一下基礎(chǔ)用法，假設(shè)我們現(xiàn)在的需求是：
1.我們現(xiàn)在只能確定我們控件的寬高以及左右的邊距，需要對(duì)上下進(jìn)行自動(dòng)適應(yīng)。
2.假設(shè)我們現(xiàn)在有四個(gè)控件，需要布局的界面是這個(gè)樣子的
豎屏效果：
橫屏效果：
第一步：在我們的控制器中導(dǎo)入Masonry所需要的文件
#define MAS_SHORTHAND
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h"
第二步：在控制器中添加以下三個(gè)占位視圖并設(shè)置顏色
//上面的占位視圖
UIView *topView = UIView.new;
topView.backgroundColor = [UIColor redColor];
[self.view addSubview:topView];
//中間的占位視圖
UIView *centerView = UIView.new;
centerView.backgroundColor = [UIColor grayColor];
[self.view addSubview:centerView];
//下面的占位視圖
UIView *bottomView = UIView.new;
bottomView.backgroundColor = [UIColor blackColor];
[self.view addSubview:bottomView];
第三步：開(kāi)始分別給三個(gè)占位視圖添加約束
//給上面的占位視圖添加約束
[topView makeConstraints:^(MASConstraintMaker *make) { //頭部及左邊距分別為0
make.top.left.equalTo(self.view).offset(0);
//三個(gè)占位視圖的高度等高
make.height.equalTo(@[centerView,bottomView]);
//設(shè)置top視圖的高度
make.width.equalTo(100);
}];
//中間視圖的需要添加以下約束，高度、左邊以及與上方占位視圖的關(guān)系
[centerView makeConstraints:^(MASConstraintMaker *make) {
//左邊的約束
make.left.equalTo(self.view).offset(0);
//設(shè)置三個(gè)占位視圖等高
make.width.equalTo(@[topView,bottomView]);
//設(shè)置中間占位視圖與上方視圖的關(guān)聯(lián)約束
make.top.equalTo(topView.bottom).offset(150);
}];
//下面的約束主要設(shè)置下面的與中間視圖的約束以及本身左邊距的約束
[bottomView makeConstraints:^(MASConstraintMaker *make) {
make.left.bottom.equalTo(self.view).offset(0);
make.top.equalTo(centerView.bottom).offset(150);
}];
到了，這里。我們的三個(gè)占位視圖已經(jīng)基本完成了。那么讓我們運(yùn)行一下看下效果：
由此我們發(fā)現(xiàn)中間空出的部分正好就是我們控件所需的位置了，那么下面我們就開(kāi)始進(jìn)行對(duì)控件的布局了。首先還是添加需要的左邊的控件
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
[self.view addSubview:imageView1];
UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
[self.view addSubview:imageView2];
//然后對(duì)這兩個(gè)控件進(jìn)行布局
[imageView1 makeConstraints:^(MASConstraintMaker *make) {
//分別設(shè)置起寬高
make.width.height.equalTo(150);
//左邊的邊距
make.left.equalTo(self.view).offset(0);
//設(shè)置其與上面占位視圖和下面占位視圖的間距
make.top.equalTo(topView.bottom).offset(0);
make.bottom.equalTo(centerView.top).offset(0);
//控件2同上。
[imageView2 makeConstraints:^(MASConstraintMaker *make) {
make.width.height.equalTo(150);
make.left.equalTo(self.view).offset(0);
make.top.equalTo(centerView.bottom).offset(0);
make.bottom.equalTo(bottomView.top).offset(0);
}];
代碼到了這里左邊的控件約束基本布局完成了，讓我們來(lái)看一下運(yùn)行的效果吧。
到了這里我們就可以對(duì)右邊的控件進(jìn)行布局了?；谥暗慕?jīng)驗(yàn)我們就會(huì)發(fā)現(xiàn)右邊的約束只需要添加本身的寬、高和右邊邊距以及基于左邊控件的centerY值就足夠了。好了，我們開(kāi)始吧。
UIImageView *imageView3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
[self.view addSubview:imageView3];
UIImageView *imageView4 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
[self.view addSubview:imageView4];
//該控件與左邊的控件的關(guān)聯(lián)
[imageView3 makeConstraints:^(MASConstraintMaker *make) {
make.width.height.equalTo(150);
make.right.equalTo(self.view).offset(0);
make.centerY.equalTo(imageView1);
}];
//同上
[imageView4 makeConstraints:^(MASConstraintMaker *make) {
make.width.height.equalTo(150);
make.right.equalTo(self.view).offset(0);
make.centerY.equalTo(imageView2);
}];
到了這里基本上是大功告成了，到了這里只需要要把三個(gè)占位視圖的背景顏色設(shè)置為透明就好了。
//另外兩個(gè)也是
bottomView.backgroundColor = [UIColor clearColor];
運(yùn)行效果如圖：
到了這里我們基本上就把基本的占位視圖的介紹了聯(lián)系完了。通過(guò)聯(lián)系你可能會(huì)發(fā)現(xiàn)，無(wú)論是在StoryBoary上添加約束還是通過(guò)編碼進(jìn)行的智能布局都是基于對(duì)父控件或者對(duì)其他控件進(jìn)行的關(guān)聯(lián)。當(dāng)然了如果你對(duì)AutoLayout的編碼布局的話(huà)就可能就會(huì)覺(jué)得Masonry真的是好用的爆了。當(dāng)然了，這么強(qiáng)大的Masonry，提供的功能也是很多的，這些就要靠大家來(lái)探索了，嘿嘿。
