文档章节

iOS界面布局之四——使用第三方库Masonry进行autolayout布局

珲少
 珲少
发布于 2015/11/02 14:20
字数 1075
阅读 7800
收藏 37

iOS界面布局之四——使用第三方库Masonry进行autolayout布局

一、引言

        在前面博客,我们讨论了使用iOS原生的框架代码来进行autolayout布局。在使用中,我们会发现,无论是代码量还是结构的清晰度,都十分不能让我们满意,在storyBoard中只需要几条线就可以搞定的事情,用代码缺要写冗余的一大堆。并且有些时候,故事版并不能解决所有问题,某些控件必须我们手写,这样的话,我们就不得不进行代码的autolayout布局,幸运的是,Masonry可以帮助我们轻松愉快的完成这一任务。

使用代码进行autolayout布局:http://my.oschina.net/u/2340880/blog 

二、使用Masonry

        这里说的大部分内容均来自Masonry和官方gitHub,将其内容进行了翻译和解释,源地址如下:https://github.com/SnapKit/Masonry

1、布局的控件属性对照

        无论是用storyBoard还是代码,在设置控件之间layout关系的时候,我们都需要设置控件的位置属性。在下面的方法中,这个位置属性就是NSLayoutAttribute对象,他决定的控件对象的参照位置:

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 
                                            relatedBy:(NSLayoutRelation)relation 
                                            toItem:(nullable id)view2 
                                            attribute:(NSLayoutAttribute)attr2 
                                            multiplier:(CGFloat)multiplier constant:(CGFloat)c;

在Masonry中,有一系列的属性与之成对应关系,对照如下:

2、3个方法让你玩转Masonry约束操作

        Masonry在UIView的类别中,有3个全局的操作约束的方法,通过他们我们可以自由的进行autolayout的设置。

添加约束:

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

这个方法用于我们在最开始时为控件设置的约束,在block中进行约束条件的设置,例如我们创建一个label,将其尺寸设置为50*50,放在屏幕中间,使用如下代码:

注意:在添加约束前,必须将视图添加到其父视图上。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UILabel * label = [[UILabel alloc]init];
    [self.view addSubview:label];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.height.equalTo(@50);
        make.width.equalTo(@50);
    }];
    label.backgroundColor = [UIColor redColor];
}

效果如下:

更新约束:

当我们需要配合布局改变或者动画效果的时候,我们可能需要将已经添加的约束进行更新操作,使用如下的方法:

[label mas_updateConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@100);
        make.width.equalTo(@100);
    }];

更新约束的作用在于更新已经添加的某些约束,并不会移除掉原有的约束,如果我们需要添加新的约束,可以使用下面的重设约束的方法。

重设约束:

[label mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(10);
        make.top.equalTo(self.view.mas_top).offset(100);
        make.height.equalTo(@100);
        make.width.equalTo(@100);
    }];

3、约束值相关

        在添加具体约束的时候,我们不仅可以将约束值设置为绝对的相等关系,也可以设置一些值域的关系,在Masonry中,有如下三种:

//绝对相等
- (MASConstraint * (^)(id attr))equalTo;
//大于等于
- (MASConstraint * (^)(id attr))greaterThanOrEqualTo;
//小于等于
- (MASConstraint * (^)(id attr))lessThanOrEqualTo;

对于约束的优先级,使用如下几个量:

//手动设置一个优先级参数
- (MASConstraint * (^)(MASLayoutPriority priority))priority;
//优先级低
- (MASConstraint * (^)())priorityLow;
//优先级中等
- (MASConstraint * (^)())priorityMedium;
//优先级高
- (MASConstraint * (^)())priorityHigh;

写法如下:

[label mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(10);
        make.top.equalTo(self.view.mas_top).offset(100);
        make.height.equalTo(@100).priority(1000);
        make.width.equalTo(@100).priorityHigh();
    }];

三、Masonry设置约束的几个示例

1、设置视图与其父视图的边距约束

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    label = [[UILabel alloc]init];
    [self.view addSubview:label];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));
    }];
    label.backgroundColor = [UIColor redColor];
}

设置上下左右与其父视图边距为20px,效果如下:

 

2、约束控件的尺寸为固定值

[label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@200);
        make.width.equalTo(@200);
        make.center.equalTo(self.view);
    }];

