Masonry 是一個很方便的框架, 用來給控件做約束.
它的語法很直觀, 就跟一句英語沒什么區(qū)別.
Masonry 簡單認(rèn)識
Masonry 支持的約束 :
MASConstraintMaker.h文件中
/**
* The following properties return a new MASViewConstraint
* with the first item set to the makers associated view and the appropriate MASViewAttribute
*/
@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;
| name | 用中國話說 |
|---|---|
| left | 左側(cè) |
| top | 上側(cè) |
| right | 右側(cè) |
| bottom | 下側(cè) |
| leading | 首側(cè) |
| trailing | 尾側(cè) |
| width | 寬度 |
| height | 高度 |
| centerX | X方向中點 |
| centerY | Y方向中點 |
| baseline | 基線 |
導(dǎo)入到工程
- 直接在github上下載, 然后把Masonry文件夾拖拽到工程中.
- 使用cocoapods
github地址 : https://github.com/Masonry/Masonry
懶得去的話 :git clone https://github.com/SnapKit/Masonry.git
使用
練習(xí)1: 使一個控件居中
導(dǎo)入 Masonry.h 頭文件.
- (void)createView {
// typeof 一個weak引用的self, 方便在block中使用
__weak typeof(self) weakSelf = self;
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view];
// 這里要注意, 使用masonry的時候, 要先把控件加到父視圖上, 再進(jìn)行約束
[view mas_makeConstraints:^(MASConstraintMaker *make) {
// 設(shè)置view居中
make.center.equalTo(weakSelf.view);
// 設(shè)置size
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
}
如果在添加父視圖之前進(jìn)行約束, 就會得到這個異常 :
Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'couldn't find a common superview for <UIView: 0x7f92cb61c400; frame = (0 0; 0 0); layer = <CALayer: 0x7f92cb60f6d0>> and <UIView: 0x7f92cb60c8b0; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f92cb609740>>'
Note. 定義一個weakSelf MACRO
#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self;
所謂的 鏈?zhǔn)秸Z法 這里還不是太明顯 ...
一個 block 指定一個控件的 frame. 在任何設(shè)備上都好用, 這就是 Masonry 的作用.
效果如下 : (話說這圖也太大了)
Masonry 中給控件設(shè)置約束的3個函數(shù)
上面用到了 mas_makeConstraints: 這個方法, 從名字可以看出來這是為控件設(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不能同時存在兩條針對于同一對象的約束, 否則會報錯.
mas_updateConstraints: 針對上面的情況, 會更新在block中出現(xiàn)的約束, 不會導(dǎo)致出現(xiàn)兩個相同約束的情況.
mas_remakeConstraints: 則會清除之前的所有約束, 僅保留最新的約束.
mas_equalTo
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
#define MASBoxValue(value) _MASBoxValue(@encode(__typeof__((value))), (value))
mas_equelTo() 括號里放具體的數(shù)字或者邊界(top, left ...)
equelTo() 括號里放對象(view, 約束什么的)
_MASBoxValue()是一個C函數(shù), 功能如下:
/**
* Given a scalar or struct value, wraps it in NSValue
* Based on EXPObjectify: https://github.com/specta/expecta
*/
練習(xí)2: 在一個控件中布局其他控件(單個)
在剛才的view中, 添加一個view, 使這個view居中, 大小略小.
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor blackColor];
[view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(view).with.offset(10);
make.bottom.equalTo(view).with.offset(-10);
make.left.equalTo(view).with.offset(10);
make.right.equalTo(view).with.offset(-10);
}];
這里使用Masonry設(shè)置約束有幾種方式, 可以設(shè)置top bottom left right, 也可以使用如下設(shè)置:
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
這里鏈?zhǔn)秸Z法就能夠體現(xiàn)出來了, 就和一個英文句子一樣, 約束好了一個view.
上面那種, 是用絕對的距離, 也就是坐標(biāo)點的差. 下面這種, 利用了系統(tǒng)的UIEdge是對上左下右進(jìn)行設(shè)置, 是相對距離. 其中的差別就是體現(xiàn)在參數(shù)的正負(fù)上.
這里有個很有意思的地方: with和and
- (MASConstraint *)with {
return self;
}
- (MASConstraint *)and {
return self;
}
這兩個函數(shù), 就是為了配合鏈?zhǔn)秸Z法寫的. 使用的時候有沒有都是一樣的.
練習(xí)3: 在一個控件中布局其他控件(兩個)
要求: 在一個view中, 約束兩個view, 大小一致, 并排居中.
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor whiteColor];
[view1 addSubview:view2];
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor whiteColor];
[view1 addSubview:view3];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(view1.mas_centerY);
make.left.equalTo(view1).with.offset(10);
make.right.equalTo(view3.mas_left).with.offset(-10);
make.height.mas_equalTo(@100);
make.width.equalTo(view3);
}];
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(view1.mas_centerY);
make.left.equalTo(view2.mas_right).with.offset(10);
make.right.equalTo(view1).with.offset(-10);
make.height.mas_equalTo(@100);
make.width.equalTo(view2);
}];
效果如下圖:
