Masonry的层层进阶

2017-01-14 10:05:23来源:http://www.jianshu.com/p/a68f82a18778作者:非典型技术宅人点击

第七城市

Masonry的官方是这么描述自己的。



Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.



However if you're using Swift in your project, we recommend using SnapKit as it provides better type safety with a simpler API.
Masonry : https://github.com/SnapKit/Masonry
SnapKit: https://github.com/SnapKit/SnapKit



2.1 Basic Grammar

mas_makeConstraints
mas_updateContraints
mas_remakeContraints


1 基础写法:
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view.mas_centerX);
make.centerY.equalTo(self.view.mas_centerY);
//equalTo 后面要求跟一个OC对象的数据,所以需要对数字进行包装。@将数字变成了NSNumber 类型。
make.width.equalTo(@200);
make.height.equalTo(@50);
}];

make.xxxx属性.equalTo(参照对象.mas_属性【如果相同,可以省略】).offset(常数)


2 进阶写法
NSNumber只能装基本数据类型
NSValue可以装结构体等数据类型
// 进阶语法
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(200, 100)]);
}];

3 自动装箱的写法
装箱:把一个基本数据类型转换成为对象类型的过程叫做“装箱”,或者“包装”。
  [redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.size.mas_equalTo(CGSizeMake(100, 200));
}];


4 Masonry的练习
4.1 设置居中
// create a imageview in the center of scrollview UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"001"]]; [scrollView addSubview:imageView]; [imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.center.equalTo(scrollView); make.size.mas_equalTo(CGSizeMake(140, 140)); }];

4.2 让一个view略小于其superView(边距为20)
假设redView 是View 的子控件
[redView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top).offset(20); make.left.equalTo(self.view.mas_left).offset(20); make.bottom.equalTo(self.view.mas_bottom).offset(-20); make.right.equalTo(self.view.mas_right).offset(-20); }];

当约束控件属性和参照控件属性相同的时候,参照控件的属性可以不写
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).offset(20);
make.left.equalTo(self.view).offset(20);
make.bottom.equalTo(self.view).offset(-20);
make.right.equalTo(self.view.).offset(-20);
}];

如果参照的是自己的父控件,参照控件也可以省略不写
[imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.offset(20); make.left.offset(20); make.bottom.offset(20); make.right.offset(20); }];

如果多个属性的offset数值一样,属性也可以连写
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.offset(20);
make.bottom.right.offset(20);
}];

4.3 通过更简单的内边距形式修改控件的位置和大小
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_offset(UIEdgeInsetsMake(20, 20, 20, 20));
}];

5. 更新及重建约束
update是更新约束:如果之前已经添加过,那么就是更新约束。但是如果之前没有设置过,有可能会造成约束冲突。
修改完约束之后,需要让子控件根据约束调整frame才能生效
[imageView mas_updateConstraints:^(MASConstraintMaker *make) {
make.right.offset(-50);
}];
// 播放两秒动画
[UIView animateWithDuration:2 animations:^{
//让这个控件立刻根据约束修改自己的frame
[imageView layoutIfNeeded];
}];

6. Masonry的两个宏
如果想在使用Masonry框架时,省略mas_的前缀,需要定义以下宏:

#define MAS_SHORTHAND



让equalTo,offset都带有自动装箱功能,需要定义以下宏:



#define MAS_SHORTHAND_GLOBALS





第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台