博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Masonry教程--IOS自适配,丢掉Autolayout吧
阅读量:4671 次
发布时间:2019-06-09

本文共 4431 字,大约阅读时间需要 14 分钟。

文章来自

如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。

在Github上,Masonry已经得到6000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。
Masonry下载地址:

本文Demo下载地址:

环境信息:

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]; // 防止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];  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];   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); // 添加高度约束,让高度等于blackview make.height.equalTo(blackView); // 添加上边距约束(上边距 = 黑色view的下边框 + 偏移量20) make.top.equalTo(blackView.mas_bottom).offset(20); // 添加左边距(左边距 = 父容器纵轴中心 + 偏移量0) make.left.equalTo(weakSelf.view.mas_centerX).offset(0); }];}@end

案例四:

要求

当键盘挡住输入框时,输入框自动向上弹到键盘上方。
实现
这里需要使用到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来给当前控件添加约束。

转载于:https://www.cnblogs.com/iamjjh/p/4759311.html

你可能感兴趣的文章
大型网站高并发的架构演变图-摘自网络
查看>>
8丶运行及总结
查看>>
Unity获取手机的电量时间
查看>>
Spring框架:Spring容器具体解释
查看>>
MongoDB 3.2 从安装到使用。
查看>>
面对最菜TI战队,OpenAI在Dota2上输的毫无还手之力
查看>>
XCODE快捷键和功能汇总篇(不断更新)
查看>>
Servlet开发(一)
查看>>
linux下如何查看某个容器的详细信息?
查看>>
bzoj 2843: 极地旅行社
查看>>
车林通购车之家--购车计算器模块--算法js
查看>>
webpack使用教程
查看>>
MySQL学习8 - 数据的增删改
查看>>
Linux笔记(开机自动将kerne log保存到SD卡中)
查看>>
Ajax提交数据判断员工编号是否存在,及自动填充与员工编号所对应的员工姓名。...
查看>>
CodeForces 689E (离散化+逆元+组合)
查看>>
pycharm 右键无法显示unittest框架&&解决右键只有unittest 运行如何取消右键显示进行普通run...
查看>>
jQuery的选择器
查看>>
Shell 概述、截取字符操作等
查看>>
CTF/web
查看>>