Masonry的使用

（一）Masonry介紹

Masonry是一個輕量級的布局框架 擁有自己的描述語法 采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝自動布局 ，支持 iOS 和 Max OS X。 Masonry是一個用代碼寫iOS或os界面的庫，可以代替Auto layout。 Masonry的github地址：https://github.com/SnapKit/Masonry。

（二）Masonry使用講解

自動布局中屬性對照表mas_makeConstraints 是給view添加約束，約束有幾種，分別是邊距，寬，高，左上右下距離，基準(zhǔn)線。添加過約束后可以有修正，修正 有offset（位移）修正和multipliedBy（倍率）修正

@property?(nonatomic,?strong,?readonly)?MASConstraint?*left;? ? //左側(cè)

@property?(nonatomic,?strong,?readonly)?MASConstraint?*top;? //上側(cè)

@property?(nonatomic,?strong,?readonly)?MASConstraint?*right; //右側(cè)

@property?(nonatomic,?strong,?readonly)?MASConstraint?*bottom; //下側(cè)

@property?(nonatomic,?strong,?readonly)?MASConstraint?*leading; //首部

@property?(nonatomic,?strong,?readonly)?MASConstraint?*trailing; //尾部

@property?(nonatomic,?strong,?readonly)?MASConstraint?*width; //寬

@property?(nonatomic,?strong,?readonly)?MASConstraint?*height; //高

@property?(nonatomic,?strong,?readonly)?MASConstraint?*centerX; //橫向中點(diǎn)

@property?(nonatomic,?strong,?readonly)?MASConstraint?*centerY; //縱向中點(diǎn)

@property?(nonatomic,?strong,?readonly)?MASConstraint?*baseline; //文本基線

語法一般是 make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍數(shù)和位移修正

注意點(diǎn)1： 使用 mas_makeConstraints方法的元素必須事先添加到父元素的中，例如[self.view addSubview:view];

注意點(diǎn)2： mas_equalTo 和 equalTo 區(qū)別：mas_equalTo 比equalTo多了類型轉(zhuǎn)換操作，一般來說，大多數(shù)時候兩個方法都是 通用的，但是對于數(shù)值元素使用mas_equalTo。對于對象或是多個屬性的處理，使用equalTo。特別是多個屬性時，必須使用equalTo,例如 make.left.and.right.equalTo(self.view);

注意點(diǎn)3: 注意到方法with和and,這連個方法其實沒有做任何操作，方法只是返回對象本身，這這個方法的左右完全是為了方法寫的時候的可讀性 。make.left.and.right.equalTo(self.view);和make.left.right.equalTo(self.view);是完全一樣的，但是明顯的加了and方法的語句可讀性 更好點(diǎn)。

本文會簡單的講解一下如何使用Masonry 進(jìn)行布局。

示例一：

如圖所示，一共四個View，第一個view，在Controller中處于上下等邊距，左右等邊距的位置，也就是說，這個view的中心點(diǎn)和self.view的中點(diǎn)相同

所以，我們進(jìn)行布局的時候，只需要設(shè)置其大小即可，如果，你想要這個view的大小隨著屏幕能夠進(jìn)行更改，那么你可以將make.size.mas_equalTo(CGSizeMake(300, 300));更改為make.edges.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(100, 50, 100, 50));，這樣這個view就不是固定大小的view了。

第二個view,是背景色為黃色的view,你可以看到，第二個view距第一個view，uv的上下左右邊距都是10，這時候，你有很多種寫法，當(dāng)然，筆者建議的寫法是make.edges.equalTo(uv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));一句搞定，簡單易懂。

有時候開發(fā)的過程中，產(chǎn)品或者UI設(shè)計出來的圖需要兩個大小相同邊距view或者button，并排排列在同一個view上，且，不論橫屏或者豎屏都不變大小，這時候，怎么辦呢，這時候，你可以在view的中間設(shè)計一個占位view，設(shè)置邊距，不設(shè)置大小，大小隨著屏幕變化而變化即可。

事例2.

使用masonry 布局一個計算器，根據(jù)圖，我們知這個鍵盤是一個五行四列的布局，顯示的view是一個view和label的結(jié)合布局，那么我們需要如果去編寫代碼呢？

首先呢，我們可以先布頂部的View和label，布完以后，進(jìn)行鍵盤的布局，鍵盤上所有按鈕，放在一個背景view上，這個背景view左右緊挨著self.view，top挨著顯示view的底部，下部緊挨著self.view的底部，所以

[keyBoardView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(backDisplayView.mas_bottom);

make.bottom.equalTo(weakSelf.view.mas_bottom);

make.right.and.left.equalTo(weakSelf.view);

}];我們就可以這樣布局。

那么背景view有了，如何進(jìn)行鍵盤內(nèi)容的布局呢，我們可以將鍵盤假設(shè)為五行四列，第五行的按鈕變?yōu)?個了，我們可以將原有的四個按鈕，第一第二個變?yōu)橐粋€，也就是說，第一個占兩個位置，第二個去除

/處理 0 合并單元格

if ([key isEqualToString:@"0"] || [key isEqualToString:@"?"]) {

if ([key isEqualToString:@"0"]) {

//? ? ? ? ? ? ? ? ? ? [keyView mas_makeConstraints:^(MASConstraintMaker *make) {

make.height.equalTo(keyBoardView.mas_height).with.multipliedBy(.2f);

make.width.equalTo(keyBoardView.mas_width).with.multipliedBy(.5f);

make.left.equalTo(keyBoardView.mas_left);

make.baseline.equalTo(keyBoardView.mas_baseline).with.multipliedBy(0.9f);

//? ? ? ? ? ? ? ? ? ? }];

}else{

[keyView removeFromSuperview];

}

}

其他的就基于multipliedBy 基于mas_baseline進(jìn)行分割即可 。

3.創(chuàng)建一個常用的視圖

這是一個開發(fā)中，常見到的一個頁面視圖。代碼也在demo中有所展示，cell定制，demo的下載地址為github.com/15395401361/HowUserMasonry.git,歡迎下載研究，喜歡的話，順便給給?。??。