masonry 源码解读

ios 手写布局的几种方式

• Frame
• AutoLayout
• VFL
• Masonry

---

ios 布局的几种方式

1.Frame

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 20, 30, 40)]; 

2.AutoLayout

UILabel * label = [[UILabel alloc]init];
    //使用代码布局 需要将这个属性设置为NO
    label.translatesAutoresizingMaskIntoConstraints = NO;
    label.backgroundColor = [UIColor redColor];
    //创建x居中的约束
    NSLayoutConstraint * constraintx = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    //创建y居中的约束
    NSLayoutConstraint * constrainty = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
    //创建宽度约束
    NSLayoutConstraint * constraintw = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100];
    //创建高度约束
    NSLayoutConstraint * constrainth = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100];
    //添加约束之前，必须将视图加在父视图上
    [self.view addSubview:label];
    [self.view addConstraints:@[constraintx,constrainty,constrainth,constraintw]];

3.VFL

Visual Format Language，即“可视化格式语言”。直接手写约束很复杂，使用VFL相对简单很多，但比较难进行调试。

 UILabel * label = [[UILabel alloc]init];
 [label addConstraints: [NSLayoutConstraint
                                constraintsWithVisualFormat:@"V:[view1]-8-[view2]"
                                options:NSLayoutFormatAlignAllLeading
                                metrics:nil                          
                                  views:NSDictionaryOfVariableBindings(view1, view2)]];    
 [self.view addSubview:label];

4.Masonry

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

1. 实现:

  UILabel * label = [[UILabel alloc]init];
    label.backgroundColor = [UIColor grayColor];
    [self.view addSubview:label];
    UIView *superView = self.view;
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(superView).offset(100);
        make.right.equalTo(superView).offset(-100);
        make.top.equalTo(superView).offset(200);
        make.bottom.equalTo(superView).offset(-200);
    }];

2. 解析

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

3.点语法

• 每个点语法实际调用的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);
    };
}

4.具体调动步骤:
MASConstraintMaker类：

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

粗略步骤：

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

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];
}

block参数的隐式回调
返回的值为一个block,block的返回值是MASConstraint类的实例对象，所以最终还是返回的MASConstraint类的实例对象。

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

install

1.判断是否有约束，有就遍历约束，调用uninstall清空之前所有的约束
2.无约束，就遍历数组的约束对象，然后调用install逐个安装
3.调用系统的方法安装约束

- (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) {
        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];
    }
}