RAC之masonry源码深度解析


写在前面:
本文不是讲解masonry的基础使用,而是希望借着masonry的源码解析给大家渗透链式编程的思想和展示其具体实现。
现在RAC(ReactiveCocoa)很火,借着这个成熟的案例让大家窥其一斑,作者在此抛砖引用,供大家交流参考。

一、NSLayoutConstraint约束

实际iOS用NSLayoutConstraint对控件进行约束。比如:想要让子控件的顶部距离父控件顶部10pt,添加约束的实际条件就是满足subView.top = superView.top * 1 + 10这个公式就可以了。
NSLayoutConstraint的实际就是对该公式的代码解释,代码如下:

    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:subView
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                                                   constant:padding.top];
    [self.view addConstraints:topConstraint];

但我们需要对控件的top,bottom,left,right进行约束就特别麻烦。在OC中有一个库MasonryNSLayoutConstraint进行了封装,********(****Swift****中使用****SnapKit****,****SnapKit****其实就是****Masonry****的****Swift****版本,实现思路大体一致。)********

二:masonry介绍

masonry是iOS布局控件的轻量级框架。其原理是通过链式调用的方式对NSLayoutConstraint进行封装,简化了控件的约束方式。

抓住两头:
其实massory最终还是利用苹果官方提供的NSLayoutConstraint,只是利用链式编程的方式进一步封装。

接下来思考两个问题

  1. 怎么通过封装?
  2. 链式编程来实现约束的添加的?

接下来我们就对masonry的封装做进一步解释。

1.masonry添加约束的代码实现

- (void)viewDidLoad {
    [super viewDidLoad];
    UIView *subView = [[UIView alloc]init];
    subView.backgroundColor = [UIColor purpleColor];
    
    //先添加控制,后设置约束,不然找不到约束的依赖,会报错。
    [self.view addSubview:subView];
    [subView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.equalTo(@20);
        make.right.bottom.equalTo(@-10);
    }];
}

2.masonry方法执行步骤解析:

  • 子控件调用mas_makeConstraints方法,mas_makeConstraints方法有个block参数(返回值为void,参数为MASContraintMaker的实例对象make);
  • block作为方法的参数就是隐式调用(block并没有真正调用,需要在方法内部,block()调用一次,才会真正执行block);
  • block的有一个MASContraintMaker类的实例make作为参数,让make去添加约束;
  • MASContraintMaker类中有个可变数组的属性,用于保存约束;
  • 执行mas_makeConstraints传入进行的block;
  • 遍历数组中的约束,完成约束的安装;

以上只是文字描述了执行的大致步骤,具体的代码实现是怎么样的呢?
我们接下里通过三个问题来展开。

3.疑问

> 1. make的点语法代表什么意思?
> 2. 为什么可以连续用点语法?
> 3. 具体代码解析是什么样的?

问题一:make的点语法代表什么意思?

make.left.top.equalTo(@20);

实质就是MASContraintMaker类的实例对象make调用了属性的getterter方法。
扒开源码我们会看到

@interface MASConstraintMaker : NSObject

@property (nonatomic, strong, readonly) MASConstraint *left;
@property (nonatomic, strong, readonly) MASConstraint *top;
//省略了bottom,right,baseline等属性。

@end

//getter方法,返回的是MASConstraint对象,getter方法调用 addConstraintWithLayoutAttribute:
- (MASConstraint *)left {
    return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];
}

//返回的是MASConstraint对象,接着调用constraint: addConstraintWithLayoutAttribute:方法
- (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]) {
        //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;
}

问题二:为什么可以连续用点语法?

链式编程的核心:
每个点语法实际调用的getter方法,getter方法的返回值为实例对象本身,然后继续调用getter方法,就成为链式了。
结合代码进行具体解释:make.left.top.equalTo(@10);
我们对其分开解释:点语法返回的时一个新的约束newConstraint。

`make.left.top.equalTo(@10);`
//分开写就为
newConstraint1 = make.left;
newConstraint2 = newConstraint1.top;
newConstraint2.equalTo(@10);

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

问题三:整个方法的具体调用步骤是什么样的?

首先解释下MASConstraintMaker类:

MASConstraintMaker类就是一个工厂类,负责创建MASConstraint类型的对象(依赖于MASConstraint接口,而不依赖于具体实现)


粗略步骤:

  1. UIView的类调用mas_makeConstraints方法
  2. mas_makeConstraints有个block参数,会做隐式回调
  3. 获得约束数组,通过install安装约束。

1.mas_makeConstraints方法解析

用户是UIView调用扩展的UIView+MASAdditions分类的mas_makeConstraints方法来为当前视图添加约束的。
mas_makeConstraints方法的返回值是一个数组(NSArray),数组中所存放的就是当前视图中所添加的所有约束。因为Masonry框架对NSLayoutConstraint封装成了MASViewConstraint,所有此处数组中存储的是MASViewConstraint对象。

接下来来看mas_makeConstraints的参数,mas_makeConstraints测参数是一个类型为void(^)(MASConstraintMaker *)的匿名block(也就是匿名闭包),该闭包的返回值为void, 并且需要一个MASConstraintMaker工厂类的一个对象。该闭包的作用就是可以让mas_makeConstraints方法通过该block给MASConstraintMaker工厂类对象中的MAConstraint属性进行初始化。
具体可以参考下面的代码及其注释:

//新建并添加约束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {
   //关闭自动添加约束,由我们手动添加约束
    self.translatesAutoresizingMaskIntoConstraints = NO;
    //实例化constraintMaker对象,来操作接下来的约束
    MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
    //block作为参数,这里完成隐式调用,完成回调,通过block将constraintMaker对象回调给用户让用户对constraintMaker中的MAConstraint类型的属性进行初始化。换句话说block中所做的事情就是之前用户设置约束是所添加的代码,比如make.top(@10) == ( constraintMaker.top = 10 )。
    block(constraintMaker);
    //添加约束,但会Install的约束数组
    return [constraintMaker install];
}

2. block参数的隐式回调

返回的值为一个block,block的返回值是MASConstraint类的实例对象,所以最终还是返回的MASConstraint类的实例对象。

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

3.约束安装install方法

实际的过程是:

  1. 判断是否有约束,有就遍历约束,调用uninstall清空之前所有的约束
  2. 无约束,就遍历数组的约束对象,然后调用install逐个安装
  3. 调用系统的方法安装约束
- (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;
}

文末:

以上是masonry。通过这个也是给大家渗透链式编程的思想。
可能很多人对block作为返回值比较难理解,但这是整个链式编程的核心。有什么疑问也可以在评论出留言。
如果你喜欢我的原创文章,也渴望你的赞。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容