Masonry原理

Masonry使用

首先我们写个简单的约束:

01 - (void)viewDidLoad {
02   [super viewDidLoad];
03 
04    UIView *firstView = [[UIView alloc] initWithFrame:CGRectZero];
05    firstView.backgroundColor = [UIColor redColor];
06    
07    UIView *secondView = [[UIView alloc] initWithFrame:CGRectMake(30, 150, 250, 250)];
08    secondView.backgroundColor = [UIColor greenColor];
09    [self.view addSubview:secondView];
10    [secondView addSubview:firstView];
11    
12    [firstView mas_makeConstraints:^(MASConstraintMaker *make) {
13       make.left.equalTo(secondView).offset(50);
14       make.top.equalTo(secondView.mas_top).offset(50);
15       make.size.mas_equalTo(CGSizeMake(150, 150));
16    }];
17 }

在模拟器上运行后,运行结果如下:

运行结果.png

调用mas_makeConstraints:

点击 ***mas_makeConstraints: ***进去看看做了什么.
在 UIView+MASAdditions.m 中,我们看看 mas_makeConstraints: 的实现:

01- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block 02{
03    self.translatesAutoresizingMaskIntoConstraints = NO;
04    MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
05    block(constraintMaker);
06    return [constraintMaker install];
07}- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *))block {self.translatesAutoresizingMaskIntoConstraints = NO;MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];constraintMaker.updateExisting = YES;block(constraintMaker);return [constraintMaker install];
}- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block {self.translatesAutoresizingMaskIntoConstraints = NO;MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];constraintMaker.removeExisting = YES;block(constraintMaker);return [constraintMaker install];
}

mas_updateConstraints: 和 mas_remakeConstraints: 都只是比mas_makeConstraints: 多了一个BOOL属性,用作标记

• 调用mas_updateConstraints: , MASConstraintMaker对象的updateExisting会被设置为YES
• 调用mas_remakeConstraints: , MASConstraintMaker对象的removeExisting会被设置为YES,是重新设置约束

从代码中可以看出,block作为参数,并且是直接调用的,并没有被copy,这也解释了为什么在block内部使用self不会造成循环引用.

通过断点调试,也可以看到block是在栈上.

截屏2020-05-23 下午4.22.32.png

对block进行赋值:

12    [firstView mas_makeConstraints:^(MASConstraintMaker *make) {
13       make.left.equalTo(secondView).offset(50);
14       make.top.equalTo(secondView.mas_top).offset(50);
15       make.size.mas_equalTo(CGSizeMake(150, 150));
16    }];

firstView调用mas_makeConstraints:, 传入的block如下:

^(MASConstraintMaker *make) {make.left.equalTo(secondView).offset(50);make.top.equalTo(secondView.mas_top).offset(50);make.size.mas_equalTo(CGSizeMake(150, 150));}

firstView调用mas_makeConstraints:方法,所以mas_makeConstraints:方法中的self即firstView,因此对Masonry中的mas_makeConstraints:方法可以做如下转换:

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {firstView.translatesAutoresizingMaskIntoConstraints = NO;MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:firstView];// initWithView:替换如下:constraintMaker.view = firstView;constraintMaker.constraints = NSMutableArray.new;// block(constraintMaker);替换如下:constraintMaker.left.equalTo(secondView).offset(50);constraintMaker.top.equalTo(secondView.mas_top).offset(50);constraintMaker.size.mas_equalTo(CGSizeMake(150, 150));  return [constraintMaker install];
}

constraintMaker.left调用

MASConstraintMaker.m- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {return [self constraint:nil addConstraintWithLayoutAttribute:layoutAttribute];
}- (MASConstraint *)left {return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];
}- (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 constraintNSArray *children = @[constraint, newConstraint];MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];compositeConstraint.delegate = self;[self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];return compositeConstraint;}if (!constraint) {newConstraint.delegate = constraintMaker;[constraintMaker.constraints addObject:newConstraint];}return newConstraint;
}

转换为

MASConstraintMaker.m- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {return [constraintMaker constraint:nil addConstraintWithLayoutAttribute:layoutAttribute];
}- (MASConstraint *)left {return [constraintMaker addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];
}- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:firstView layoutAttribute: NSLayoutAttributeLeft];MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute: NSLayoutAttributeLeft];if (!constraint) {   //constraint==nilnewConstraint.delegate = self;[self.constraints addObject:newConstraint];}return newConstraint;
}

MASViewAttribute

#import "MASViewAttribute.h"@implementation MASViewAttribute- (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;_item = item;_layoutAttribute = layoutAttribute;return self;
}

可以得到:
viewAttribute.view = firstView;
viewAttribute.item = fristrView;
viewAttribute.layoutAttribute = NSLayoutAttributeLeft;
MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute: NSLayoutAttributeLeft];
newConstraint.firstViewAttribute = viewAttribute;
newConstraint.layoutPriority = 1000; //约束默认优先级;
newConstraint.delegate = constraintMaker;
[self.constraints addObject:newConstraint];
return newConstraint;

.equalTo()

@implementation MASConstraint

