Masonry源码解析

Masonry 的实现其实特别简洁，只有 2800 多行代码，10个类文件，以下是核心类的导图，以及核心流程解析：

NSLayoutConstraint、Masonry 对比

NSLayoutConstraint 添加 AutoLayout 约束

首先，给一个 view 添加 AutoLayout 的原生方法：

  • 使用 NSLayoutAttribute 创建一个 NSLayoutConstraint 对象;
  • 然后 [view addConstraint:]
UIView *superView = self.view;
UIView *view1 = [UIView new];
[superView addSubView:view1];

// 禁用自动约束
view1.translatesAutoresizingMaskIntoConstraints = NO;

// 创建一个 view1 相对于 superView 的 left 约束
NSLayoutConstraint *leftConstraint
= [NSLayoutConstraint constraintWithItem:view1
                               attribute:NSLayoutAttributeLeft
                               relatedBy:NSLayoutRelationEqual
                                  toItem:superView
                               attribute:NSLayoutAttributeLeft
                              multiplier:1.0
                                constant:10];
// 省略 30 行
NSLayoutConstraint *rightConstraint;
NSLayoutConstraint *topConstraint;
NSLayoutConstraint *bottomConstraint;
    
[view1 addConstraint:leftConstraint];
[view1 addConstraint:rightConstraint];
// 省略...

使用 Masonry 添加 AutoLayout 约束

上文添加的约束，使用 Masonry 如下，简化了大概 35 行代码：

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(superView).offset(10);
}];

Masonry 添加约束流程解析

mas_makeConstraints 内部逻辑展开如下：

    [view1 mas_makeConstraints:^(...) {
        view1.translatesAutoresizingMaskIntoConstraints = NO;
        MASConstraintMaker *maker = [[MASConstraintMaker alloc] initWithView:view1];
 
        // 调用 block()：
        maker.left.equalTo(0);
        maker.width.and.top.equalTo().offset(2);
 
        [maker install];
    }]

可以从上述例子中看到，Masonry 添加约束调用的 [view1 mas_makeConstraints:] 里，主要做了以下事情：

  1. 禁用 translatesAutoresizingMaskIntoConstraints 自动约束；
  2. 初始化一个 ConstraintMaker （约束工厂类），并给 maker 添加 上下左右/宽高 的约束（注意这一步只是将约束记录到 maker 的 constraint array 中）；
  3. 在 maker install 时，将 constraint array 中的约束逐个 add 到 view 上；

1：生成约束（并 record）

1.1 make.left

    // 语法分析：
    MASConstraintMaker *make = [MASConstraintMaker new];
    // make.left 只是 get 方法（ MASConstraintMaker 的 MASConstraint* left 属性）
    MASConstraint *mas = make.left;
  • 可以看到 make.left 是调用 .left 属性；
  • 但由于重写了 left 属性的 get 方法，所以，make.left 会调用 [make addConstraint:] 添加一条 NSLayoutAttributeLeft 类型的约束；
  • left 属性的 get 方法，最终 return 了一个 MASConstraint 对象，所以后续才能链式调用；
// MASConstraintMaker.m

- (MASConstraint *)left {
    return [self constraint:nil addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];
}

- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
    
    // 用 view 和 NSLayoutAttribute 构建 MASViewAttribute
    MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];
    // 用 MASViewAttribute 构建 MASViewConstraint
    MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];
    
    // ... 省略
    
    if (!constraint) {
        // 作用？？
        newConstraint.delegate = self;
        // 将 MASViewConstraint 添加到 make.constraints(Array) 中，等 install 时再将约束 add 到 view 上
        [self.constraints addObject:newConstraint];
    }
    // return 的 MASViewConstraint 可以继续 链式调用
    return newConstraint;
}

1.2 make.left.and

MASConstraint *mas = make.left; 中可以看到 make.left 返回的是一个 MASConstraint * 类型。

make.left.and.with and 和 with 作为 get 方法被调用，里边只是简单的 return 了 MASConstraint self，所以可以继续链式调用

1.3 make.left.and.width

