Masonry介紹與使用實(shí)踐：快速上手Autolayout

前言

MagicNumber?->?autoresizingMask?->?autolayout

以上是純手寫代碼所經(jīng)歷的關(guān)于頁面布局的三個(gè)時(shí)期

在iphone1-iphone3gs時(shí)代 window的size固定為(320,480) 我們只需要簡單計(jì)算一下相對(duì)位置就好了

在iphone4-iphone4s時(shí)代蘋果推出了retina屏但是給了碼農(nóng)們非常大的福利:window的size不變

在iphone5-iphone5s時(shí)代 window的size變了(320,568) 這時(shí)autoresizingMask派上了用場(為啥這時(shí)候不用Autolayout? 因?yàn)檫€要支持ios5唄) 簡單的適配一下即可

在iphone6+時(shí)代

window的width也發(fā)生了變化(相對(duì)5和5s的屏幕比例沒有變化)

終于是時(shí)候拋棄autoresizingMask改用autolayout了(不用支持ios5了

相對(duì)于屏幕適配的多樣性來說autoresizingMask也已經(jīng)過時(shí)了)

那如何快速的上手autolayout呢? 說實(shí)話當(dāng)年ios6推出的同時(shí)新增了autolayout的特性我看了一下官方文檔和demo 就立馬拋棄到一邊了因?yàn)閷?shí)在過于的繁瑣和啰嗦(有過經(jīng)驗(yàn)的朋友肯定有同感)

直到iPhone6發(fā)布之后

我知道使用autolayout勢在必行了這時(shí)想起了以前在瀏覽Github看到過的一個(gè)第三方庫Masonry 在花了幾個(gè)小時(shí)的研究使用后

我就將autolayout掌握了(重點(diǎn)是我并沒有學(xué)習(xí)任何的官方文檔或者其他的關(guān)于autolayout的知識(shí))

這就是我為什么要寫下這篇文章來推薦它的原因.

介紹

Masonry 源碼：https://github.com/Masonry/Masonry

Masonry是一個(gè)輕量級(jí)的布局框架擁有自己的描述語法采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝自動(dòng)布局簡潔明了并具有高可讀性而且同時(shí)支持 iOS 和 Max OS X笆豁。

我們先來看一段官方的sample code來認(rèn)識(shí)一下Masonry

3[view1?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.edges.equalTo(superview).with.insets(padding);

}];

看到block里面的那句話:make edges equalTo superview with insets

通過鏈?zhǔn)降淖匀徽Z言就把view1給autolayout好了是不是簡單易懂?

使用

看一下Masonry支持哪一些屬性

@property?(nonatomic,?strong,?readonly)?MASConstraint?*left;

@property?(nonatomic,?strong,?readonly)?MASConstraint?*top;

@property?(nonatomic,?strong,?readonly)?MASConstraint?*right;

@property?(nonatomic,?strong,?readonly)?MASConstraint?*bottom;

@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;

@property?(nonatomic,?strong,?readonly)?MASConstraint?*centerY;

@property?(nonatomic,?strong,?readonly)?MASConstraint?*baseline;

這些屬性與NSLayoutAttrubute的對(duì)照表如下

其中l(wèi)eading與left trailing與right 在正常情況下是等價(jià)的但是當(dāng)一些布局是從右至左時(shí)(比如阿拉伯文?沒有類似的經(jīng)驗(yàn)) 則會(huì)對(duì)調(diào) 換句話說就是基本可以不理不用用left和right就好了

在ios8發(fā)布后又新增了一堆奇奇怪怪的屬性(有興趣的朋友可以去瞅瞅) Masonry暫時(shí)還不支持(不過你要支持ios6,ios7 就沒必要去管那么多了)

在講實(shí)例之前先介紹一個(gè)MACRO

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

快速的定義一個(gè)weakSelf 當(dāng)然是用于block里面啦下面進(jìn)入正題(為了方便我們測試的superView都是一個(gè)size為(300,300)的UIView)

下面通過一些簡單的實(shí)例來簡單介紹如何輕松愉快的使用Masonry:

1. [基礎(chǔ)] 居中顯示一個(gè)view

-?(void)viewDidLoad

{

[superviewDidLoad];

//?Do?any?additional?setup?after?loading?the?view.

WS(ws);

UIView?*sv?=?[UIViewnew];

[sv?showPlaceHolder];

sv.backgroundColor?=?[UIColor?blackColor];

[self.view?addSubview:sv];

[sv?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.center.equalTo(ws.view);

make.size.mas_equalTo(CGSizeMake(300,?300));

}];

}

