iOS Masonry使用詳解

1 magicnumber -> autoresizingmask -> autolayout

以上是純手寫**所經歷的關於頁面布局的三個時期

那如何快速的上手autolayout呢? 說實話當年ios6推出的同時新增了autolayout的特性我看了一下官方文件和demo 就立馬拋棄到一邊了因為實在過於的繁瑣和囉嗦(有過經驗的朋友肯定有同感)

直到iphone6發布之後我知道使用autolayout勢在必行了這時想起了以前在瀏覽github看到過的乙個第三方庫masonry 在花了幾個小時的研究使用後我就將autolayout掌握了(重點是我並沒有學習任何的官方文件或者其他的關於autolayout的知識) 這就是我為什麼要寫下這篇文章來推薦它的原因。

masonry 原始碼

masonry是乙個輕量級的布局框架擁有自己的描述語法採用更優雅的鏈式語法封裝自動布局簡潔明瞭並具有高可讀性而且同時支援 ios 和 max os x

我們先來看一段官方的sample code來認識一下masonry

1 [view1 mas_makeconstraints:^(masconstraintmaker *make) ];

看到block裡面的那句話:make edges equalto superview with insets

通過鏈式的自然語言就把view1給autolayout好了是不是簡單易懂?

看一下masonry支援哪一些屬性

1 @property (nonatomic, strong, readonly) masconstraint *left;
2 @property (nonatomic, strong, readonly) masconstraint *top;
3 @property (nonatomic, strong, readonly) masconstraint *right;
4 @property (nonatomic, strong, readonly) masconstraint *bottom;
5 @property (nonatomic, strong, readonly) masconstraint *leading;
6 @property (nonatomic, strong, readonly) masconstraint *trailing;
7 @property (nonatomic, strong, readonly) masconstraint *width;
8 @property (nonatomic, strong, readonly) masconstraint *height;
9 @property (nonatomic, strong, readonly) masconstraint *centerx;
10 @property (nonatomic, strong, readonly) masconstraint *centery;
11 @property (nonatomic, strong, readonly) masconstraint *baseline;

這些屬性與nslayoutattrubute的對照表如下

其中leading與left trailing與right 在正常情況下是等價的但是當一些布局是從右至左時(比如阿拉伯文?沒有類似的經驗) 則會對調換句話說就是基本可以不理不用用left和right就好了

在ios8發布後又新增了一堆奇奇怪怪的屬性(有興趣的朋友可以去瞅瞅) masonry暫時還不支援(不過你要支援ios6,ios7 就沒必要去管那麼多了)

在講例項之前先介紹乙個macro

1#define ws(weakself) __weak __typeof(&*self)weakself = self;

快速的定義乙個weakself 當然是用於block裡面啦下面進入正題(為了方便我們測試的superview都是乙個size為(300,300)的uiview)

下面通過一些簡單的例項來簡單介紹如何輕鬆愉快的使用masonry:

那麼在使用之前我們需要匯入masonry框架，這裡我使用的是cocopoads來給專案加入masonry，對於不會使用cocoapods的此鏈結來配置

點此跳轉配置//

// viewcontroller.m

// ios_自動布局之masonry

//// created by 高宇 on 16/7/5.

//#import "viewcontroller.h"

#import

@inte***ce viewcontroller ()

@end

@implementation viewcontroller

- (uiview *)view1

return

_view1;

}- (uiview *)view2

return

_view2;

}- (uiview *)view3

return

_view3;

}- (void)viewdidload

- (void)setframe];[

self

.view2 mas_makeconstraints

:^(masconstraintmaker *make) ];

[self

.view3 mas_makeconstraints

:^(masconstraintmaker *make) ];

}- (void)didreceivememorywarning

@end

**就這些，其實沒有什麼難的，執行結果如圖：

怎麼樣，不僅僅是對豎屏進行適配，還對手機橫屏進行了適配，是不是很簡單！

不多加述說了，直接上**給你們看看：

//// viewcontroller.m

// ios_自動布局之masonry的中級使用

//// created by 高宇 on 16/7/5.

//#import "viewcontroller.h"

#import

@inte***ce viewcontroller ()

@end

@implementation viewcontroller

- (uiscrollview *) scrollview

return _scrollview; }

- (void)viewdidload

- (void)setframe

];uiview *container = [uiview

new];

// container.backgroundcolor = [uicolor redcolor];

[self.scrollview

addsubview:container];

[container mas_makeconstraints:^(masconstraintmaker *make) ];

int count = 10;

uiview *lastview = nil;

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

else}];

lastview = subv;

}[container mas_makeconstraints:^(masconstraintmaker *make) ];

}- (void)didreceivememorywarning

@end

**是不是很少，執行結果如圖所示：

scrollview是可以滑動的額，是不是很簡單呀，祝大家在ios這條路上越走越好，謝啦！

iOS Masonry使用詳解

iOS Masonry的簡單使用

iOS Masonry實現多個Button對齊布局

iOS Masonry 抗壓縮抗拉伸

iOS Masonry使用詳解

iOS Masonry的簡單使用

iOS Masonry實現多個Button對齊布局

iOS Masonry 抗壓縮 抗拉伸

相關推薦

iOS Masonry 抗壓縮抗拉伸