从Masonry原理解析使用注意点/* Create an array of constraints using an

Masonry应该是目前使用最为广泛的对于AutoLayout的封装（Swift版本叫做SnapKit），但是大家对于Masonry的使用只是停留在基础的方式，很少人会去理解Masonry内部去调用AutoLayout的具体原理，致使在UI上容易产生很多的冲突，导致Masonry的Crash等等情况；所以这篇文章主要是来解决上面提出的问题；

关于AutoLayout 要讲Masonry必须从iOS的布局历史开始，系统的UI布局大致分为3类：

Frame Layout Auto Resizing Auto Layout 所谓FrameLayout即通过设置view的frame属性值从而控制view的位置以及大小；

Auto Resizing其实也是属于FrameLayout的范畴，目的就是为了让子view可以跟随superview进行大小的调整；但是不足点就是Auto Resizing无法处理同级间的view布局以及无法让superview根据子view进行反向的数据调整；

于是就出现了Autolayout，它是一种基于约束的布局系统；简单来说Autolayout的本质其实就是解析一组多元一次方程，当要确定一个视图的位置，也是需要确定视图的横纵坐标以及宽度和高度的，只是这个横纵坐标和宽度高度不再是写死的数值，而是根据约束计算得来，从而达到自动布局的效果；

view_formula_2x.png 约束的本质就是两个view的线性关系，上图就是一个基本的关系方程式RedView的位置其实是通过BlueView的位置来固定的；这里不做过多的讲解有兴趣的朋友可以去看官方文档

AutoLayout的使用官方对于AutoLayout的使用提供了3种方法；但是其中两种本质都是其实都是使用NSLayoutConstraint对象进行约束；

使用xib以及storyboard进行布局，不过这种方式基本不用，因为不好用；使用VFL语法进行约束，VFL简直就是一种又臭又长的语法，非常不好用也很难记，需要扫盲的同学可以查看官方文档，我就不多讲了，因为我自己也不是很懂； /* Create an array of constraints using an ASCII art-like visual format string. */

(NSArray<NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *, NSNumber *> *)metrics views:(NSDictionary<NSString *, id> *)views;

使用NSLayoutConstraint纯代码添加，这种方式的缺点就是会大大的增加代码量，平均一个约束就需要写大量的代码，造成开发的效率大大降低； /* Create constraints explicitly. Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant" If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute. Use of this method is not recommended. Constraints should be created using anchor objects on views and layout guides. */

(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c; 上面曾经说过三种Autolayout的布局方法有两种的本质是一样的，就是因为VFL的本质其实就是返回多个NSLayoutConstraint对象，而不需要直接一个一个的创建NSLayoutConstraint对象大量减少代码量；个人认为要不是VFL的语法太过于变态，如果简单好用也就没有Masonry什么事了；

Masonry的本质其实就是通过链式的语法将一个一个约束关系记录下来，然后通过创建一个一个NSLayoutConstraint对象进行布局约束，Masonry内部的本质其实这样并不复杂，只是存在很多细节点，导致直接使用的它的人会存在许多疑惑点，约束间的关系理不清；

关于Masonry中的宏定义一下有两段代码，其中一个使用了mas_定义另一个没有使用mas_定义，我想绝大部分人在使用的过程中肯定会充满疑惑，好像不管使用哪一个都没有问题；

// 使用宏定义 [view mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(self.mas_top).mas_offset(20.f); make.leading.mas_equalTo(self.mas_leading).mas_offset(20.f); make.size.mas_equalTo(CGSizeMake(100.f, 100.f)); }];

// 不使用宏定义 [view makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.top).offset(20.f); make.leading.equalTo(self.leading).offset(20.f); make.size.equalTo(CGSizeMake(100.f, 100.f)); }]; 其实上述两种布局最后的效果都是一样的；原因就是非mas_定义的本质调用还是调用mas_定义的声明；

(NSArray *)makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *))block { return [self mas_makeConstraints:block]; }
(NSArray *)updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *))block { return [self mas_updateConstraints:block]; }
(NSArray *)remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *))block { return [self mas_remakeConstraints:block]; }

对于makeConstraints（updateConstraints && remakeConstraints）三个函数来说，本质还是调用了mas_makeConstraints（mas_updateConstraints && mas_remakeConstraints）；

@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;

#define MAS_ATTR_FORWARD(attr) \

