Masonry 使用 纯代码画面
Masonry 是一个很方便的框架, 用来给控件做约束.
它的语法很直观, 就跟一句英语没什么区别.
Masonry 简单认识
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 | 左侧 |
| top | 上侧 |
| right | 右侧 |
| bottom | 下侧 |
| leading | 首侧 |
| trailing | 尾侧 |
| width | 宽度 |
| height | 高度 |
| centerX | X方向中点 |
| centerY | Y方向中点 |
| baseline | 基线 |
导入到工程
- 直接在github上下载, 然后把Masonry文件夹拖拽到工程中.
- 使用cocoapods
github地址 : https://github.com/Masonry/Masonry
懒得去的话 :git clone https://github.com/SnapKit/Masonry.git
使用
练习1: 使一个控件居中
导入 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的时候, 要先把控件加到父视图上, 再进行约束
[view mas_makeConstraints:^(MASConstraintMaker *make) {
// 设置view居中
make.center.equalTo(weakSelf.view);
// 设置size
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
}
如果在添加父视图之前进行约束, 就会得到这个异常 :
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;
所谓的 链式语法 这里还不是太明显 ...
一个 block 指定一个控件的 frame. 在任何设备上都好用, 这就是 Masonry 的作用.
效果如下 : (话说这图也太大了)
Masonry 中给控件设置约束的3个函数
上面用到了 mas_makeConstraints: 这个方法, 从名字可以看出来这是为控件设置约束用的方法, 这样的方法:
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
mas_makeConstraints: 只负责新增约束, Autolayout不能同时存在两条针对于同一对象的约束, 否则会报错.
mas_updateConstraints: 针对上面的情况, 会更新在block中出现的约束, 不会导致出现两个相同约束的情况.
mas_remakeConstraints: 则会清除之前的所有约束, 仅保留最新的约束.
mas_equalTo
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
#define MASBoxValue(value) _MASBoxValue(@encode(__typeof__((value))), (value))
mas_equelTo() 括号里放具体的数字或者边界(top, left ...)
equelTo() 括号里放对象(view, 约束什么的)
_MASBoxValue()是一个C函数, 功能如下:
/**
* Given a scalar or struct value, wraps it in NSValue
* Based on EXPObjectify: https://github.com/specta/expecta
*/
练习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设置约束有几种方式, 可以设置top bottom left right, 也可以使用如下设置:
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
这里链式语法就能够体现出来了, 就和一个英文句子一样, 约束好了一个view.
上面那种, 是用绝对的距离, 也就是坐标点的差. 下面这种, 利用了系统的UIEdge是对上左下右进行设置, 是相对距离. 其中的差别就是体现在参数的正负上.
这里有个很有意思的地方: with和and
- (MASConstraint *)with {
return self;
}
- (MASConstraint *)and {
return self;
}
这两个函数, 就是为了配合链式语法写的. 使用的时候有没有都是一样的.
练习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);
}];
效果如下图:
链接：https://www.jianshu.com/p/6f409c57e75e
