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对象，然后再把约束统一添加到视图上面。

图1

布局方式

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

参考资料

iOS开发-自动布局篇：史上最牛的自动布局教学！

最后编辑于：2017.12.10 02:21:41

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342