(MASViewAttribute *)attr {
return [self mas_##attr];
}

MAS_ATTR_FORWARD(leading);

对于leading这些属性来说，leading的调用实际调用的还是mas_leading;

#define mas_equalTo(...) equalTo(MASBoxValue((VA_ARGS))) #define mas_greaterThanOrEqualTo(...) greaterThanOrEqualTo(MASBoxValue((VA_ARGS))) #define mas_lessThanOrEqualTo(...) lessThanOrEqualTo(MASBoxValue((VA_ARGS)))

#define mas_offset(...) valueOffset(MASBoxValue((VA_ARGS)))

#ifdef MAS_SHORTHAND_GLOBALS

#define equalTo(...) mas_equalTo(VA_ARGS) #define greaterThanOrEqualTo(...) mas_greaterThanOrEqualTo(VA_ARGS) #define lessThanOrEqualTo(...) mas_lessThanOrEqualTo(VA_ARGS)

#define offset(...) mas_offset(VA_ARGS)

#endif

/**

Sets the constraint relation to NSLayoutRelationEqual
returns a block which accepts one of the following:
MASViewAttribute, UIView, NSValue, NSArray
see readme for more details. */

(MASConstraint * (^)(id attr))equalTo;

/**

Sets the constraint relation to NSLayoutRelationGreaterThanOrEqual
returns a block which accepts one of the following:
MASViewAttribute, UIView, NSValue, NSArray
see readme for more details. */

(MASConstraint * (^)(id attr))greaterThanOrEqualTo;

/**

Sets the constraint relation to NSLayoutRelationLessThanOrEqual
returns a block which accepts one of the following:
MASViewAttribute, UIView, NSValue, NSArray
see readme for more details. */

(MASConstraint * (^)(id attr))lessThanOrEqualTo;

/**

Modifies the NSLayoutConstraint constant based on a value type */

(MASConstraint * (^)(NSValue *value))valueOffset;

我们可以发现对于equalTo函数默认接受的应该是一个NSObject的对象，但是我们却可以传入一个CGSize以及CGFloat这类参数，原因就是因为存在一个equalTo的宏定义调用了mas_equalTo，而mas_equalTo实际调用了equalTo函数只是将参数转换成了NSObject对象；所以我们可以得到以下结果：无论传入的参数是否是NSObject对象，equalTo和mas_equalTo最后调用的都是equalTo函数，需要注意的是equalTo宏定义和equalTo函数虽然本质调用一样，但是是属于不同函数；

关于Masonry的数据转换通过上面的宏定义我们存在一个疑惑点，为一个非NSObject对象可以被equalTo接受呢？原因就是下面这个函数噶会的作用；

/**

Given a scalar or struct value, wraps it in NSValue
Based on EXPObjectify: https://github.com/specta/expecta */ static inline id _MASBoxValue(const char *type, ...) { va_list v; va_start(v, type); id obj = nil; if (strcmp(type, @encode(id)) == 0) { id actual = va_arg(v, id); obj = actual; } else if (strcmp(type, @encode(CGPoint)) == 0) { CGPoint actual = (CGPoint)va_arg(v, CGPoint); obj = [NSValue value:&actual withObjCType:type]; } else if (strcmp(type, @encode(CGSize)) == 0) { CGSize actual = (CGSize)va_arg(v, CGSize); obj = [NSValue value:&actual withObjCType:type]; } else if (strcmp(type, @encode(MASEdgeInsets)) == 0) { MASEdgeInsets actual = (MASEdgeInsets)va_arg(v, MASEdgeInsets); obj = [NSValue value:&actual withObjCType:type]; } else if (strcmp(type, @encode(double)) == 0) { double actual = (double)va_arg(v, double); obj = [NSNumber numberWithDouble:actual]; } else if (strcmp(type, @encode(float)) == 0) { float actual = (float)va_arg(v, double); obj = [NSNumber numberWithFloat:actual]; } else if (strcmp(type, @encode(int)) == 0) { int actual = (int)va_arg(v, int); obj = [NSNumber numberWithInt:actual]; } else if (strcmp(type, @encode(long)) == 0) { long actual = (long)va_arg(v, long); obj = [NSNumber numberWithLong:actual]; } else if (strcmp(type, @encode(long long)) == 0) { long long actual = (long long)va_arg(v, long long); obj = [NSNumber numberWithLongLong:actual]; } else if (strcmp(type, @encode(short)) == 0) { short actual = (short)va_arg(v, int); obj = [NSNumber numberWithShort:actual]; } else if (strcmp(type, @encode(char)) == 0) { char actual = (char)va_arg(v, int); obj = [NSNumber numberWithChar:actual]; } else if (strcmp(type, @encode(bool)) == 0) { bool actual = (bool)va_arg(v, int); obj = [NSNumber numberWithBool:actual]; } else if (strcmp(type, @encode(unsigned char)) == 0) { unsigned char actual = (unsigned char)va_arg(v, unsigned int); obj = [NSNumber numberWithUnsignedChar:actual]; } else if (strcmp(type, @encode(unsigned int)) == 0) { unsigned int actual = (unsigned int)va_arg(v, unsigned int); obj = [NSNumber numberWithUnsignedInt:actual]; } else if (strcmp(type, @encode(unsigned long)) == 0) { unsigned long actual = (unsigned long)va_arg(v, unsigned long); obj = [NSNumber numberWithUnsignedLong:actual]; } else if (strcmp(type, @encode(unsigned long long)) == 0) { unsigned long long actual = (unsigned long long)va_arg(v, unsigned long long); obj = [NSNumber numberWithUnsignedLongLong:actual]; } else if (strcmp(type, @encode(unsigned short)) == 0) { unsigned short actual = (unsigned short)va_arg(v, unsigned int); obj = [NSNumber numberWithUnsignedShort:actual]; } va_end(v); return obj; } 对于所有传入的参数无论是否是NSObject对象，都会通过_MASBoxValue这个函数进行数据的封装，将所有参数都转换成一个NSObject对象

(void)setLayoutConstantWithValue:(NSValue *)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); } } 最后对于那些原本非NSObject对象在进行反向解析，设置对应的值；