位置约束设置在了屏幕的中间,效果如下:

3、约束控件之间的尺寸

  [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@100);
        make.width.equalTo(label2);
        make.right.equalTo(label2.mas_left).offset(-100);
        make.leading.equalTo(self.view.mas_leading).offset(20);
        make.centerY.equalTo(self.view);
    }];
    [label2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@100);
        make.centerY.equalTo(label);
        make.trailing.equalTo(self.view.mas_trailing).offset(-20);
    }];

设置了两个label宽度一致,相距100px,分别距离左右边距20px,效果如下:

专注技术,热爱生活,交流技术,也做朋友。

——珲少 QQ群:203317592

© 著作权归作者所有

珲少

珲少

粉丝 886
博文 394
码字总数 475753
作品 0
上海
程序员
私信 提问
加载中

评论(5)

珲少
珲少 博主

引用来自“刘明昕”的评论

通过Masonry把一个UIView的Size确定了,这个UIView怎么根据屏幕分辨率调节Size呢?
autolayout的核心是约束,控件之间的相对概念使其计算出自己的位置,如果是分辨率的适配,可以试试改变约束
刘明昕
通过Masonry把一个UIView的Size确定了,这个UIView怎么根据屏幕分辨率调节Size呢?
珲少
珲少 博主

引用来自“ArtCoder”的评论

以后出去找工作可以说是看珲少的文章长大的[13][13]
rrrty
rrrty
以后出去找工作可以说是看珲少的文章长大的[13][13]
疯清扬
疯清扬
mark
有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

Apple 算是最重视应用开发体验的公司了.从Xib到StoryBoard,从Auto Layout到Size Class,每一次的更新,都会给iOS应用的开发带来不小的便利.但是,对于绝对多数iOS攻城狮来说,我们依然还是很害怕...

ios122
2015/09/23
100
0
iOS自动布局——Masonry详解

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环...

腾讯云加社区
2018/10/30
0
0
ios8 iOS Auto Layout

引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Auto Layout是一...

AK_47
2014/10/31
2.4K
0
如何判断你是合格的高级iOS开发工程师?

前言 随着移动互联网的高速发展泄洪而来,有意学习移动开发的人越来越多了,竞争也是越来越大,需要学习的东西很多。如何才能在激烈的移动开发者竞争中一枝独秀,成为一名真正合格的高级iOS...

_小迷糊
2018/05/26
0
0
iOS界面布局之一——使用autoresizing进行动态布局

iOS界面布局之一——使用autoresizing进行动态布局 autoresizing是iOS中传统的界面自动布局方式,通过它,当父视图frame变换时,子视图会自动的做出相应的调整。 一、通过代码进行布局 任何一...

珲少
2015/06/01
990
0

没有更多内容

加载失败,请刷新页面

加载更多

灵光一闪来个科普贴:Linux文件系统

在计算机系统中,各种需要保存的信息都是以文件的形式存在的。文件管理是对系统信息资源的管理,是操作系统的一项重要功能。 1.文件与文件系统: 1.1文件: 文件是具有名字的一组相关信息的有...

Linux就该这么学
3分钟前
1
0
ExtJS 4.2 评分组件

本文转载于:专业的前端网站➸ExtJS 4.2 评分组件 上一文章是扩展ExtJS自带的Date组件。在这里将创建一个评分组件。 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2...

前端老手
6分钟前
2
0
如何为视频添加封面?

一个好的视频封面可以吸引观众的眼球,从而起到事半功倍的宣传效果,但是很多小伙伴并不知道怎么给视频添加封面。下面分享一个制作封面否方法,操作起来也比较简单的,有兴趣的小伙伴请接着往...

白米稀饭2019
16分钟前
2
0
如何使用soapUI模拟webservice客户端发送请求

参考资料 https://jingyan.baidu.com/article/cbcede0712849a02f40b4d88.html 左边是请求参数,可以自己填写!按着那个绿色三角箭头可以模拟发送请求,右边是返回的报文 soapui如何发送xml格...

故久呵呵
46分钟前
5
0
Java Security 介绍

1.介绍 Java平台设计的重点是安全性。在其核心,java语言本身是类型安全的并且提供了垃圾自动回收,这使其增加了应用程序代码的健壮性。安全的类加载以及验证机制确保了只有合法的代码才能够...

lixiaobao
51分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部