您當前位置：首頁 > php開源 > 綜合技術 > Masonry介紹與使用實踐：快速上手Autolayout

Masonry介紹與使用實踐：快速上手Autolayout

來源：程序員人生發布時間：2016-07-04 09:11:42 閱讀次數：2736次

1	`MagicNumber -> autoresizingMask -> autolayout`

以上是純手寫代碼所經歷的關于頁面布局的3個時期

在iphone1-iphone3gs時期 window的size固定為(320,480) 我們只需要簡單計算1下相對位置就行了

在iphone4-iphone4s時期蘋果推出了retina屏但是給了碼農們非常大的福利:window的size不變

在iphone5-iphone5s時期 window的size變了(320,568) 這時候autoresizingMask派上了用處(為啥這時候候不用Autolayout? 由于還要支持ios5唄) 簡單的適配1下便可

在iphone6+時期 window的width也產生了變化(相對5和5s的屏幕比例沒有變化) 終究是時候拋棄autoresizingMask改用autolayout了(不用支持ios5了相對屏幕適配的多樣性來講autoresizingMask也已過時了)

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

直到iPhone6發布以后我知道使用autolayout勢在必行了這時候想起了之前在閱讀Github看到過的1個第3方庫Masonry 在花了幾個小時的研究使用后我就將autolayout掌握了(重點是我并沒有學習任何的官方文檔或其他的關于autolayout的知識) 這就是我為何要寫下這篇文章來推薦它的緣由.

介紹

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

Masonry是1個輕量級的布局框架具有自己的描寫語法采取更優雅的鏈式語法封裝自動布局簡潔明了并具有高可讀性而且同時支持 iOS 和 Max OS X。

我們先來看1段官方的sample code來認識1下Masonry

1

2

3

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

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

}];

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

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

使用

看1下Masonry支持哪1些屬性

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