iOS开发之Masonry框架源码深度解析

Masonry是iOS在控件布局中经常使用的一个轻量级框架，Masonry让NSLayoutConstraint使用起来更为简洁。Masonry简化了NSLayoutConstraint的使用方式，让我们可以以链式的方式为我们的控件指定约束。本篇博客的主题不是教你如何去使用Masonry框架的，而是对Masonry框架的源码进行解析，让你明白Masonry是如何对NSLayoutConstraint进行封装的，以及Masonry框架中的各个部分所扮演的角色是什么样的。在Masonry框架中，仔细的品味干货还是很多的。Masonry框架是Objective-C版本的，如果你的项目是Swift语言的，那么就得使用SnapKit布局框架了。SnapKit其实就是Masonry的Swift版本，两者虽然实现语言不同，但是实现思路大体一致。,一、Masonry框架与NSLayoutConstraint调用方式的对比,今天博客对Masonry框架源码的解析思路是先对比给一个View添加同样的约束时，使用Masonry与系统原生的区别。然后就开门见山之间给出Masonry框架主要部分的类图，从类图中我们来整体的分析Masonry框架的结构。然后再由整体到部分逐渐的细化，窥探其内部的实现细节。通过上述步骤，我们将对Masonry框架的内部实现进行详细的了解。其实Masonry框架是轻量级的，总共的源码也没有多上行，但是仔细的阅读其实现细节，还是可以吸取很多实用的东西的。,首先Masonry在github上的地址是https://github.com/SnapKit/Masonry, 你可以通过上述链接Clone到Masonry框架，其中有Masonry框架介绍以及一些Masonry的使用示例。关于Masonry的使用方式在今天的博客中就不做过多的赘述了，其具体的使用方式请参考上述github上的链接。今天我们就剖析一下Masonry框架的源码。,二、Masonry框架的类结构,首先我们NSLayoutConstraint为我们的View添加一个约束，然后再给出Masonry的代码。当然在此我们就不说Masonry添加约束的简洁行了，当然好东西是不需要宣传的。进入该部分的主题，我们要对一个View添加一个top约束，这个约束关系我们用表达式来表示就是“subView.top = superView.top + 10”。也就是子视图的top与父视图的top中间隔着10个pt。,1. 使用NSLayoutConstraint添加约束,下方这段代码就是给subView添加了一个相对于superView的Top约束。一个View要想确定位置一个约束是不够的，所以可想而知，我们要写多个下方的这样的约束来确定一个View的相对位置。其实下方就是一个表达式，NSLayoutConstraint构造器中每个参数构成这个表达式的一个组成部分。由上到下我们队参数个个参数进行解析，参数constraintWithItem用来指定所约束的对象，在此就是subView。第一个attribute参数则指定约束该对象的那个属性，在此就是subView的Top属性。参数relatedBy用来指定约束关系，比如大于等于，小于等于或者等于某个约束值。参数toItem则指定的是约束相对的对象，在此是相对superView的，所以此处的参数是superView。第二个attribute参数就是指定superView的Top属性。multiplier指定相对约束的倍数关系，constant则是约束的偏移量。,由上到下，NSLayoutConstraint的构造器中的参数会构成一个数学表达式，那就是subView.top = superView.top * 1 + 10，该表达式就直观的给出了subView.top与superView.top的关系。经下方的代码我们就为subView添加了一个相对于superView的Top约束，约束的偏移量是10。,,三、View+MASAdditions源码解析, 2.使用Masonry添加上述约束,接下来就是Masonry出场的时刻了，我们将使用Masonry添加上述约束，其代码如下。下方给出了三种设置方式，下方三种方式是等价的，当然在Masonry中不知下方三种实现方式。下方Block中的每句话都代表着subView.top = superView.top * 1 + 10的意思，也就是说我们只需要写这三行代码中的其中一种即可。使用Masonry的好处一目了然，让你的代码更为简洁。,Masonry框架中支持约束的添加，约束的更新，约束的重建以及基本动画的实现等等。功能还是蛮强大的。在Masonry框架主要中采用了链式调用和匿名闭包的方式来简化约束的添加。有关Masonry更为详细的使用方式请参见上述Masonry框架的Github链接，具体使用方式在此就不做过多的赘述了。,,通过上述的Masonry的使用方式我们可以看出，UIView的对象可以直接调用mas_makeConstraints方法来为相应的View对象添加约束。因为mas_makeConstraints方法位于UIView的View+MASAdditions类目中，所以UIView的对象可以直接调用。同样在View+MASAdditions类目还有其他方法供UIView的对象使用，稍后会进行详细的介绍。,下方就是Masonry框架核心类以及类目之间的关系，下方的类图是在阅读Masonry源码时画的，仅此一份，如有雷同纯属巧合。如果下图中的文字比较小的话，你可以图片另存到本地，然后放大后进行查看，废话少说，进入我们类图的主题。下方的类图中没有包括Masonry框架中的所有的类，不过所有核心的类都在下方了。我们从左往右依次对下方的类图进行解说。,1.View+MASAdditions类目介绍（左边红框中的部分）,最左边那一坨大类，也就是绿框中的部分，就是Masonry框架对UIView的公有类目，也就是源文件中的View+MASAdditions的部分，在该类目中为添加了类型为MASViewAttribute的成员属性（稍后会介绍MASViewAttribute是个神马东西）。除了添加一系列的成员属性外，还添加了四个公有的方法：mas_closestCommonSuperview方法负责寻找两个视图的最近的公共父视图（类比两个数字的最小公倍数）、mas_makeConstraints方法负责创建安装约束、mas_updateConstraints负责更新已经存在的约束（若约束不存在就Install）、mas_remakeConstraints方法则负责移除原来已经创建的约束并添加上新的约束。上述方式是UIView对象设置约束主要调用的方法，稍后会详细介绍其实现方式。,2.MASViewAttribute类的介绍（右边黄框中的部分）,介绍完用户直接使用的UIView的公共类目，接下来我们来看一下用户看不到的部分，那就是下方类图中右边的那一撮类。右边的四个小类的耦合性比较高，我们先看一下MASViewAttribute类。MASViewAttribute类的结构比较简单，主要包括三个属性，三个方法。从MASViewAttribute这个类名中我们就能看出，这个类是对UIView和NSLayoutAttribute的封装。使用等式来表示就是MASViewAttribute = UIView + NSLayoutAttribute + item。在MASViewAttribute类中的view属性表示所约束的对象，而item就是该对象上可以被约束的部分。,此处的item成员属性我们稍后要作为NSLayoutConstriant构造器中的constraintWithItem与toItem的参数。当然对于UIView来说该item就是UIView本身。而对于UIViewController，该出Item就topLayoutGuide，bottomLayoutGuide稍后会给出详细的介绍。该类中除了两个构造器外还有一个isSizeAttribute方法，该方法用来判断MASViewAttribute类中的layoutAttribute属性是否是NSLayoutAttributeWidth或者NSLayoutAttributeHeight，如果是Width或者Height的话，那么约束就添加到当前View上，而不是添加在父视图上。,3.MASViewConstraint的介绍（右边黄框中的部分）,接着我们看一下MASViewConstraint类，该类是对NSLayoutConstriant类的进一步封装。MASViewConstraint做的最核心的一件事情就是初始化NSLayoutConstriant对象，并将该对象添加在相应的视图上。因为NSLayoutConstriant在初始化时需要NSLayoutAttribute和所约束的View，而MASViewAttribute正是对View与NSLayoutAttribute进行的封装，所以MASViewConstraint类要依赖于MASViewAttribute类，两者的关系如下所示。,由下方的类图我们可以看出MASConstraint是MASViewConstraint的父类，MASConstraint是一个抽象类，不可被实例化。我们可以将MASConstraint看做是一个接口或者协议。MASConstraint抽象类还有一个子类，也就是MASViewConstraint的兄弟类MASCompositeConstraint，从MASCompositeConstraint的命名中我们就可以看出来MASCompositeConstraint是约束的一个组合，也就是其中存储的是一系列的约束。MASCompositeConstraint类的结构比较简单，其核心就是一个存储MASViewConstraint对象的数组，MASCompositeConstraint就是对该数组的一个封装而已。,4.工厂类MASConstraintMaker（中间绿框中的部分）,两边的看完了，接下来我们来看一下中间的部分，也就是MASConstraintMaker类。该类就是一个工厂类，负责创建MASConstraint类型的对象（依赖于MASConstraint接口，而不依赖于具体实现）。在UIView的View+MASAdditions类目中就是调用的MASConstraintMaker类中的一些方法。上述我们在使用Masonry给subView添加约束时，mas_makeConstraints方法中的Block的参数就是MASConstraintMaker的对象。用户可以通过该Block回调过来的MASConstraintMaker对象给View指定要添加的约束以及该约束的值。该工厂中的constraints属性数组就记录了该工厂创建的所有MASConstraint对象。,Masonry框架中的核心类以及类目间的关系就介绍完了，下方就是核心类和类目的类图。下方将会逐步的窥探其代码实现。,