iOS 自动布局框架 – Masonry 详解

目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了,但是在一些变化比较复杂的页面,还是需要通过代码来进行UI开发的。而且有很多比较老的项目,本身就还在采用纯代码的方式进行开发。

而现在iPhoneiPad屏幕尺寸越来越多,虽然开发者只需要根据屏幕点进行开发,而不需要基于像素点进行UI开发。但如果在项目中根据不同屏幕尺寸进行各种判断,写死坐标的话,这样开发起来是很吃力的。

所以一般用纯代码开发UI的话,一般都是配合一些自动化布局的框架进行屏幕适配。苹果为我们提供的适配框架有:VFLUIViewAutoresizingAuto LayoutSize Classes等。

其中Auto Layout是使用频率最高的布局框架,但是其也有弊端。就是在使用UILayoutConstraint的时候,会发现代码量很多,而且大多都是重复性的代码,以至于好多人都不想用这个框架。

后来Github上的出现了基于UILayoutConstraint封装的第三方布局框架MasonryMasonry使用起来非常方便,本篇文章就详细讲一下Masonry的使用。


占位图

Masonry介绍

这篇文章只是简单介绍Masonry,以及Masonry的使用,并且会举一些例子出来。但并不会涉及到Masonry的内部实现,以后会专门写篇文章来介绍其内部实现原理,包括顺便讲一下链式语法。

什么是Masonry

Masonry是一个对系统NSLayoutConstraint进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者API。系统AutoLayout支持的操作,Masonry都支持,相比系统API功能来说,Masonry是有过之而无不及。

Masonry采取了链式编程的方式,代码理解起来非常清晰易懂,而且写完之后代码量看起来非常少。之前用NSLayoutConstraint写很多代码才能实现的布局,用Masonry最少一行代码就可以搞定。下面看到Masonry的代码就会发现,太简单易懂了。

Masonry是同时支持MaciOS两个平台的,在这两个平台上都可以使用Masonry进行自动布局。我们可以从MASUtilities.h文件中,看到下面的定义,这就是Masonry通过宏定义的方式,区分两个平台独有的一些关键字。

Github地址:
https://github.com/SnapKit/Masonry

集成方式

Masonry支持CocoaPods,可以直接通过podfile文件进行集成,需要在CocoaPods中添加下面代码:

Masonry学习建议

UI开发中,纯代码和Interface Builder我都是用过的,在开发过程中也积累了一些经验。对于初学者学习纯代码AutoLayout,我建议还是先学会Interface Builder方式的AutoLayout,领悟苹果对自动布局的规则和思想,然后再把这套思想嵌套在纯代码上。这样学习起来更好入手,也可以避免踩好多坑。

在项目中设置的AutoLayout约束,起到对视图布局的标记作用。设置好约束之后,程序运行过程中创建视图时,会根据设置好的约束计算frame,并渲染到视图上。

所以在纯代码情况下,视图设置的约束是否正确,要以运行之后显示的结果和打印的log为准。

Masonry中的坑

在使用Masonry进行约束时,有一些是需要注意的。

  1. 在使用Masonry添加约束之前,需要在addSubview之后才能使用,否则会导致崩溃。
  2. 在添加约束时初学者经常会出现一些错误,约束出现问题的原因一般就是两种:约束冲突和缺少约束。对于这两种问题,可以通过调试和log排查。
  3. 之前使用Interface Builder添加约束,如果约束有错误直接就可以看出来,并且会以红色或者黄色警告体现出来。而Masonry则不会直观的体现出来,而是以运行过程中崩溃或者打印异常log体现,所以这也是手写代码进行AutoLayout的一个缺点。
    这个问题只能通过多敲代码,积攒纯代码进行AutoLayout的经验,慢慢就用起来越来越得心应手了。

Masonry基础使用

Masonry基础API

Auto Boxing

上面例如equalTo或者width这样的,有时候需要涉及到使用mas_前缀,这在开发中需要注意作区分。
如果在当前类引入#import "Masonry.h"之前,用下面两种宏定义声明一下,就不需要区分mas_前缀。

修饰语句

Masonry为了让代码使用和阅读更容易理解,所以直接通过点语法就可以调用,还添加了andwith两个方法。这两个方法内部实际上什么都没干,只是在内部将self直接返回,功能就是为了更加方便阅读,对代码执行没有实际作用。
例如下面的例子:

其内部代码实现,实际上就是直接将self返回。

更新约束和布局

关于更新约束布局相关的API,主要用以下四个API

关于UIView重新布局相关的API,主要用以下三个API

Masonry示例代码

常用方法

设置内边距

通过insets简化设置内边距的方式

更新约束

大于等于和小于等于某个值的约束

textLabel只需要设置一个属性即可

使用基础数据类型当做参数

设置约束优先级

设置约束比例

小练习

子视图等高练习

子视图垂直居中练习

UITableView动态Cell高度

iOS UI开发过程中,UITableView的动态Cell高度一直都是个问题。实现这样的需求,实现方式有很多种,只是实现起来复杂程度和性能的区别。

在不考虑性能的情况下,tableView动态Cell高度,可以采取估算高度的方式。如果通过估算高度的方式实现的话,无论是纯代码还是Interface Builder,都只需要两行代码就可以完成Cell自动高度适配。

实现方式:
需要设置tableViewrowHeight属性,这里设置为自动高度,告诉系统Cell的高度是不固定的,需要系统帮我们进行计算。然后设置tableViewestimatedRowHeight属性,设置一个估计的高度。(我这里用的代理方法,实际上都一样)

原理:
这样的话,在tableView被创建之后,系统会根据estimatedRowHeight属性设置的值,为tableView设置一个估计的值。然后在Cell显示的时候再获取Cell的高度,并刷新tableViewcontentSize

UIScrollView自动布局

之前听很多人说过UIScrollView很麻烦,然而我并没有感觉到有多麻烦(并非装逼)。我感觉说麻烦的人可能根本就没试过吧,只是觉得很麻烦而已。
我这里就讲一下两种进行UIScrollView自动布局的方案,并且会讲一下自动布局的技巧,只要掌握技巧,布局其实很简单。

布局小技巧:
UIScrollView添加的约束是定义其frame,设置contentSize是定义其内部大小。UIScrollView进行addSubview操作,都是将其子视图添加到contentView上。
所以,添加到UIScrollView上的子视图,对UIScrollView添加的约束都是作用于contentView上的。只需要按照这样的思路给UIScrollView设置约束,就可以掌握设置约束的技巧了。

提前设置contentSize

自动contentSize

上面的例子是提前设置好UIScrollViewcontentSize的内部size,然后直接向里面addSubview。但是这有个要求就是,需要提前知道contentSize的大小,不然没法设置。
这个例子中将会展示动态改变contentSize的大小,内部视图有多少contentSize就自动扩充到多大。

这种方式的实现,主要是依赖于创建一个containerView内容视图,并添加到UIScrollView上作为子视图。UIScrollView原来的子视图都添加到containerView上,并且和这个视图设置约束。
因为对UIScrollView进行addSubview操作的时候,本质上是往其contentView上添加。也就是containerView的父视图是contentView,通过containerView撑起contentView视图的大小,以此来实现动态改变contentSize

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部