MASConstraint *mas = make.left; 中可以看到 make.left 返回的是一个 MASConstraint * 类型。因此，链式调用到 .width 时，调用的不再是 maker 的方法，而是 MASConstraint 的方法：

// MASConstraint.m

- (MASConstraint *)width {
    return [self addConstraintWithLayoutAttribute:NSLayoutAttributeWidth];
}

MASConstraint 是一个 Abstract 抽象类：只提供接口，内部是空实现，需要子类处理。因此 width 里调用的 addConstraintWithLayoutAttribute: 会调用到子类 MASViewConstraint 中：

// MASViewConstraint.m

- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
    return [self.delegate constraint:self addConstraintWithLayoutAttribute:layoutAttribute];
}

MASViewConstraint 中并没有生成或添加约束，只是调用 delegate 去处理。这个 delegate 刚好就是前边的 maker 对象，所以又回到了上一步 make.left 一样的逻辑（注意上一步中省略掉没贴的代码）：

// MASConstraintMaker.m

- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
    
    // 同 make.left ，省略...
    // MASViewAttribute *viewAttribute = ;
    // MASViewConstraint *newConstraint = ;

    // make.left 时，此方法传入的 constraint 是 nil，因此分析 make.left 时，这块代码省略了
    // make.left.width 到 .width 时，这里传入的 constraint 就是 make.left 生成的 newConstraint 对象
    if ([constraint isKindOfClass:MASViewConstraint.class]) {
        // 注： 此处的 constraint 即 left constraint；newConstraint 即 width constraint
        NSArray *children = @[constraint, newConstraint];
        // MASCompositeConstraint 是 MASConstraint 的子类，constraint group
        MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];
        compositeConstraint.delegate = self;
        
        // 替换约束：
        // 替换已经记录到 maker.constraintArray 中的 left constraint 约束为 constraint group
        [self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
        return compositeConstraint;
    }
    // ... 省略 
    // if 条件成立，已经 return，后续不会再重复 add constraint 到 array
}

// array 替换元素
- (void)constraint:(MASConstraint *)constraint shouldBeReplacedWithConstraint:(MASConstraint *)replacementConstraint {
    NSUInteger index = [self.constraints indexOfObject:constraint];
    [self.constraints replaceObjectAtIndex:index withObject:replacementConstraint];
}

1.4 make.left.and.width.equalTo()

用于 make.left 作为 get 方法返回的是 MASViewConstraint 对象，可以继续链式调用：make.left.equalTo(superView)，即调用 MASViewConstraint.equalTo();

equalTo 入参是 id 类型的 attribute，attribute 类型可以是 MASViewAttribute、UIView、NSValue，equalTo 方法内部对类型做了 if 判断;

equalTo 是个宏定义，展开后的调用链是：
qualTo(x) -> mas_equalTo(x) -> MASViewConstraint.equalToWithRelation(x, NSLayoutRelationEqual)

注意：

  • 这里调用过程中将 NSLayoutRelation 参数也传入到了 MASViewConstraint.equalToWithRelation()；
  • equalToWithRelation 中保存了 equalTo 传入的 id 类型 attribute 和 NSLayoutRelation 到 MASViewConstraint 对象中，并返回 MASViewConstraint 对象，以继续链式调用；
// MASViewConstraint.m

- (MASConstraint * (^)(id))mas_equalTo {
    return ^id(id attribute) {
        return self.equalToWithRelation(attribute, NSLayoutRelationEqual);
    };
}

