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的源码分析完结,如果文中有不足之处,希望指出,互相学习。