Masonry1.0.2 源码解析
在了解Masonry框架之前，有必要先了解一下自动布局的概念。在iOS6之前，UI布局的方式是通过frame属性和Autoresizing来完成的，而在iOS6之后，苹果公司推出了AutoLayout的布局方式，它是一种基于约束性的、描述性的布局系统，尤其是苹果的手机屏幕尺寸变多之后，AutoLayout的应用也越来越广泛。
但是，手写AutoLayout布局代码是十分繁琐的工作（不熟悉的话，可以找资料体验一下，保证让你爽到想哭，_）；鉴于此，苹果又开发了VFL的布局方式，虽然简化了许多，但是依然需要手写很多代码；如果，你希望不要手写代码，那么可以用xib来布局UI，可以图形化添加约束，只是xib的方式不太适合多人协作开发。综合以上的各种问题，Masonry出现了，这是一款轻量级的布局框架，采用闭包、链式编程的技术，通过封装系统的NSLayoutConstraints，最大程度地简化了UI布局工作。
本文主要分析一下Masonry的源码结构、布局方式和实现原理等等。
框架结构
Masonry框架的源码其实并不复杂，利用自己的描述语言，采用优雅的链式语法，使得自动布局方法简洁明了，并且同时支持iOS和MacOS两个系统。Masonry框架的核心就是MASConstraintMaker类，它是一个工厂类，根据约束的类型会创建不同的约束对象；单个约束会创建MASViewConstraint对象，而多个约束则会创建MAXCompositeConstraint对象，然后再把约束统一添加到视图上面。
布局方式
Masonry的布局方式比较灵活，有mas_makeConstraints(创建布局）、mas_updateConstraints(更新布局)、mas_remakeConstraints(重新创建布局)三种：
1.mas_makeConstraints:
给视图（视图本身或父视图）添加新的约束
// 给view1添加约束，frame和superView一样
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superview);
}];
2.mas_updateConstraints:
更新视图的约束，从视图中查找相同的约束，如果找到，就更新，会设置maker的updateExisting为YES
// 更新view1的上边距离superView为60，宽度为100
[view1 mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@60);
make.width.equalTo(@100);
}];
3.mas_remakeConstraints:
给视图添加约束，如果视图之前已经添加了约束，则会删除之前的约束，会设置maker的removeExisting为YES
// 重新设置view1的约束为：顶部距离父视图为300，左边距离父视图为100，宽为100，高为50
[view1 mas_remakeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview).offset(300);
make.left.equalTo(superview).offset(100);
make.width.equalTo(@100);
make.height.equalTo(@50);
}];
Masonry的布局相对关系也有三种：.equalTo(==)、.lessThanOrEqualTo（<=）、.greaterThanOrEqualTo(>=)。
Masonry的布局关系的参数也有三种：
1. @100 --> 表示指定具体值
2. view --> 表示参考视图的相同约束属性，如view1的left参考view2的left等
3. view.mas_left --> 表示参考视图的特定约束属性，如view1的left参考view2的right等
实现原理
Masonry是利用闭包和链式编程的技术实现简化操作的，所以需要对闭包和链式编程有一定的基础。下面会根据案例来具体分析一下Masonry的实现细节，代码实现的功能是设置view1的frame是CGRectMake(100, 100, 100, 100)；其中，mas_equalTo(...)是宏，会被替换成equalTo(MASBoxValue((...)))，功能是把基本类型包装成对象类型：
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(@100);
make.size.mas_equalTo(CGSizeMake(50, 50));
}];
1.创建maker
首先调用mas_makeConstraints:，这是一个UIView的分类方法，参数是一个设置约束的block，会把调用视图作为参数创业一个maker：
// View+MASAdditions.h
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {
self.translatesAutoresizingMaskIntoConstraints = NO;
// 创建maker，并保存调用该方法的视图view
MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
block(constraintMaker);
return [constraintMaker install];
}
2.生成约束
接下来，开始利用maker产生约束，即调用block(constraintMaker)
2.1 设置坐标x
make.left
调用过程：
// MASConstraintMaker.h
- (MASConstraint *)left {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];
}
- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
return [self constraint:nil addConstraintWithLayoutAttribute:layoutAttribute];
}
- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];
MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];
if ([constraint isKindOfClass:MASViewConstraint.class]) {
// 传入的参数是nil，所以此处代码不会执行
...
}
if (!constraint) {
// 设置newConstraint的代理为maker
newConstraint.delegate = self;
// 把约束加入到数组中
[self.constraints addObject:newConstraint];
}
// 返回MASViewConstraint类型的约束对象
return newConstraint;
}
其中，上述代码根据maker保存的view和传入的约束属性layoutAttribute创建了一个MASViewAttribute对象，然后根据viewAttribute对象创建了一个MASViewConstraint约束对象，代码如下：
// MASViewAttribute.h
- (id)initWithView:(MAS_VIEW *)view layoutAttribute:(NSLayoutAttribute)layoutAttribute {
self = [self initWithView:view item:view layoutAttribute:layoutAttribute];
return self;
}
- (id)initWithView:(MAS_VIEW *)view item:(id)item layoutAttribute:(NSLayoutAttribute)layoutAttribute {
self = [super init];
if (!self) return nil;
// 保存视图view
_view = view;
_item = item;
// 保存约束属性：NSLayoutAttributeLeft
_layoutAttribute = layoutAttribute;
return self;
}
// MASViewConstraint.h
- (id)initWithFirstViewAttribute:(MASViewAttribute *)firstViewAttribute {
self = [super init];
if (!self) return nil;
// 保存第一个属性（封装了视图view和约束属性NSLayoutAttributeLeft）
_firstViewAttribute = firstViewAttribute;
self.layoutPriority = MASLayoutPriorityRequired;
self.layoutMultiplier = 1;
return self;
}
2.2 设置坐标y
make.left.top
由于make.left返回的是MASViewConstraint对象，所以调用的top应该是MASViewConstraint类中的方法(该方法继承自父类MASConstraint)，调用过程如下：
// MASConstraint.h
- (MASConstraint *)top {
// self是MASViewConstraint对象
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTop];
}
// MASViewConstraint.h
- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
NSAssert(!self.hasLayoutRelation, @"Attributes should be chained before defining the constraint relation");
// self.delegate是maker对象
return [self.delegate constraint:self addConstraintWithLayoutAttribute:layoutAttribute];
}
// MASConstraintMaker.h
- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];
MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];
if ([constraint isKindOfClass:MASViewConstraint.class]) {
// 由于参数constraint不为nil，所以进入此处执行
//replace with composite constraint
NSArray *children = @[constraint, newConstraint];
// 创建约束集合对象，并把先前的约束对象和本次新创建的约束对象保存到数组中
MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];
// 设置约束集合对象的代理为maker
compositeConstraint.delegate = self;
// 用约束集合对象替换maker中已经保存的约束对象，因为我们同一个maker设置了2个以上的约束
[self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
// 返回MASCompositeConstraint约束集合对象
return compositeConstraint;
}
if (!constraint) {
...
}
return newConstraint;
}
如果一个maker添加多个约束后，就会创建MASCompositeConstraint对象，创建约束集合的过程如下：
- (id)initWithChildren:(NSArray *)children {
self = [super init];
if (!self) return nil;
// 保存约束数组
_childConstraints = [children mutableCopy];
for (MASConstraint *constraint in _childConstraints) {
// 设置数组中所有的约束对象的代理为MASCompositeConstraint对象
constraint.delegate = self;
}
return self;
}
在创建了MASCompositeConstraint对象后，就会更新maker中的约束数组，在最后添加约束的时候，就会是全部的约束对象，代码如下：
- (void)constraint:(MASConstraint *)constraint shouldBeReplacedWithConstraint:(MASConstraint *)replacementConstraint {
NSUInteger index = [self.constraints indexOfObject:constraint];
NSAssert(index != NSNotFound, @"Could not find constraint %@", constraint);
[self.constraints replaceObjectAtIndex:index withObject:replacementConstraint];
}
2.3 设置x、y的值
make.left.top.equalTo(@100)
make.left.top返回的对象是MASCompositeConstraint类型，调用过程如下：
// MASConstraint.h
- (MASConstraint * (^)(id))equalTo {
return ^id(id attribute) {
return self.equalToWithRelation(attribute, NSLayoutRelationEqual);
};
}
// MASCompositeConstraint.h
- (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation {
return ^id(id attr, NSLayoutRelation relation) {
for (MASConstraint *constraint in self.childConstraints.copy) {
// 遍历数组，把每个MASViewConstraint对象都调用该方法
constraint.equalToWithRelation(attr, relation);
}
return self;
};
}
// MASViewConstraint.h
- (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation {
return ^id(id attribute, NSLayoutRelation relation) {
if ([attribute isKindOfClass:NSArray.class]) {
// 由于attribute是@100的包装类型，不是数组，此处代码不会执行
...
} else {
NSAssert(!self.hasLayoutRelation || self.layoutRelation == relation && [attribute isKindOfClass:NSValue.class], @"Redefinition of constraint relation");
// 设置约束类别为NSLayoutRelationEqual
self.layoutRelation = relation;
// 设置第二个属性
self.secondViewAttribute = attribute;
return self;
}
};
}
- (void)setLayoutRelation:(NSLayoutRelation)layoutRelation {
_layoutRelation = layoutRelation;
// 表明已经有了约束关系
self.hasLayoutRelation = YES;
}
下面分析一下设置第二个属性secondViewAttribute的过程，因为Masonry重写了setter方法，过程如下：
// MASViewConstraint.h
- (void)setSecondViewAttribute:(id)secondViewAttribute {
if ([secondViewAttribute isKindOfClass:NSValue.class]) {
// secondViewAttribute是@100类型
[self setLayoutConstantWithValue:secondViewAttribute];
} else if ([secondViewAttribute isKindOfClass:MAS_VIEW.class]) {
// secondViewAttribute是视图UIView类型
_secondViewAttribute = [[MASViewAttribute alloc] initWithView:secondViewAttribute layoutAttribute:self.firstViewAttribute.layoutAttribute];
} else if ([secondViewAttribute isKindOfClass:MASViewAttribute.class]) {
// secondViewAttribute是view.mas_left类型
_secondViewAttribute = secondViewAttribute;
} else {
NSAssert(NO, @"attempting to add unsupported attribute: %@", secondViewAttribute);
}
}
// MASConstraint.h @100类型
- (void)setLayoutConstantWithValue:(NSValue *)value {
// 根据value的不同类型，设置不同的属性值
if ([value isKindOfClass:NSNumber.class]) {
self.offset = [(NSNumber *)value doubleValue];
} else if (strcmp(value.objCType, @encode(CGPoint)) == 0) {
CGPoint point;
[value getValue:&point];
self.centerOffset = point;
} else if (strcmp(value.objCType, @encode(CGSize)) == 0) {
CGSize size;
[value getValue:&size];
self.sizeOffset = size;
} else if (strcmp(value.objCType, @encode(MASEdgeInsets)) == 0) {
MASEdgeInsets insets;
[value getValue:&insets];
self.insets = insets;
} else {
NSAssert(NO, @"attempting to set layout constant with unsupported value: %@", value);
}
}
由于@100是NSNumber类型，所以执行self.offset来设置偏移量，代码如下：
// MASViewConstraint.h
- (void)setOffset:(CGFloat)offset {
// 设置layoutConstant属性值，在最后添加属性时作为方法参数传入
self.layoutConstant = offset;
}
- (void)setLayoutConstant:(CGFloat)layoutConstant {
_layoutConstant = layoutConstant;
#if TARGET_OS_MAC && !(TARGET_OS_IPHONE || TARGET_OS_TV)
...
#else
self.layoutConstraint.constant = layoutConstant;
#endif
}
这里有网友疑惑，因为self.layoutConstraint在上面的方法中一直是nil，设置它的constant属性是没有意义的，不知道这么写有何意义？其实，我也有同样的疑问！！！
2.4 设置size
另外，make.size的实现过程和上面的分析类似，有兴趣的可以自行参考，看一看具体的实现过程，在此不做分析。
3.安装约束
下面分析一下约束的安装过程
[constraintMaker install]
调用过程如下：
// MASConstraintMaker.h
- (NSArray *)install {
if (self.removeExisting) {
// 是remake，所以要先删除已经视图中存在的约束
NSArray *installedConstraints = [MASViewConstraint installedConstraintsForView:self.view];
for (MASConstraint *constraint in installedConstraints) {
[constraint uninstall];
}
}
NSArray *constraints = self.constraints.copy;
for (MASConstraint *constraint in constraints) {
constraint.updateExisting = self.updateExisting;
// 添加约束
[constraint install];
}
[self.constraints removeAllObjects];
return constraints;
}
// MASViewConstraint.h
- (void)uninstall {
if ([self supportsActiveProperty]) {
// 如果 self.layoutConstraint 响应了 isActive 方法并且不为空，会激活这条约束并添加到 mas_installedConstraints 数组中，最后返回
self.layoutConstraint.active = NO;
[self.firstViewAttribute.view.mas_installedConstraints removeObject:self];
return;
}
[self.installedView removeConstraint:self.layoutConstraint];
self.layoutConstraint = nil;
self.installedView = nil;
[self.firstViewAttribute.view.mas_installedConstraints removeObject:self];
}
下面分析一下install的过程：
- (void)install {
// 如果已经安装过约束，直接返回
if (self.hasBeenInstalled) {
return;
}
// 如果 self.layoutConstraint 响应了 isActive 方法并且不为空，会激活这条约束并添加到 mas_installedConstraints 数组中，最后返回
if ([self supportsActiveProperty] && self.layoutConstraint) {
self.layoutConstraint.active = YES;
[self.firstViewAttribute.view.mas_installedConstraints addObject:self];
return;
}
// 取出约束的两个视图及约束属性
MAS_VIEW *firstLayoutItem = self.firstViewAttribute.item;
NSLayoutAttribute firstLayoutAttribute = self.firstViewAttribute.layoutAttribute;
MAS_VIEW *secondLayoutItem = self.secondViewAttribute.item;
NSLayoutAttribute secondLayoutAttribute = self.secondViewAttribute.layoutAttribute;
// alignment attributes must have a secondViewAttribute
// therefore we assume that is refering to superview
// eg make.left.equalTo(@10)
if (!self.firstViewAttribute.isSizeAttribute && !self.secondViewAttribute) {
// 如果第一个属性不是size属性，并且第二个属性为nil，就把第二个视图设置为view的父视图，约束属性设置为view的约束属性
secondLayoutItem = self.firstViewAttribute.view.superview;
secondLayoutAttribute = firstLayoutAttribute;
}
// 创建约束对象
MASLayoutConstraint *layoutConstraint
= [MASLayoutConstraint constraintWithItem:firstLayoutItem
attribute:firstLayoutAttribute
relatedBy:self.layoutRelation
toItem:secondLayoutItem
attribute:secondLayoutAttribute
multiplier:self.layoutMultiplier
constant:self.layoutConstant];
layoutConstraint.priority = self.layoutPriority;
layoutConstraint.mas_key = self.mas_key;
if (self.secondViewAttribute.view) {
// 如果第二个属性视图存在，就取第一个视图和第二个视图的最小父视图
MAS_VIEW *closestCommonSuperview = [self.firstViewAttribute.view mas_closestCommonSuperview:self.secondViewAttribute.view];
NSAssert(closestCommonSuperview,
@"couldn't find a common superview for %@ and %@",
self.firstViewAttribute.view, self.secondViewAttribute.view);
self.installedView = closestCommonSuperview;
} else if (self.firstViewAttribute.isSizeAttribute) {
// 如果第一个属性是设置size的，就把第一个视图赋值给installedView
self.installedView = self.firstViewAttribute.view;
} else {
// 否则就取第一个视图的父视图赋值给installedView
self.installedView = self.firstViewAttribute.view.superview;
}
MASLayoutConstraint *existingConstraint = nil;
if (self.updateExisting) {
// 如果是更新属性，就根据layoutConstraint查看视图中是否存在该约束
existingConstraint = [self layoutConstraintSimilarTo:layoutConstraint];
}
if (existingConstraint) {
// just update the constant
existingConstraint.constant = layoutConstraint.constant;
self.layoutConstraint = existingConstraint;
} else {
[self.installedView addConstraint:layoutConstraint];
self.layoutConstraint = layoutConstraint;
[firstLayoutItem.mas_installedConstraints addObject:self];
}
}
求两个视图的最小父视图的代码如下：
- (instancetype)mas_closestCommonSuperview:(MAS_VIEW *)view {
MAS_VIEW *closestCommonSuperview = nil;
MAS_VIEW *secondViewSuperview = view;
while (!closestCommonSuperview && secondViewSuperview) {
MAS_VIEW *firstViewSuperview = self;
while (!closestCommonSuperview && firstViewSuperview) {
if (secondViewSuperview == firstViewSuperview) {
// 如果first和second的视图一样，就设置closestCommonSuperview，并返回
closestCommonSuperview = secondViewSuperview;
}
firstViewSuperview = firstViewSuperview.superview;
}
secondViewSuperview = secondViewSuperview.superview;
}
return closestCommonSuperview;
}
其实，上述代码是先判断first和second的视图是否一样，如果一样，直接返回；如果不一样，就判断fisrt的父视图和second是否一样，如果一样，就返回；不一样，继续判断first的父视图和second的父视图是否一样，如果一样，就返回；不一样，重复迭代。
结束语
Masonry的源码分析完结，如果文中有不足之处，希望指出，互相学习。
参考资料