关于Masonry的结构下图是网上一张很详细介绍Masonry结构的一张结构图，这里引用一下，因为我不想很具体的去介绍每一句代码，只把最核心的几点告诉大家；

1829891-2157823aedb4e4dc.png 上图的大致流程其实很通俗易懂，因为我们这样想，我们最主要的目的无非就是讲一个一个NSLayoutConstraint约束抽象成我们能够简单通俗的编写方式，所以Masonry的主要流程其实就是每个view提供给用户一个MASConstraintMaker对象，让用户不断在MASConstraintMaker对象上添加一个一个MASConstraint的约束结构，最后将所有的MASConstraint转化成一个一个NSLayoutConstraint对象添加在相应的view上面；

接下来的很多概念都需要用到上面的结构；

关于mas_makeConstraints，mas_updateConstraints，mas_remakeConstraints的区别理解我相信上面三个函数大家一定不会陌生，而且应该也知道对应的使用场景； mas_makeConstraints就是创建一个新的约束 mas_updateConstraints就是更新一个原有的约束 mas_remakeConstraints就是移除现有的约束，添加新的约束；

介绍一下主要的原理，每个MASConstraintMaker对象有两个updateExisting && removeExisting属性，用来保存当前的maker的约束方式

// MASConstraintMaker /**

Whether or not to check for an existing constraint instead of adding constraint */ @property (nonatomic, assign) BOOL updateExisting;

/**

Whether or not to remove existing constraints prior to installing */ @property (nonatomic, assign) BOOL removeExisting;

所以当调用mas_makeConstraints && mas_updateConstraints && mas_remakeConstraints这三个函数的时候，最后都会去执行install这个操作，而install里面本身就会判断如果是remakeConstraints那么它就会移除所有旧的约束，然后添加新的约束；对于updateConstraints && makeConstraints只是添加新的约束，但是MASConstraint本身会保存当前的约束是更新约束还是新加约束；

// MASConstraintMaker

(NSArray *)install { if (self.removeExisting) { 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; } 那么对于updateConstraints && makeConstraints内部对于updateExisting的区别其实很简单，如果updateExisting为true，那么就从当前的view去找是否存在和当前约束一样的约束，然后更新约束的constant，我们可以从layoutConstraintSimilarTo函数可以看到，判断约束是否存在的标准就是除了constant以外的所有属性；如果updateExisting为false，那么就是直接添加新的约束；

// MASConstraint /**

Whether or not to check for an existing constraint instead of adding constraint */ @property (nonatomic, assign) BOOL updateExisting;

//////////////////////////////////////////////// MASLayoutConstraint *existingConstraint = nil; if (self.updateExisting) { 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]; }

(MASLayoutConstraint *)layoutConstraintSimilarTo:(MASLayoutConstraint *)layoutConstraint { // check if any constraints are the same apart from the only mutable property constant

// go through constraints in reverse as we do not want to match auto-resizing or interface builder constraints // and they are likely to be added first. for (NSLayoutConstraint *existingConstraint in self.installedView.constraints.reverseObjectEnumerator) { if (![existingConstraint isKindOfClass:MASLayoutConstraint.class]) continue; if (existingConstraint.firstItem != layoutConstraint.firstItem) continue; if (existingConstraint.secondItem != layoutConstraint.secondItem) continue; if (existingConstraint.firstAttribute != layoutConstraint.firstAttribute) continue; if (existingConstraint.secondAttribute != layoutConstraint.secondAttribute) continue; if (existingConstraint.relation != layoutConstraint.relation) continue; if (existingConstraint.multiplier != layoutConstraint.multiplier) continue; if (existingConstraint.priority != layoutConstraint.priority) continue;
```
  return (id)existingConstraint;
```
} return nil; }