- (id)init {NSAssert(![self isMemberOfClass:[MASConstraint class]], @"MASConstraint is an abstract class, you should not instantiate it directly.");return [super init];
}#pragma mark - NSLayoutRelation proxies- (MASConstraint * (^)(id))equalTo {return ^id(id attribute) {return self.equalToWithRelation(attribute, NSLayoutRelationEqual);};
}- (MASConstraint * (^)(id))mas_equalTo {return ^id(id attribute) {return self.equalToWithRelation(attribute, NSLayoutRelationEqual);};
}- (MASConstraint * (^)(id))greaterThanOrEqualTo {return ^id(id attribute) {return self.equalToWithRelation(attribute, NSLayoutRelationGreaterThanOrEqual);};
}- (MASConstraint * (^)(id))mas_greaterThanOrEqualTo {return ^id(id attribute) {return self.equalToWithRelation(attribute, NSLayoutRelationGreaterThanOrEqual);};
}- (MASConstraint * (^)(id))lessThanOrEqualTo {return ^id(id attribute) {return self.equalToWithRelation(attribute, NSLayoutRelationLessThanOrEqual);};
}- (MASConstraint * (^)(id))mas_lessThanOrEqualTo {return ^id(id attribute) {return self.equalToWithRelation(attribute, NSLayoutRelationLessThanOrEqual);};
}

可以看出:

• 每个带equalTo的方法实现都是相同的.
• MASConstraint是一个抽象类,很多方法需要在子类对象去实现,这样做,类似于适配器模式.equalToWithRelation方法在newConstraint对应的类MASViewConstraint中实现.

equalToWithRelation实现

@implementation MASViewConstraint
- (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation {return ^id(id attribute, NSLayoutRelation relation) {if ([attribute isKindOfClass:NSArray.class]) {NSAssert(!self.hasLayoutRelation, @"Redefinition of constraint relation");NSMutableArray *children = NSMutableArray.new;for (id attr in attribute) {MASViewConstraint *viewConstraint = [self copy];viewConstraint.layoutRelation = relation;viewConstraint.secondViewAttribute = attr;[children addObject:viewConstraint];}MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];compositeConstraint.delegate = self.delegate;[self.delegate constraint:self shouldBeReplacedWithConstraint:compositeConstraint];return compositeConstraint;} else {NSAssert(!self.hasLayoutRelation || self.layoutRelation == relation && [attribute isKindOfClass:NSValue.class], @"Redefinition of constraint relation");self.layoutRelation = relation;self.secondViewAttribute = attribute;return self;}};
}- (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]) {_secondViewAttribute = secondViewAttribute;} else {NSAssert(NO, @"attempting to add unsupported attribute: %@", secondViewAttribute);}
}

@implementation MASViewAttribute- (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;_item = item;_layoutAttribute = layoutAttribute;return self;
}

传入参数attribute为NSLayoutAttributeLeft,可转换为:

viewConstraint.layoutRelation = NSLayoutRelationEqual
viewConstraint.secontViewAttribute = secondView;  //secontViewAttribute为UIView时在setSecondViewAttribute:中会重新设置,使其成为MASViewAttribute类型(调用 _secondViewAttribute = [[MASViewAttribute alloc] initWithView:secondViewAttribute layoutAttribute:self.firstViewAttribute.layoutAttribute];)secondViewAttribute.view = secondView;  
secondViewAttribute.view.item = secondView;
secondViewAttribute.view.layoutAttribute = NSLayoutAttributeLeft;

.offset

// MASConstraint.m
- (MASConstraint * (^)(CGFloat))offset {return ^id(CGFloat offset){self.offset = offset;return self;};
}

viewConstraint.offset = 50;

install 约束安装

// MASConstraintMaker.m
- (NSArray *)install {if (self.removeExisting) {   //mas_remakeConstraints,重新设置约束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.m
- (void)install {if (self.hasBeenInstalled) {return;}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) {secondLayoutItem = self.firstViewAttribute.view.superview;secondLayoutAttribute = firstLayoutAttribute;}MASLayoutConstraint *layoutConstraint= [MASLayoutConstraint constraintWithItem:firstLayoutItemattribute:firstLayoutAttributerelatedBy:self.layoutRelationtoItem:secondLayoutItemattribute:secondLayoutAttributemultiplier:self.layoutMultiplierconstant: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;}MASLayoutConstraint *existingConstraint = nil;if (self.updateExisting) {  //mas_remakeContraintsexistingConstraint = [self layoutConstraintSimilarTo:layoutConstraint];}if (existingConstraint) {  //mas_updateConstraints// just update the constantexistingConstraint.constant = layoutConstraint.constant;self.layoutConstraint = existingConstraint;} else {  //mas_makeConstraints[self.installedView addConstraint:layoutConstraint];self.layoutConstraint = layoutConstraint;[firstLayoutItem.mas_installedConstraints addObject:self];}
}

我们看下MASLayoutConstraint

MASLayoutConstraint *layoutConstraint= [MASLayoutConstraint constraintWithItem:firstLayoutItemattribute:firstLayoutAttributerelatedBy:self.layoutRelationtoItem:secondLayoutItemattribute:secondLayoutAttributemultiplier:self.layoutMultiplierconstant:self.layoutConstant];

@interface MASLayoutConstraint : NSLayoutConstraint/***  a key to associate with this constraint*/
@property (nonatomic, strong) id mas_key;@end

从这里我们就可以看出来Masonry的原理了,底层依旧是调用系统的NSLayoutConstraint