- (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation {
    return ^id(id attribute, NSLayoutRelation relation) {
        // ... 简化
        
        // 保存了 equalTo 传入的 attribute 和 NSLayoutRelation 类型
        self.layoutRelation = relation;
        self.secondViewAttribute = attribute;
        // 继续返回 MASConstraint，链式调用
        return self;
    };
}

1.5 make.left.equalTo().offset()

继续链式调用 offset：make.left.equalTo(superView).offset(2);

注：

  • offset 和 equalTo 不同，不是像 equalTo有入参的，所以可以加括号 equalTo(xxx);
  • offset方法是一个无入参方法，但是方法的返回值是一个有入参有返回值的 block 类型，因此可以 .offset(3) 调用；
  • 并且，由于 block 的返回值仍是 MASConstraint 对象，所以可以继续链式调用；

简化逻辑如下：

    // make.left 是 get 方法
    MASConstraint* mas = make.left;
    MASConstraint*(^block)(CGFloat f) = mas.offset;
    // 由于 .offset 的 返回值是 block，所以，可以直接调用：
    mas.offset(2);
    // mas.offset(2) 等同于：
    block(2);
    

    // block 的返回值
    MASConstraint *mas2 = mas.offset(2);

1.6 make.xxx

  • 其它 make.center make.insets.and.size 都是一样的用法;
  • make.left.priority(MASLayoutPriorityDefaultLow) 等于 make.left.priorityLow；

2：添加约束

2.1 [make install]

对 MASConstraintMaker *make 添加约束后，make install 最后执行约束：

// MASConstraintMaker.m

- (NSArray *)install {
    
    // mas_remakeConstraints 的逻辑：先对已加的约束全部移除，再重新添加
    if (self.removeExisting) {
        NSArray *installedConstraints = [MASViewConstraint installedConstraintsForView:self.view];
        for (MASConstraint *constraint in installedConstraints) {
            [constraint uninstall];
        }
    }
    
    NSArray *constraints = self.constraints.copy;
    // 遍历 make 里添加的每个 MASConstraint 并 install
    for (MASConstraint *constraint in constraints) {
        // mas_updateConstraints 的逻辑： 标记是否需要更新，稍后在  MASViewConstraint install 里更新已加的约束
        constraint.updateExisting = self.updateExisting;
        
        // 最终 install 约束的还是在 MASViewConstraint 里
        [constraint install];
    }
    [self.constraints removeAllObjects];
    return constraints;
}

2.2 [constraint install]

// MASViewConstraint.m

- (void)install {
    // ... 省略：避免重复添加的逻辑
    
    // 取出 MASViewConstraint 记录的 两个 MASViewAttribute 对象
    MAS_VIEW *firstLayoutItem = self.firstViewAttribute.item;
    NSLayoutAttribute firstLayoutAttribute = self.firstViewAttribute.layoutAttribute;
    MAS_VIEW *secondLayoutItem = self.secondViewAttribute.item;
    NSLayoutAttribute secondLayoutAttribute = self.secondViewAttribute.layoutAttribute;

    // ... 省略
    
    // 1、构建一个 NSLayoutAttribute
    MASLayoutConstraint *layoutConstraint
        = [MASLayoutConstraint constraintWithItem:firstLayoutItem
                                        attribute:firstLayoutAttribute
                                        relatedBy:self.layoutRelation
                                           toItem:secondLayoutItem
                                        attribute:secondLayoutAttribute
                                       multiplier:self.layoutMultiplier
                                         constant:self.layoutConstant];

    // ...
    
    //    创建完约束对象后，寻找约束该添加到那个View上:
    if (self.secondViewAttribute.view) { //    如果是两个视图相对约束，就获取两种的公共父视图。
        MAS_VIEW *closestCommonSuperview = [self.firstViewAttribute.view mas_closestCommonSuperview:self.secondViewAttribute.view];
        self.installedView = closestCommonSuperview;
    } else if (self.firstViewAttribute.isSizeAttribute) { //    如果添加的是Width或者Height，那么就添加到当前视图上
        self.installedView = self.firstViewAttribute.view;
    } else { //    如果既没有指定相对视图，也不是Size类型的约束，那么就将该约束对象添加到当前视图的父视图上
        self.installedView = self.firstViewAttribute.view.superview;
    }

    // 是否已经添加了约束
    MASLayoutConstraint *existingConstraint = nil;
    
    // mas_updateConstraints 的逻辑
    if (self.updateExisting) {
        existingConstraint = [self layoutConstraintSimilarTo:layoutConstraint];
    }
    if (existingConstraint) { // 存在，直接重新赋值
        existingConstraint.constant = layoutConstraint.constant;
        // ...
    } else {
        // 不存在，添加
        // 2、[view addConstraint:NSLayoutAttribute]; !!!
        [self.installedView addConstraint:layoutConstraint];
        // ...
    }
}

代码技巧

block 灵活使用

block 写法

    @property (nonatomic, strong) UIView *(^myBlock)(NSLayoutAttribute attr);
    
    self.myBlock = ^UIView *(NSLayoutAttribute attr) {
        return greenView;
    };

        // blcok 在右侧时，^ 在最前
    dispatch_block_t t = ^void(void) {
    };
    
    UIView *(^block)(NSLayoutAttribute attr) = self.myBlock;
    
    self.myBlock = block;

更多 block 语法，见：How Do I Declare A Block in Objective-C?

block 作为入参简化外部调用

在方法需要传入一个 ConfigModel 时，使用 block 作为入参：让外部无需关注 ConfigModel 初始化方式，只需要关注配置项

// 使用：
[view mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(lastView).offset(2);
}];

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {

    // new 一个 maker，然后调用 block 传出去
    MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
    // 外部对 maker 配置后，maker install
    block(constraintMaker);
    
    return [constraintMaker install];
}

