Masonry是iOS在控件布局中常用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁。Masonry简化了NSLayoutConstraint的使用方式,让咱们能够以链式的方式为咱们的控件指定约束。本篇博客的主题不是教你如何去使用Masonry框架的,而是对Masonry框架的源码进行解析,让你明白Masonry是如何对NSLayoutConstraint进行封装的,以及Masonry框架中的各个部分所扮演的角色是什么样的。在Masonry框架中,仔细的品味干货仍是不少的。Masonry框架是Objective-C版本的,若是你的项目是Swift语言的,那么就得使用SnapKit布局框架了。SnapKit其实就是Masonry的Swift版本,二者虽然实现语言不一样,可是实现思路大致一致。git
今天博客对Masonry框架源码的解析思路是先对比给一个View添加一样的约束时,使用Masonry与系统原生的区别。而后就开门见山之间给出Masonry框架主要部分的类图,从类图中咱们来总体的分析Masonry框架的结构。而后再由总体到部分逐渐的细化,窥探其内部的实现细节。经过上述步骤,咱们将对Masonry框架的内部实现进行详细的了解。其实Masonry框架是轻量级的,总共的源码也没有多上行,可是仔细的阅读其实现细节,仍是能够吸收不少实用的东西的。github
首先Masonry在github上的地址是https://github.com/SnapKit/Masonry, 你能够经过上述连接Clone到Masonry框架,其中有Masonry框架介绍以及一些Masonry的使用示例。关于Masonry的使用方式在今天的博客中就不作过多的赘述了,其具体的使用方式请参考上述github上的连接。今天咱们就剖析一下Masonry框架的源码。数组
1、Masonry框架与NSLayoutConstraint调用方式的对比
首先咱们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则是约束的偏移量。ide
由上到下,NSLayoutConstraint的构造器中的参数会构成一个数学表达式,那就是subView.top = superView.top * 1 + 10,该表达式就直观的给出了subView.top与superView.top的关系。经下方的代码咱们就为subView添加了一个相对于superView的Top约束,约束的偏移量是10。函数
2.使用Masonry添加上述约束布局
接下来就是Masonry出场的时刻了,咱们将使用Masonry添加上述约束,其代码以下。下方给出了三种设置方式,下方三种方式是等价的,固然在Masonry中不知下方三种实现方式。下方Block中的每句话都表明着subView.top = superView.top * 1 + 10的意思,也就是说咱们只须要写这三行代码中的其中一种便可。使用Masonry的好处一目了然,让你的代码更为简洁。post
Masonry框架中支持约束的添加,约束的更新,约束的重建以及基本动画的实现等等。功能仍是蛮强大的。在Masonry框架主要中采用了链式调用和匿名闭包的方式来简化约束的添加。有关Masonry更为详细的使用方式请参见上述Masonry框架的Github连接,具体使用方式在此就不作过多的赘述了。动画
2、Masonry框架的类结构
经过上述的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框架中的核心类以及类目间的关系就介绍完了,下方就是核心类和类目的类图。下方将会逐步的窥探其代码实现。
3、View+MASAdditions源码解析
咱们先对UIView的公共类目View+MASAdditions中的源码进行解析,也就是对应着上方红框中的部分。用户是经过 View+MASAdditions中的东西来为View添加约束的,View+MASAdditions也就是Masonry框架与外界交互的通道。该部分主要对View+MASAdditions源码进行解析,先介绍其成员属性,而后介绍主要的方法。进入该部分的主题。
1.View+MASAdditions主要成员属性及getter方法
下方截图中是View+MASAdditions类目中的部分红员属性,其余的也与下方相似,这些属性都是MASViewAttribute类型的。如下方的mas_left成员属性为例,由于MASViewAttribute是View与NSLayoutAttribute的合体,因此mas_left就表明着当前View的NSLayoutAttributeLeft属性,也就是mas_left存储的是当前View的NSLayoutAttributeLeft属性。同理,mas_top就表明着当前View的NSLayoutAttributeTop属性,其余成员属性也是同样。
经过上述成员属性所对应的getter方法,咱们能够对其中所存储的内容一目了然。下方是mas_left、mas_top和mas_right成员属性所对应的getter方法,其中所作的事情就是对MASViewAttibute进行实例化,在实例化时指定当前视图所对应的LayoutAttribute。也就是mas_left = self + NSLayoutAttributeLeft, mas_top = self +NSLayoutAttributeTop, 固然此处的self就表明当前视图。
2.mas_makeConstraints方法解析
上面在介绍类图的时候也提到了,用户是经过调用mas_makeConstraints方法来为当前视图添加约束的。下方代码就是mas_makeConstraints函数的代码实现,根据我的理解,对每行代码进行了中文注释,接下来咱们来好好的看一下该函数的结构.mas_makeConstraints方法的返回值是一个数组(NSArray),数组中所存放的就是当前视图中所添加的全部约束。由于Masonry框架对NSLayoutConstraint封装成了MASViewConstraint,全部此处数组中存储的是MASViewConstraint对象。
接下来来看mas_makeConstraints的参数,mas_makeConstraints测参数是一个类型为void(^)(MASConstraintMaker *)的匿名Block(也就是匿名闭包),该闭包的返回值为Void, 而且须要一个MASConstraintMaker工厂类的一个对象。该闭包的做用就是可让mas_makeConstraints方法经过该block给MASConstraintMaker工厂类对象中的MAConstraint属性进行初始化。请参加下方block的使用。
在mas_makeConstraints方法体中,首先将当前View的translatesAutoresizingMaskIntoConstraints属性设置成No, 而后建立了一个MASConstraintMaker工厂类对象constraintMaker,而后经过block将constraintMaker对象回调给用户让用户对constraintMaker中的MAConstraint类型的属性进行初始化。换句话说block中所作的事情就是以前用户设置约束是所添加的代码,好比make.top(@10) == ( constraintMaker.top = 10 )。最后调用constraintMaker的install方法对用户指定的约束进行安装。
3.mas_updateConstraints与mas_remakeConstraints函数的解析
这两个函数内部的实现与mas_makeConstraints相似,就是多了一个属性的设置。mas_updateConstraints中将constraintMaker中的updateExisting设置为YES, 也就是说当添加约束时要先检查约束是否已经被安装了,若是被添加了就更新,若是没有被添加就添加。而mas_remakeConstraints中所作的事情是将removeExisting属性设置成YES, 表示将当前视图上的旧约束进行移除,而后添加上新的约束。
四、mas_closestCommonSuperview方法解析
mas_closestCommonSuperview方法负责计算出两个视图的公共父视图,这个相似求两个数字的最小公倍数。下方的代码就是寻找两个视图的公共父视图,固然是最近的那个公共父视图。若是找到了就返回,若是找不到就返回nil。寻找两个视图的公共父视图对于约束的添加来讲是很是重要的,由于相对的约束是添加到其公共父视图上的。好比举个列子 viewA.left = viewB.right + 10, 由于是viewA与viewB的相对约束,那么约束是添加在viewA与viewB的公共父视图上的,若是viewB是viewA的父视图,那么约束就添加在viewB上从而对viewA起到约束做用。
4、顺藤摸瓜,解析约束工厂类MASConstraintMaker
上一个部分咱们分析了View+MASAdditions类目,在该类目中主要使用到了约束的工厂类MASConstraintMaker,接下咱们就来窥探一下MASConstraintMaker中的内容。MASConstraintMaker之因此成为约束工厂类,由于MASConstraintMaker赋值建立NSLayoutConstraint对象,由于Masonry将NSLayoutConstraint类进一步封装成了MASViewConstraint,因此MASConstraintMaker是负责建立MASViewConstraint的对象,并调用MASViewConstraint对象的Install方法将该约束添加到相应的视图中。
1.MASConstraintMaker中的核心公有属性。
下方截图是MASConstraintMaker中的部分属性,能够看出下方的属性都是MSAConstriant类型,MSAConstriant是抽象类,因此下方成员变量存储的实质上是MSAConstriant子类MASViewConstraint的对象。MASConstraintMaker就负责对MASViewConstraint进行实例化。一句话解释MASViewConstraint,MASViewConstraint = View + NSLayoutConstraint + Install。稍后会给出MASViewConstraint具体技术细节的实现。在MASConstraintMaker还有一个私有数组constraints,该数组就用来记录以及建立的Constraint对象。
2.MASConstraintMake中的工厂方法解析
工厂类确定有工厂方法,接下来咱们来介绍MASConstraintMaker中的工厂方法方法,上面每一个MASConstraint类型的属性都对应一个getter方法,在getter方法中都会调用addConstraintWithLayoutAttribute方法,而addConstraintWithLayoutAttribute会调用第二个截个图中的方法,而截图中的这个方法就是MASConstraintMaker工厂类的工厂方法,根据提供的参数建立MSAViewConstraint对象,若是该函数的第一个参数不为空的话就会将新建立的MSAViewConstraint对象与参数进行合并组合成MASCompositeConstraint类(MASCompositeConstraint本质上是MSAViewConstraint对象的数组)的对象。
下方就是MASConstraintMaker工厂类的工厂方法,负责建立MASConstraint类的对象。下方的方法能够建立MASCompositeConstraint和MASViewConstraint对象,上面也说了,MASCompositeConstraint对象就是MASViewConstraint对象的数组。下方建立完MASConstraint类的相应的对象后,会把该建立的对象添加进MASConstraintMaker工厂类的私有constraints数组,来记录该工厂对象建立的全部约束。newConstraint.delegate = self; 这句话是很是重要的,因为为MASConstraint对象设置了代理,因此才支持链式调用(例如:maker.top.left.right.equalTo(@10))。
关于链式调用咱就以maker.top.left.right为例。此处的maker, 就是咱们的MASConstraintMaker工厂对象,maker.top会返回带有NSLayoutAttributeTop属性的MASViewConstraint类的对象,咱们先作一个转换:newConstraint = maker.top。那么maker.top.left 等价于newConstraint.left,须要注意的是此刻调用的left方法就不在是咱们工厂MASConstraintMaker中的left的getter方法了,而是被换到MASViewConstraint类中的left属性的getter方法了。给newConstraint设置代理就是为了能够在MASViewConstraint类中经过代理来调用MASConstraintMaker工厂类的工厂方法来完成建立。下方代码若是没有newConstraint.delegate = self;代理的设置的话,那就不支持链式调用。
说了这么多,总结一下,若是你调用maker.top, maker.left等等这些方法都会调用下方的工厂方法来建立相应的MASViewConstraint对象,并记录在工厂对象的约束数组中。之因此能链式调用,就是讲当前的工厂对象指定为MASViewConstraint对象的代理,因此一个MASViewConstraint对象就能够经过代理来调用工厂方法来建立另外一个新的MASViewConstraint对象了,此处用到了代理模式。
3. 工厂类中的install方法
虽然咱们将MASConstraintMake视为工厂类,不过该工厂类的功能不只仅建立MASConstraint的对象,还负责调用MASConstraint对象的install方法来将相应的约束安装到想要的视图上。在MASConstraintMake类中的install方法就是遍历工厂对象所建立全部约束对象并调用每一个约束对象的install方法来进行约束的安装。下方就是该工厂类中的install方法。
在安装约束时,若是self.removeExisting == Yes, 那么用户就经过mas_remakeConstraints方法调用的install方法,就先将原来的约束进行移除掉,而后添加上新的约束。在安装约束时,将updateExisting赋值给每一个约束,每一个约束在调用自己的install方法时会判断是否更新。下方就是MASConstraintMake的install方法的实现和注释。
5、继续顺藤摸瓜,解析MASViewConstraint
MASConstraintMaker工厂类所建立的对象实质上是MASViewConstraint类的对象。而MASViewConstraint类实质上是对MASLayoutConstraint的封装,进一步说MASViewConstraint负责为MASLayoutConstraint构造器组织参数并建立MASLayoutConstraint的对象,并将该对象添加到相应的视图中。接下来咱们将对MASViewConstraint类中的内容进行解析。
1.MASViewConstraint的对象链式调用探索
MASViewConstraint的对象是支持链式调用的,好比constraint.top.left.equalTo(superView).offset(10); 上面的这种方式就是链式调用,并且像equalTo(superView)这种形式也不是Objective-C中函数调用的方式,在Objective-C中是经过[]来调用函数的,而此处使用了()。接下来说分析这种链式的调用是如何实现的。
在MASViewConstraint类中的left, top等约束的getter方法都会调用下方的这个方法,而这个方法中所作的事情就是经过代理来调用工厂中的工厂方法来根据LayoutAttribute建立相应的MASConstraint对象。
而像offset(10)这种调用方式是如何实现的呢?咱们知道在OC中是不能经过小括号来调用方法的,那边闭包是能够的,不过offset()不是一个简单的闭包。在offset()的代码分析后咱们不难发现offset() = offset + (); offset的代码实现方式以下。offset是一个getter方法的名,offset函数的返回值是一个匿名Block, 也就是offset后边的()。这个匿名闭包有一个CGFloat的参数,为了支持链式调用该匿名闭包返回一个MASConstraint的对象。
2.install方法解析
MASViewConstraint中install方法负责建立MASLayoutConstraint对象,而且将该对象添加到相应的View上。下方代码就是install中根据MASViewConstraint所收集的参数来建立NSLayoutConstraint对象,下方的MASLayoutConstraint其实就是NSLayoutConstraint的别名。下方就是调用系统的NSLayoutConstraint为建立相应的约束对象,下方的构造器与第一部分中的NSLayoutConstraint一致。
建立完约束对象后,咱们要寻找该约束添加到那个View上。下方的代码段就是获取接收该约束对象的视图。若是是两个视图相对约束,就获取两种的公共父视图。若是添加的是Width或者Height,那么久添加到当前视图上。若是既没有指定相对视图,也不是Size类型的约束,那么就将该约束对象添加到当前视图的父视图上。代码实现以下:
建立完约束对象,而且找到承载约束的视图后,接下来就是将该约束添加到该视图上。子啊添加约束是咱们要判断是否是对约束的更新,若是是对约束的更新的话就先获取已经存在的约束并对该约束进行更新,若是被更新的约束不存在就进行添加。添加成功后咱们将经过mas_installedConstraints属性记录一下本安装的约束。mas_installedConstraints是经过运行时为UIView关联的一个NSMutable类型的属性,用来记录约束该视图的全部约束。
3.UIView的私有类目UIView+MASConstraints
在MASViewConstraint中定义了一个UIView的私有类目UIView+MASConstraints,该类目的功能为UIView经过运行时来关联一个NSMutableSet类型的mas_installedConstraints属性。该属性中记录了约束该View的全部约束。代码实现以下。
由于篇幅有限,今天的博客就先到这儿。对Masonry框架中的代码不可能在本篇博客中都进行一一介绍。不过在github上分享了一个Masonry的一个使用Demo以及源码解析的工程。其中对Masonry的关键代码都进行了说明与注释。下方是其github分享连接。
github分享地址:https://github.com/lizelu/MasonryDemo