Masonry教程--IOS自适配,丢掉Autolayout吧
2015-12-29 18:34
393 查看
http://www.brighttj.com/ios/ios-masonry-demo.html#comment-353
如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。
在Github上,Masonry已经得到5000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。
Masonry下载地址:
https://github.com/SnapKit/Masonry
本文Demo下载地址:
https://github.com/saitjr/MasonryDemo.git
环境信息:
Mac OS X 10.10.3
Xcode 6.3
iOS 8.3
正文:
1. 下载Masonry并导入到工程中;
2. 将Masonry.h导入当前控制器。
无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。
最终效果
1. 无论在什么尺寸的设备上(包括横竖屏切换),黑色view的左、上边距、大小都不变;
2. 灰色view的右边距不变
3. 宽、高、上边距黑色view相等
最终效果
在上面的案例中,涉及以下内容:
1. 在Masonry中,and,with都没有具体操作,仅仅是为了提高程序的可读性
等价于
2. equalTo与mas_equalTo
如果约束条件是数值或者结构体等类型,可以使用mas_equalTo进行包装。关于这个问题,我也不是很清楚,可以看看官方的解释:
Instead of using NSNumber, you can use primitives and structs to build your constraints.By default, macros which support autoboxing are prefixed with
Unprefixed versions are available by defining
importing Masonry.
我一般将数值类型的约束用mas_equalTo,而相对于某个控件,或者某个控件的某个约束,我会使用equalTo,如:
1. 有两个view,黑色与灰色;
2. 黑色view的左、上、右边距均为20,下边距灰色view 20,宽度自适应,高度与灰色view平分整个界面;
3. 灰色view宽度为黑色view的一半(即左边以中线起始),右、下边距与黑色view相同,高度与黑色view相同。
最终效果
当键盘挡住输入框时,输入框自动向上弹到键盘上方。
这里需要使用到Masonry的另外一个方法mas_updateConstraints。这个方法用于更新控件约束。
具体的实现方式可以下载Demo来看,这里只贴出键盘弹出时的处理代码:
1. 可以给控件添加left/right/top/bottom/size/height/width/insert约束;
2. 库提供了三个方法,mas_makeConstraints添加约束,mas_updateConstraints修改约束,mas_remakeConstraints清除以前约束并添加新约束;
3. 可以通过view.mas_bottom获得view的某个约束;
4. 在约束的block中,使用make来给当前控件添加约束。
如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。
在Github上,Masonry已经得到5000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。
Masonry下载地址:
https://github.com/SnapKit/Masonry
本文Demo下载地址:
https://github.com/saitjr/MasonryDemo.git
环境信息:
Mac OS X 10.10.3
Xcode 6.3
iOS 8.3
正文:
前期准备:
1. 下载Masonry并导入到工程中;2. 将Masonry.h导入当前控制器。
案例一:
要求:
无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。最终效果
实现:
#import "ViewController.h" #import "Masonry.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 防止block中的循环引用 __weak typeof(self) weakSelf = self; // 初始化view并设置背景 UIView *view = [UIView new]; view.backgroundColor = [UIColor redColor]; [self.view addSubview:view]; // 使用mas_makeConstraints添加约束 [view mas_makeConstraints:^(MASConstraintMaker *make) { // 添加大小约束(make就是要添加约束的控件view) make.size.mas_equalTo(CGSizeMake(100, 100)); // 添加居中约束(居中方式与self相同) make.center.equalTo(weakSelf.view); }]; } @end
案例二:
要求:
1. 无论在什么尺寸的设备上(包括横竖屏切换),黑色view的左、上边距、大小都不变;2. 灰色view的右边距不变
3. 宽、高、上边距黑色view相等
最终效果
实现:
#import "ViewController2.h" #import "Masonry.h" @interface ViewController2 () @end @implementation ViewController2 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // 初始化黑色view UIView *blackView = [UIView new]; blackView.backgroundColor = [UIColor blackColor]; [self.view addSubview:blackView]; // 给黑色view添加约束 [blackView mas_makeConstraints:^(MASConstraintMaker *make) { // 添加大小约束 make.size.mas_equalTo(CGSizeMake(100, 100)); // 添加左、上边距约束(左、上约束都是20) make.left.and.top.mas_equalTo(20); }]; // 初始化灰色view UIView *grayView = [UIView new]; grayView.backgroundColor = [UIColor lightGrayColor]; [self.view addSubview:grayView]; // 给灰色view添加约束 [grayView mas_makeConstraints:^(MASConstraintMaker *make) { // 大小、上边距约束与黑色view相同 make.size.and.top.equalTo(blackView); // 添加右边距约束(这里的间距是有方向性的,左、上边距约束为正数,右、下边距约束为负数) make.right.mas_equalTo(-20); }]; } @end
在上面的案例中,涉及以下内容:
1. 在Masonry中,and,with都没有具体操作,仅仅是为了提高程序的可读性
make.left.and.top.mas_equalTo(20);
等价于
make.left.top.mas_equalTo(20);
2. equalTo与mas_equalTo
如果约束条件是数值或者结构体等类型,可以使用mas_equalTo进行包装。关于这个问题,我也不是很清楚,可以看看官方的解释:
Instead of using NSNumber, you can use primitives and structs to build your constraints.By default, macros which support autoboxing are prefixed with
mas_.
Unprefixed versions are available by defining
MAS_SHORTHAND_GLOBALSbefore
importing Masonry.
我一般将数值类型的约束用mas_equalTo,而相对于某个控件,或者某个控件的某个约束,我会使用equalTo,如:
make.size.mas_equalTo(CGSizeMake(100, 100)); make.center.equalTo(weakSelf.view);
案例三:
要求:
1. 有两个view,黑色与灰色;2. 黑色view的左、上、右边距均为20,下边距灰色view 20,宽度自适应,高度与灰色view平分整个界面;
3. 灰色view宽度为黑色view的一半(即左边以中线起始),右、下边距与黑色view相同,高度与黑色view相同。
最终效果
实现:
#import "ViewController3.h" #import "Masonry.h" @interface ViewController3 () @end @implementation ViewController3 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. __weak typeof(self) weakSelf = self; // 初始化黑色view UIView *blackView = [UIView new]; blackView.backgroundColor = [UIColor blackColor]; [self.view addSubview:blackView]; // 给黑色view添加约束 [blackView mas_makeConstraints:^(MASConstraintMaker *make) { // 添加左、上边距约束 make.left.and.top.mas_equalTo(20); // 添加右边距约束 make.right.mas_equalTo(-20); }]; // 初始化灰色view UIView *grayView = [UIView new]; grayView.backgroundColor = [UIColor lightGrayColor]; [self.view addSubview:grayView]; // 给灰色view添加约束 [grayView mas_makeConstraints:^(MASConstraintMaker *make) { // 添加右、下边距约束 make.bottom.and.right.mas_equalTo(-20); // 添加高度约束,让高度等于黑色view make.height.equalTo(blackView); // 添加上边距约束(上边距 = 黑色view的下边框 + 偏移量20) make.top.equalTo(blackView.mas_bottom).offset(20); // 添加左边距(左边距 = 父容器纵轴中心 + 偏移量0) make.left.equalTo(weakSelf.view.mas_centerX).offset(0); }]; }
案例四:
要求:
当键盘挡住输入框时,输入框自动向上弹到键盘上方。
实现:
这里需要使用到Masonry的另外一个方法mas_updateConstraints。这个方法用于更新控件约束。具体的实现方式可以下载Demo来看,这里只贴出键盘弹出时的处理代码:
- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification { // 获取键盘基本信息(动画时长与键盘高度) NSDictionary *userInfo = [notification userInfo]; CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue]; CGFloat keyboardHeight = CGRectGetHeight(rect); CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue]; // 修改下边距约束 [_textField mas_updateConstraints:^(MASConstraintMaker *make) { make.bottom.mas_equalTo(-keyboardHeight); }]; // 更新约束 [UIView animateWithDuration:keyboardDuration animations:^{ [self.view layoutIfNeeded]; }]; }
总结:
1. 可以给控件添加left/right/top/bottom/size/height/width/insert约束;2. 库提供了三个方法,mas_makeConstraints添加约束,mas_updateConstraints修改约束,mas_remakeConstraints清除以前约束并添加新约束;
3. 可以通过view.mas_bottom获得view的某个约束;
4. 在约束的block中,使用make来给当前控件添加约束。
相关文章推荐
- iOS 中各种引用关键字区别
- IOS 程序执行
- iOS解决Cell的分割线宽度不满屏的方法
- IOS 地图定位,标记位置,获取经纬度,MKMapView的使用
- 在 iOS 9 中运行企业版应用
- IOS开发 抛物线
- iOS界面布局之三——纯代码的autoLayout及布局动画 iOS8及VFL语言
- IOS页面自动布局 之 NSLayoutConstraint基础篇
- xcode7、iOS9 设置启动图片(Launch Image)
- iOS 7 代码布局适配
- iOS消息推送机制的实现
- iOS 第三方库汇总(超全!!!!)
- iOS学习之利用关联对象让类别有添加属性效果
- iOS开发日记57-详解Quartz 2D
- Ios - 计算Label文字中字体的frame - 实用代码
- IOS之同步请求、异步请求、GET请求、POST请求
- IOS-通过代码⾃自定义cell(cell的⾼高度不⼀一致)
- 简析iOS开发设计模式的各自分析对比
- IOS离线教程下载与Dash的使用
- IOS之相同URL不同图片识别