应用案例： SDK 初始化

[SHWAccountSDK setupConfig:^(SHWAccountConfig *config) {
    config.appKey = @"1";
    config.secret = @"2";
}];

block 入参作为 result 回调

[SHWAccountSDK getSMSCode:phoneNum success:^(BOOL isSuccess) {
    // getSMSCode 内部 new 了一个 Request 对象；
} failure:^(NSString *errCode, NSString *errMsg) {

}];

MyRequest *request;
[request startWithSuccess:^(BOOL isSuccess) {
    NSLog(@"getSMSCodeAsyncWithPhoneNum success");
} failure:^(NSString *errCode, NSString *errMsg) {
    NSLog(@"getSMSCodeAsyncWithPhoneNum fail");
}];

block 作为返回值，链式调用

通常函数的入参是 block 用的比较多，但函数的返回值是 block 时，可以写出链式调用的优雅写法：

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

// 使用：
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_bottom).offset(padding);
}];

原理：

    MASConstraint *mas = [MASConstraint new];
    MASConstraint*(^block)(CGFloat f) = mas.offset;
    
    // 以下相等
    block(2);
    mas.offset(2);
    // 由于 mas.offset 的返回值是一个 （入参是 CGFloat 的）block，在后边直接追加 （2），相当于调用 block
    // 并且，由于 block 的返回值仍是 mas 类型，所以后边可以继续链式调用

对比：

// 返回值不是 block，只是 self class 时
- (MASConstraint *)setOffset:(CGFloat)offset {
    self.offset = offset;
    return self;
}
// 使用：
MASConstraint *mas = [MASConstraint new];
// 只能这样调用
[[mas setOffset:3] setOffset:1];

MASBoxValue: mas_equalTo、equalTo

mas_equalTo() 可以传入多种类型入参：·

    [view1 makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(view2);
        make.left.mas_equalTo(3);
        make.left.mas_equalTo(@(2));
        make.left.mas_equalTo(view2.mas_left);
        make.size.mas_equalTo(CGSizeMake(10, 10));
    }];

其定义如下：


#define MASBoxValue(value)      _MASBoxValue(@encode(__typeof__((value))), (value))
#define mas_equalTo(...)        equalTo(MASBoxValue((__VA_ARGS__)))

- (MASConstraint * (^)(id))equalTo {
    return ^id(id attribute) {
        return ...;
    };
}

// 尽管传入的是 id 类型，但是解析也还是要支持变参和，并将 float，double，int 这样的值类型数据转换成和 equalTo 一样的对象 NSNumber 数据：
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(int)) == 0) {
        int actual = (int)va_arg(v, int);
        obj = [NSNumber numberWithInt:actual];
    } // ... 省略
    
    va_end(v);
    return obj;
}

这也顺便解释了 mas_equalTo 和 equalTo 的区别：没有区别，mas_equalTo 调用的还是 equalTo，只是调用前对入参进行了 boxValue 转换类型

相关阅读

iOS开发之Masonry框架源码解析
读 SnapKit 和 Masonry 自动布局框架源码

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

推荐阅读更多精彩内容