代碼效果

使用我之間寫的MMPlaceHolder 可以看到superview已經(jīng)按照我們預(yù)期居中并且設(shè)置成了適當(dāng)?shù)拇笮?/p>

那么先看看這幾行代碼

//從此以后基本可以拋棄CGRectMake了

UIView?*sv?=?[UIViewnew];

//在做autoLayout之前?一定要先將view添加到superview上?否則會(huì)報(bào)錯(cuò)

[self.view?addSubview:sv];

//mas_makeConstraints就是Masonry的autolayout添加函數(shù)?將所需的約束添加到block中行了

[sv?mas_makeConstraints:^(MASConstraintMaker?*make)?{

//將sv居中(很容易理解吧?)

make.center.equalTo(ws.view);

//將size設(shè)置成(300,300)

make.size.mas_equalTo(CGSizeMake(300,?300));

}];

這里有兩個(gè)問題要分解一下

首先在Masonry中能夠添加autolayout約束有三個(gè)函數(shù)

-?(NSArray?*)mas_makeConstraints:(void(^)(MASConstraintMaker?*make))block;

-?(NSArray?*)mas_updateConstraints:(void(^)(MASConstraintMaker?*make))block;

-?(NSArray?*)mas_remakeConstraints:(void(^)(MASConstraintMaker?*make))block;

mas_makeConstraints?只負(fù)責(zé)新增約束?Autolayout不能同時(shí)存在兩條針對(duì)于同一對(duì)象的約束?否則會(huì)報(bào)錯(cuò)

mas_updateConstraints?針對(duì)上面的情況?會(huì)更新在block中出現(xiàn)的約束?不會(huì)導(dǎo)致出現(xiàn)兩個(gè)相同約束的情況

mas_remakeConstraints?則會(huì)清除之前的所有約束?僅保留最新的約束

三種函數(shù)善加利用?就可以應(yīng)對(duì)各種情況了

其次 equalTo 和 mas_equalTo的區(qū)別在哪里呢? 其實(shí) mas_equalTo是一個(gè)MACRO

#define?mas_equalTo(...)?????????????????equalTo(MASBoxValue((__VA_ARGS__)))

#define?mas_greaterThanOrEqualTo(...)????greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

#define?mas_lessThanOrEqualTo(...)???????lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

#define?mas_offset(...)??????????????????valueOffset(MASBoxValue((__VA_ARGS__)))

可以看到 mas_equalTo只是對(duì)其參數(shù)進(jìn)行了一個(gè)BOX操作(裝箱) MASBoxValue的定義具體可以看看源代碼太長就不貼出來了

所支持的類型除了NSNumber支持的那些數(shù)值類型之外就只支持CGPoint CGSize UIEdgeInsets

介紹完這幾個(gè)問題我們就繼續(xù)往下了 PS:剛才定義的sv會(huì)成為我們接下來所有sample的superView

2. [初級(jí)] 讓一個(gè)view略小于其superView(邊距為10)

UIView?*sv1?=?[UIViewnew];

[sv1?showPlaceHolder];

sv1.backgroundColor?=?[UIColor?redColor];

[sv?addSubview:sv1];

[sv1?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10,?10,?10,?10));