关于Masonry为什么可以链式调用其实Masonry可以链式调用无非就是为了缩减代码量，没有其他任何原因；从我们之前的结构图可以看到MASConstraintMaker对象包函了大量的MASConstraint属性对象，而MASConstraint属性对象里面还是定义大量的MASConstraint属性，于是就可以不断返回MASConstraint的对象;于是问题来了，它是怎么做到将每个MASConstraint对象都保存起来呢？

// MASConstraint /**

Usually MASConstraintMaker but could be a parent MASConstraint */ @property (nonatomic, weak) id delegate;

// MASConstraintMaker @interface MASConstraintMaker ()

@property (nonatomic, weak) MAS_VIEW *view; @property (nonatomic, strong) NSMutableArray *constraints;

@end

(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]) { //replace with composite constraint NSArray *children = @[constraint, newConstraint]; MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children]; compositeConstraint.delegate = self; [self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint]; return compositeConstraint; } if (!constraint) { newConstraint.delegate = self; [self.constraints addObject:newConstraint]; } return newConstraint; }

@protocol MASConstraintDelegate

/**

Notifies the delegate when the constraint needs to be replaced with another constraint. For example
A MASViewConstraint may turn into a MASCompositeConstraint when an array is passed to one of the equality blocks */

(void)constraint:(MASConstraint *)constraint shouldBeReplacedWithConstraint:(MASConstraint *)replacementConstraint;
(MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute;

@end

我们可以发现MASConstraint对象都有一个MASConstraintDelegate的代理，而MASConstraintMaker实现了这个代理，所以所有生成MASConstraint的任务其实最后都是通过MASConstraintMaker来实现的，并通过constraints进行保存；

关于Masonry如何正确添加对应的View关系可能很多人存在一个疑惑点，Masonry是如何正确的添加每个约束关系到对应的View上呢？不理解我这句话的同学可以自行写一个约束，然后打印对应的view的constraints可以发现，每个约束都有自己的对应关系，有的添加在superview上面，有些是添加在自己的view上面；那么Masonry是怎么做的呢？

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) { self.installedView = self.firstViewAttribute.view; } else { self.installedView = self.firstViewAttribute.view.superview; } 我们发现对于存在secondView的情况，那么firstView和secondView的最近公共view就是约束需要添加的view，如果firstView是设置size的大小（包括单独的宽高），那么需要添加约束的就是自身的view，其他情况一律都是firstView的superview（比如make.center.offset(10)这类操作）；

关于Masonry的一些缺省写法很多人会在代码中会写如下的代码，以下两段代码实现效果是一样的，但是其中一段是缺省代码，那么为什么缺省的写法也是可以正确实现呢？

[view mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view).offset(20.f); make.top.equalTo(self.view).offset(20.f); make.size.equalTo(CGSizeMake(120.f, 120.f)); }];

[view mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view.left).offset(20.f); make.top.equalTo(self.view.top).offset(20.f); make.size.equalTo(CGSizeMake(120.f, 120.f)); }]; 原因就在于Masonry会对系统的缺省值进行补充，如果在equalTo的时候传入secondViewAttribute是UIView对象，那么使用的约束类型就是该firstView的约束属性，如果传入的secondViewAttribute是secondView的约束属性，那么就直接使用；

(void)setSecondViewAttribute:(id)secondViewAttribute { if ([secondViewAttribute isKindOfClass:NSValue.class]) { [self setLayoutConstantWithValue:secondViewAttribute]; } else if ([secondViewAttribute isKindOfClass:MAS_VIEW.class]) { _secondViewAttribute = [[MASViewAttribute alloc] initWithView:secondViewAttribute layoutAttribute:self.firstViewAttribute.layoutAttribute]; } else if ([secondViewAttribute isKindOfClass:MASViewAttribute.class]) { MASViewAttribute *attr = secondViewAttribute; if (attr.layoutAttribute == NSLayoutAttributeNotAnAttribute) { _secondViewAttribute = [[MASViewAttribute alloc] initWithView:attr.view item:attr.item layoutAttribute:self.firstViewAttribute.layoutAttribute];; } else { _secondViewAttribute = secondViewAttribute; } } else { NSAssert(NO, @"attempting to add unsupported attribute: %@", secondViewAttribute); } } Masonry细节解析大家想看Masonry具体细节原理具体看这篇文章，代码上没有什么难度只要理解思想基本就能看明白；

关于Masonry的属性优先级注意点这里要说的主要是关于View自身内容尺寸(Intrinsic Content Size)，抗压缩抗拉伸(Compression-Resistance and Content-Hugging)这两种属性的概念介绍，这点是需要好好理解的，这些主要影响到的就是关于约束的优先级关系，我这里不做多讲有兴趣可以去看这篇文章；

作者：北辰明想了解的更多请加qq：2645837520