文档章节

【iOS】Masonry使用案例讲解

Youth_关旋
 Youth_关旋
发布于 2016/08/27 15:59
字数 1316
阅读 58
收藏 0

【iOS】Masonry使用案例讲解

如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。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


正文:

前期准备:

下载Masonry并导入到工程中;
将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
案例二:

要求:

无论在什么尺寸的设备上(包括横竖屏切换),黑色view的左、上边距、大小都不变;
灰色view的右边距不变

宽、高、上边距黑色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_GLOBALS before importing Masonry.
我一般将数值类型的约束用mas_equalTo,而相对于某个控件,或者某个控件的某个约束,我会使用equalTo,如:


make.size.mas_equalTo(CGSizeMake(100, 100));
make.center.equalTo(weakSelf.view);

 

案例三:

要求:

有两个view,黑色与灰色;
黑色view的左、上、右边距均为20,下边距灰色view 20,宽度自适应,高度与灰色view平分整个界面;

灰色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];
    }];
}
总结:

可以给控件添加left/right/top/bottom/size/height/width/insert约束;

库提供了三个方法,mas_makeConstraints添加约束,mas_updateConstraints修改约束,mas_remakeConstraints清除以前约束并添加新约束;

可以通过view.mas_bottom获得view的某个约束;

在约束的block中,使用make来给当前控件添加约束。

大家现在在做自适应的时候经常会用到Masonry这个第三方库,你可以通过cocoapod去下载。
但是Masonry在iOS7.1的模拟器上编译通不过,主要是Masonry在iOS7.1 的模拟器上的NSLayoutConstain.h文件中找不到NSLayoutAttributeLeftMargin这个宏,这个宏是iOS8才有的,遇到这样的情况的话,解决方案如下:
在iOS7.1下去掉VIew 的autoresizing属性

 

 

© 著作权归作者所有

Youth_关旋
粉丝 2
博文 70
码字总数 23376
作品 0
枣庄
私信 提问
【iOS】Masonry 和 FDTemplateLayoutCell 搭配使用「UITableview 自适应内容高度」

本文来自尚妆iOS团队嘉文 发表于尚妆github博客,欢迎订阅! 准备: 1.FDTemplateLayoutCell 由sunny大神出品的自动计算UITableviewCell高度 FDTemplateLayoutCell下载 2.Masonry 目前最流行的...

尚妆产品技术刊读
2017/03/07
0
0
Masonry的使用

Masonry 源码:https://github.com/Masonry/Masonry Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Ma...

zh_iOS
2016/06/14
204
0
iOS开发实战——CollectionView点击事件与键盘隐藏结合案例(二)

版权声明:本文为博主原创文章,欢迎分享到其它技术社区,分享请标明出处: https://blog.csdn.net/CHENYUFENG1991/article/details/51592553 我在前一篇博客中《iOS开发实战——CollectionV...

乞力马扎罗的雪CYF
2016/06/06
0
0
iOS开发实战——CollectionView点击事件与键盘隐藏结合案例

版权声明:本文为博主原创文章,欢迎分享到其它技术社区,分享请标明出处: https://blog.csdn.net/CHENYUFENG1991/article/details/51588209 在我们的实际开发中,CollectionView是一种非常...

乞力马扎罗的雪CYF
2016/06/05
0
0
iOS开发实战——CollectionView中cell的间距设置

版权声明:本文为博主原创文章,欢迎分享到其它技术社区,分享请标明出处: https://blog.csdn.net/CHENYUFENG1991/article/details/51724224 我在前面多篇博客中详细讲解了CollectionView的...

乞力马扎罗的雪CYF
2016/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

教你玩转Linux—添加批量用户

添加和删除用户对每位Linux系统管理员都是轻而易举的事,比较棘手的是如果要添加几十个、上百个甚至上千个用户时,我们不太可能还使用useradd一个一个地添加,必然要找一种简便的创建大量用户...

xiangyunyan
16分钟前
3
0
返回提示信息,如:xxx创建成功!

【服务端】在输出的方法块中,加入要输出的字段(qcm_batch_id) QCMUserType.cs: public struct QCM_Custom_Create_Batch_Out_Tag { public BASCoreType.Cmn_Out_T......

_Somuns
17分钟前
3
0
Aliyun Serverless VSCode Extension v1.12.0 发布

Aliyun Serverless VSCode Extension 是阿里云 Serverless 产品 函数计算 Function Compute 的 VSCode 插件,该插件结合了函数计算 Fun 工具以及函数计算 SDK ,是一款 VSCode 图形化开发调试...

阿里云官方博客
17分钟前
4
0
程序员如何培养解决复杂问题的能力?

今天在上网时候,突然看到了这篇文章,感觉非常的适合现在的自己去思考下,可能也适用在座的读者。程序员不仅仅是敲代码,更是一个复合能力的结合体,也不仅仅停留在技术和代码阶段。你想要成...

哥本哈根的小哥
21分钟前
6
0
市场变化驱动产品思维升级

宜信科技中心财富管理产品部负责人Bob,与大家一起聊聊个性化推荐产品功能的设计和B端产品的功能策划方式。 拓展阅读:回归架构本质,重新理解微服务 智慧金融时代,大数据和AI如何为业务赋能...

宜信技术学院
21分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部