/*?等價(jià)于

make.top.equalTo(sv).with.offset(10);

make.left.equalTo(sv).with.offset(10);

make.bottom.equalTo(sv).with.offset(-10);

make.right.equalTo(sv).with.offset(-10);

/*?也等價(jià)于

make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10,?10,?10,?10));

}];

代碼效果

可以看到 edges 其實(shí)就是top,left,bottom,right的一個(gè)簡化分開寫也可以一句話更省事

那么為什么bottom和right里的offset是負(fù)數(shù)呢? 因?yàn)檫@里計(jì)算的是絕對(duì)的數(shù)值計(jì)算的bottom需要小魚sv的底部高度所以要-10 同理用于right

這里有意思的地方是and和with 其實(shí)這兩個(gè)函數(shù)什么事情都沒做

-?(MASConstraint?*)with{

returnself;

}

-?(MASConstraint?*)and?{

returnself;

}

但是用在這種鏈?zhǔn)秸Z法中就非常的巧妙和易懂不得不佩服作者的心思(雖然我現(xiàn)在基本都會(huì)省略)

3. [初級(jí)] 讓兩個(gè)高度為150的view垂直居中且等寬且等間隔排列間隔為10(自動(dòng)計(jì)算其寬度)

int?padding1?=?10;

[sv2?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv.mas_left).with.offset(padding1);

make.right.equalTo(sv3.mas_left).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv3);

}];

[sv3?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv2.mas_right).with.offset(padding1);

make.right.equalTo(sv.mas_right).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv2);

}];

代碼效果

這里我們?cè)趦蓚€(gè)子view之間互相設(shè)置的約束可以看到他們的寬度在約束下自動(dòng)的被計(jì)算出來了

4. [中級(jí)] 在UIScrollView順序排列一些view并自動(dòng)計(jì)算contentSize

UIScrollView?*scrollView?=?[UIScrollViewnew];

scrollView.backgroundColor?=?[UIColor?whiteColor];

[sv?addSubview:scrollView];

[scrollView?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(5,5,5,5));

}];

UIView?*container?=?[UIViewnew];

[scrollView?addSubview:container];

[container?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.edges.equalTo(scrollView);

make.width.equalTo(scrollView);

}];

int?count?=?10;

UIView?*lastView?=?nil;

for(?int?i?=?1?;?i?<=?count?;?++i?)

{

UIView?*subv?=?[UIViewnew];

[container?addSubview:subv];

subv.backgroundColor?=?[UIColor?colorWithHue:(?arc4random()?%?256?/?256.0?)

saturation:(?arc4random()?%?128?/?256.0?)?+?0.5

brightness:(?arc4random()?%?128?/?256.0?)?+?0.5

alpha:1];

[subv?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.left.and.right.equalTo(container);

make.height.mas_equalTo(@(20*i));

if(?lastView?)

{

make.top.mas_equalTo(lastView.mas_bottom);

}

else

{

make.top.mas_equalTo(container.mas_top);

}

}];

lastView?=?subv;

}

[container?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.bottom.equalTo(lastView.mas_bottom);

}];

頭部效果

尾部效果

從scrollView的scrollIndicator可以看出 scrollView的內(nèi)部已如我們所想排列好了

這里的關(guān)鍵就在于container這個(gè)view起到了一個(gè)中間層的作用能夠自動(dòng)的計(jì)算uiscrollView的contentSize

5. [高級(jí)] 橫向或者縱向等間隙的排列一組view

很遺憾 autoLayout并沒有直接提供等間隙排列的方法(Masonry的官方demo中也沒有對(duì)應(yīng)的案例) 但是參考案例3 我們可以通過一個(gè)小技巧來實(shí)現(xiàn)這個(gè)目的為此我寫了一個(gè)Category

@implementation?UIView(Masonry_LJC)

-?(void)?distributeSpacingHorizontallyWith:(NSArray*)views

{

NSMutableArray?*spaces?=?[NSMutableArray?arrayWithCapacity:views.count+1];

for(?int?i?=?0?;?i?<?views.count+1?;?++i?)

{

UIView?*v?=?[UIViewnew];

[spaces?addObject:v];

[self?addSubview:v];

[v?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.width.equalTo(v.mas_height);

}];

}

UIView?*v0?=?spaces[0];

__weak?__typeof(&*self)ws?=?self;

[v0?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.left.equalTo(ws.mas_left);

make.centerY.equalTo(((UIView*)views[0]).mas_centerY);

}];

UIView?*lastSpace?=?v0;

for(?int?i?=?0?;?i?<?views.count;?++i?)

{

UIView?*obj?=?views[i];

UIView?*space?=?spaces[i+1];

[obj?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.left.equalTo(lastSpace.mas_right);

}];

[space?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.left.equalTo(obj.mas_right);

make.centerY.equalTo(obj.mas_centerY);

make.width.equalTo(v0);

}];

lastSpace?=?space;

}

[lastSpace?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.right.equalTo(ws.mas_right);

}];

}

-?(void)?distributeSpacingVerticallyWith:(NSArray*)views

{

NSMutableArray?*spaces?=?[NSMutableArray?arrayWithCapacity:views.count+1];

for(?int?i?=?0?;?i?<?views.count+1?;?++i?)

{

UIView?*v?=?[UIViewnew];

[spaces?addObject:v];

[self?addSubview:v];

[v?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.width.equalTo(v.mas_height);

}];

}

UIView?*v0?=?spaces[0];

__weak?__typeof(&*self)ws?=?self;

[v0?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.top.equalTo(ws.mas_top);

make.centerX.equalTo(((UIView*)views[0]).mas_centerX);

}];

UIView?*lastSpace?=?v0;

for(?int?i?=?0?;?i?<?views.count;?++i?)

{

UIView?*obj?=?views[i];

UIView?*space?=?spaces[i+1];

[obj?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.top.equalTo(lastSpace.mas_bottom);

}];

[space?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.top.equalTo(obj.mas_bottom);

make.centerX.equalTo(obj.mas_centerX);

make.height.equalTo(v0);

}];

lastSpace?=?space;

}

[lastSpace?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.bottom.equalTo(ws.mas_bottom);

}];

}

@end

簡單的來測試一下

UIView?*sv11?=?[UIViewnew];

UIView?*sv12?=?[UIViewnew];

UIView?*sv13?=?[UIViewnew];

UIView?*sv21?=?[UIViewnew];

UIView?*sv31?=?[UIViewnew];

sv11.backgroundColor?=?[UIColor?redColor];

sv12.backgroundColor?=?[UIColor?redColor];

sv13.backgroundColor?=?[UIColor?redColor];

sv21.backgroundColor?=?[UIColor?redColor];

sv31.backgroundColor?=?[UIColor?redColor];

[sv?addSubview:sv11];

[sv?addSubview:sv12];

[sv?addSubview:sv13];

[sv?addSubview:sv21];

[sv?addSubview:sv31];

//給予不同的大小?測試效果

[sv11?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.centerY.equalTo(@[sv12,sv13]);

make.centerX.equalTo(@[sv21,sv31]);

make.size.mas_equalTo(CGSizeMake(40,?40));

}];

[sv12?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.size.mas_equalTo(CGSizeMake(70,?20));

}];

[sv13?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.size.mas_equalTo(CGSizeMake(50,?50));

}];

[sv21?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.size.mas_equalTo(CGSizeMake(50,?20));

}];

[sv31?mas_makeConstraints:^(MASConstraintMaker?*make)?{

make.size.mas_equalTo(CGSizeMake(40,?60));

}];

[sv?distributeSpacingHorizontallyWith:@[sv11,sv12,sv13]];

[sv?distributeSpacingVerticallyWith:@[sv11,sv21,sv31]];

[sv?showPlaceHolderWithAllSubviews];

[sv?hidePlaceHolder];

代碼效果

perfect! 簡潔明了的達(dá)到了我們所要的效果

最后編輯于：2017.12.05 02:06:25

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖昆烁，帶你破解...
沈念sama閱讀 206,378評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡蛾默，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,356評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門捉貌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來支鸡，“玉大人，你說我怎么就攤上這事趁窃∧琳酰” “怎么了？”我有些...
開封第一講書人閱讀 152,702評(píng)論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵醒陆，是天一觀的道長瀑构。經(jīng)常有香客問我，道長统求，這世上最難降的妖魔是什么检碗？我笑而不...
開封第一講書人閱讀 55,259評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任据块，我火速辦了婚禮，結(jié)果婚禮上折剃，老公的妹妹穿的比我還像新娘另假。我一直安慰自己，他們只是感情好怕犁，可當(dāng)我...
茶點(diǎn)故事閱讀 64,263評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布边篮。她就那樣靜靜地躺著，像睡著了一般奏甫。火紅的嫁衣襯著肌膚如雪戈轿。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,036評(píng)論 1贊 285
城市分裂傳說
那天阵子，我揣著相機(jī)與錄音思杯，去河邊找鬼。笑死挠进，一個(gè)胖子當(dāng)著我的面吹牛色乾，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播领突，決...
沈念sama閱讀 38,349評(píng)論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼暖璧，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了君旦？” 一聲冷哼從身側(cè)響起澎办，我...
開封第一講書人閱讀 36,979評(píng)論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎金砍，沒想到半個(gè)月后局蚀，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,469評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡捞魁，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,938評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年至会，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谱俭。...
茶點(diǎn)故事閱讀 38,059評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖宵蛀，靈堂內(nèi)的尸體忽然破棺而出昆著，到底是詐尸還是另有隱情，我是刑警寧澤术陶，帶...
沈念sama閱讀 33,703評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布凑懂，位于F島的核電站，受9級(jí)特大地震影響梧宫，放射性物質(zhì)發(fā)生泄漏接谨。R本人自食惡果不足惜摆碉，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,257評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望脓豪。院中可真熱鬧巷帝，春花似錦、人聲如沸扫夜。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,262評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽笤闯。三九已至堕阔，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間颗味，已是汗流浹背超陆。一陣腳步聲響...
開封第一講書人閱讀 31,485評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留浦马，地道東北人时呀。一個(gè)月前我還...
沈念sama閱讀 45,501評(píng)論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長得像捐韩，于是被迫代替她去往敵國和親退唠。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,792評(píng)論 2贊 345

Masonry介紹與使用實(shí)踐：快速上手Autolayout

推薦閱讀更多精彩內(nèi)容