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 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 = 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==nil
        newConstraint.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: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;
    }


    MASLayoutConstraint *existingConstraint = nil;
    if (self.updateExisting) {  //mas_remakeContraints
        existingConstraint = [self layoutConstraintSimilarTo:layoutConstraint];
    }
    if (existingConstraint) {  //mas_updateConstraints
        // just update the constant
        existingConstraint.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:firstLayoutItem
                                        attribute:firstLayoutAttribute
                                        relatedBy:self.layoutRelation
                                           toItem:secondLayoutItem
                                        attribute:secondLayoutAttribute
                                       multiplier:self.layoutMultiplier
                                         constant:self.layoutConstant];

@interface MASLayoutConstraint : NSLayoutConstraint

/**
 *  a key to associate with this constraint
 */
@property (nonatomic, strong) id mas_key;

@end

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