Masonry簡(jiǎn)介
Masonry是一個(gè)輕量級(jí)的布局框架亭罪，擁有自己的描述語法伊佃，采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝AutoLayout，簡(jiǎn)潔明了并具有高可讀性，而且同時(shí)支持 iOS 和 Max OS X
下載鏈接 Masonry
Masonry配置
使用pods方式引入類庫絮识，pod 'Masonry'
引入頭文件 #import "Masonry.h"
Masonry使用
示例：
[testView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.view.mas_left).offset(50);
make.right.mas_equalTo(self.view.mas_right).offset(-50);
make.top.mas_equalTo(self.view.mas_top).offset(50);
make.bottom.mas_equalTo(self.view.mas_bottom).offset(-50);
}];
基本格式：（make . 指定其的一個(gè)屬性 . 約束關(guān)系）
make.attr.constrains
make:可認(rèn)為是要布局的view的代理
constrains:約束可能是多級(jí)的組合，比如.mas_equalTo(self.view.mas_left).offset(50)的兩級(jí)組合嗽上，顯示找到父view的左邊位置次舌，再向右（X軸）移動(dòng)50點(diǎn)
給控件添加、更新約束
-
添加新的約束
[xxxView mas_makeConstraints:^(MASConstraintMaker *make) { }]; -
刪除控件以前所有約束兽愤，添加新約束
[xxxView mas_remakeConstraints:^(MASConstraintMaker *make) { }]; -
更新約束彼念，寫哪條更新哪條，其他約束不變
[xxxView mas_updateConstraints:^(MASConstraintMaker *make) { }];
關(guān)于更新約束布局相關(guān)的API浅萧，主要用以下四個(gè)API：
-(void)updateConstraintsIfNeeded調(diào)用此方法逐沙，如果有標(biāo)記為需要重新布局的約束，則立即進(jìn)行重新布局洼畅，內(nèi)部會(huì)調(diào)用updateConstraints方法
-(void)updateConstraints重寫此方法吩案，內(nèi)部實(shí)現(xiàn)自定義布局過程
-(BOOL)needsUpdateConstraints當(dāng)前是否需要重新布局，內(nèi)部會(huì)判斷當(dāng)前有沒有被標(biāo)記的約束
-(void)setNeedsUpdateConstraints標(biāo)記需要進(jìn)行重新布局
關(guān)于UIView重新布局相關(guān)的API帝簇，主要用以下三個(gè)API：
-(void)setNeedsLayout標(biāo)記為需要重新布局
-(void)layoutIfNeeded查看當(dāng)前視圖是否被標(biāo)記需要重新布局徘郭，有則在內(nèi)部調(diào)用layoutSubviews方法進(jìn)行重新布局
-(void)layoutSubviews重寫當(dāng)前方法，在內(nèi)部完成重新布局操作
設(shè)置約束關(guān)系
| 約束關(guān)系 | 說明 |
|---|---|
| equalTo() 和 mas_equalTo() | 設(shè)置屬性等于某個(gè)數(shù)值 |
| greaterThanOrEqualTo() 和 mas_ greaterThanOrEqualTo() | 設(shè)置屬性大于或等于某個(gè)數(shù)值 |
| lessThanOrEqualTo() 和 mas_ lessThanOrEqualTo() | 設(shè)置屬性小于或等于某個(gè)數(shù)值 |
| multipliedBy() 和 mas_ multipliedBy() | 設(shè)置屬性乘以因子后的值 |
| dividedBy() 和 mas_ dividedBy() | 設(shè)置屬性除以因子后的值 |
設(shè)置控件布局屬性
| 布局屬性 | 說明 |
|---|---|
| 尺寸 | width丧肴、height残揉、size |
| 邊距 | left、top芋浮、right抱环、bottom、leading纸巷、trailing |
| 中心點(diǎn) | center镇草、centerX、centerY |
| 邊界 | edges |
//iOS8之后Masonry新出了幾個(gè)屬性：
//距離邊框的距離何暇，等同于選中Storyboard的Constrain to margins后加約束
@property (nonatomic, strong, readonly) MASConstraint *leftMargin;
@property (nonatomic, strong, readonly) MASConstraint *rightMargin;
@property (nonatomic, strong, readonly) MASConstraint *topMargin;
@property (nonatomic, strong, readonly) MASConstraint *bottomMargin;
@property (nonatomic, strong, readonly) MASConstraint *leadingMargin;
@property (nonatomic, strong, readonly) MASConstraint *trailingMargin;
@property (nonatomic, strong, readonly) MASConstraint *centerXWithinMargins;
@property (nonatomic, strong, readonly) MASConstraint *centerYWithinMargins;
其中l(wèi)eading與left陶夜，trailing與right 在正常情況下是等價(jià)的，但是當(dāng)一些布局是從右至左時(shí)(比如阿拉伯文) 則會(huì)對(duì)調(diào)
關(guān)于mas_xxx和xxx的比較
-
以equalTo() 和 mas_equalTo()為例
#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__)))默認(rèn)情況下
equalTo()：參數(shù)支持的類型除了NSNumber之外裆站，還有CGPoint CGSize UIEdgeInsets
mas_equalTo()： 對(duì)其參數(shù)進(jìn)行了一個(gè)Auto Boxing操作(裝箱) MASBoxValue(根據(jù)傳入?yún)?shù)類型的不同条辟，裝箱成 NSValue 或 NSNumber 類型的對(duì)象)黔夭，對(duì)參數(shù)并不挑剔，幾乎是傳啥數(shù)據(jù)類型都可以對(duì)于對(duì)象或是多個(gè)屬性的處理羽嫡，使用equalTo本姥。特別是多個(gè)屬性時(shí)，必須使用equalTo
-
添加下面的宏（必須加在
#import "Masonry.h"前面）#define MAS_SHORTHAND_GLOBALS代碼里mas_equalTo可以不加mas前綴杭棵，mas_equalTo和equalTo沒有區(qū)別
[redView mas_makeConstraints:^(MASConstraintMaker *make) { make.width.equalTo(100); make.height.mas_equalTo(100); }];
-
以width() 和 mas_width()為例
默認(rèn)情況下
width()：make對(duì)象的一個(gè)屬性婚惫，用來添加寬度約束，表示對(duì)寬度進(jìn)行約束
mas_width()：一個(gè)屬性值魂爪，用來當(dāng)做equalTo的參數(shù)先舷，表示某個(gè)控件的寬度屬性-
添加下面的宏（必須加在
#import "Masonry.h"前面）#define MAS_SHORTHAND代碼里mas_width可以不加mas前綴
[redView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.mas_equalTo(self.left).offset(10); make.top.mas_equalTo(self.top).offset(10); make.right.mas_equalTo(self.right).offset(-10); make.bottom.mas_equalTo(self.bottom).offset(-10); }];
設(shè)置約束偏移
| 方法 | 參數(shù) | 說明 |
|---|---|---|
| offset(CGFloat offset) | CGFloat | 控件屬性相對(duì)于參照物偏移多少 |
| centerOffset(CGPoint offset) | CGPoint | 控件center相對(duì)于參照物的偏移大小 |
| sizeOffset(CGSize offset) | CGSize | 控件size相對(duì)于參照物偏移多少 |
| insets(MASEdgeInsets insets) | MASEdgeInsets | 控件四邊相對(duì)于參照物偏移多少 |
offset示例
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.mas_left).offset(20);
make.top.mas_equalTo(self.mas_top).offset(20);
make.right.mas_equalTo(self.mas_right).offset(-20);
make.bottom.mas_equalTo(self.mas_bottom).offset(-20);
}];
centerOffset示例
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(100);
make.center.equalTo(self).centerOffset(CGPointMake(-100, -100));
}];
sizeOffset示例
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(self);
make.width.and.height.mas_equalTo(self).sizeOffset(CGSizeMake(-40, -40));
}];
insets示例
//具體父控件四周都是20間距
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(self).insets(UIEdgeInsetsMake(20, 20, 20, 20));
}];
設(shè)置約束優(yōu)先級(jí)
-
Masonry為我們提供了三個(gè)默認(rèn)的方法，priorityLow()滓侍、priorityMedium()蒋川、priorityHigh()，優(yōu)先級(jí)最大數(shù)值是1000
typedef UILayoutPriority MASLayoutPriority; static const MASLayoutPriority MASLayoutPriorityRequired = UILayoutPriorityRequired; static const MASLayoutPriority MASLayoutPriorityDefaultHigh = UILayoutPriorityDefaultHigh; static const MASLayoutPriority MASLayoutPriorityDefaultMedium = 500; static const MASLayoutPriority MASLayoutPriorityDefaultLow = UILayoutPriorityDefaultLow; static const MASLayoutPriority MASLayoutPriorityFittingSizeLevel = UILayoutPriorityFittingSizeLevel; -
自己設(shè)置優(yōu)先級(jí)的值撩笆，可以通過priority()方法來設(shè)置
[redView mas_makeConstraints:^(MASConstraintMaker *make) { make.center.mas_equalTo(self.view); make.width.mas_equalTo(100).priorityLow(); make.width.mas_equalTo(50).priorityHigh(); make.height.mas_equalTo(50).priority(200); make.height.mas_equalTo(100).priority(800); }];
設(shè)置約束連詞
with和and捺球，放到表達(dá)式中，卻可以作為連詞讓鏈?zhǔn)奖磉_(dá)式更接近自然語言
//什么也沒有做夕冲，只是返回自己本身
- (MASConstraint *)with {
return self;
}
- (MASConstraint *)and {
return self;
}
示例：以下三句作用效果一致
make.width.width.height.equalTo(@100);
make.width.and.height.equalTo(@100);
make.width.height.equalTo(@100);
Masonry注意
- 使用Masonry添加約束之前氮兵，需要在addSubview之后才能使用，否則會(huì)導(dǎo)致崩潰
- 在添加約束時(shí)常會(huì)出現(xiàn)一些錯(cuò)誤歹鱼，約束出現(xiàn)問題的原因一般就是兩種：約束沖突和缺少約束泣栈。對(duì)于這兩種問題，可以通過調(diào)試和log排查
