Masonry------轻量级的布局框架

Masonry是什么？

Masonry是一个轻量级的布局框架，拥有自身的描述性语法，采用更加优雅的链式语法封装了自动布局autolayout，简洁明了，可读性高，并且同时支持iOS和Mac OSXMasonry
Masonry在GitHub

Masonry怎么用?

首先我们看一下官方的示例代码：

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

Masonry的一些属性与NSLayoutAttribute对照

MASViewAttribute	NSAutoLayout	说明
view.mas_left	NSLayoutAttributeLeft	左侧
view.mas_right	NSLayoutAttributeRight	右侧
view.mas_top	NSLayoutAttributeTop	上侧
view.mas_bottom	NSLayoutAttributeBottom	下侧
view.mas_leading	NSLayoutAttributeLeading	首部
view.mas_trailing	NSLayoutAttributeTrailing	尾部
view.mas_width	NSLayoutAttributeWidth	宽
view.mas_height	NSLayoutAttributeHeight	高
view.mas_centerX	NSLayoutAttributeCenterX	横向中点
view.mas_centerY	NSLayoutAttributeCenterY	纵向中点
view.mas_baseline	NSLayoutAttributeBaseline	文本基线

举例:

1. 居中显示一个View：

    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor redColor];
    //2.使用Masonry约束之前，一定要将view加到superView上，否则会报错
    [self.view addSubview:view1];
    //用masonry函数对你添加的view进行约束
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 设置view1居中
        make.center.equalTo(self.view);
        // 设置view2宽高
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
    /**
     *1.mas_makeConstraints 只负责添加新增约束，Autolayout中不能同时存在两条针对于同一对象的约束，否则会报错
     *2.mas_makeConstraints 针对上面的情况，会更新在block中出现的约束，确保不会出现两个相同的约束
     *3.mas_makeConstraints 会清除之前所有的约束，仅保留最新的约束
     */
    /**
     *mas_equal 除了支持NSNumber的数值类型外，就支持CGPoint CGSize UIEdgeInsets
     */

2.让一个view略小于其superView[边界15];

    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        //1.第一种布局方法
        make.top.equalTo(self.view).with.offset(15);
        make.left.equalTo(self.view).with.offset(15);
        make.bottom.equalTo(self.view).with.offset(-15);
        make.right.equalTo(self.view).with.offset(-15);
        //2.第二种
//        make.top.left.bottom.and.right.equalTo(self.view).insets(UIEdgeInsetsMake(15, 15, 15, 15));
        //3.第三种
//        make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(15, 15, 15, 15));
    }];

3.让两个高度为150 的veiw垂直居中并且等宽等间隔排列 间隔(10) 宽度自动计算

    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:view3];
    
    UIView *view4 = [[UIView alloc] init];
    view4.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view4];
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(self.view.mas_centerY);
        make.left.equalTo(self.view.mas_left).with.offset(10);
        make.right.equalTo(view4.mas_left).with.offset(-10);
        make.height.mas_equalTo(@150);
        make.width.equalTo(view4);
    }];
    [view4 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(self.view.mas_centerY);
        make.left.equalTo(view3.mas_right).with.offset(10);
        make.right.equalTo(self.view.mas_right).with.offset(-10);
        make.height.equalTo(view3);
        make.width.equalTo(view3);
    }];

使用Masonry过程中可能出现的错误:

一.错误信息统计（width改为with）

reason: 'Attributes should be chained before defining the constraint relation'
崩溃到masonry内部的方法里面：

崩溃的提示信息：

直接上代码：（这是运行没有问题的代码）

     [self.GradientLabel mas_makeConstraints:^(MASConstraintMaker *make) {
           make.right.equalTo(self.CurrenPriceLabel.mas_right);
          make.left.equalTo(self.VariationLabel.mas_left).**with**.offset(30);**／／更改的是此处的width变为with，否则会报错**
          make.**width**.equalTo(@60);**／／此处的width不需要改动**
          make.height.mas_equalTo(@30);
     }];

注意：解决方法将width更改为with即可。并不是全部的width都要改变，注意看上面的代码部分。

二.错误信息统计（父子控件之间的关系没有建立好）

reason：couldn't find a common superview for

解决方法：查－－－好自己做约束的父子控件之间的关系是否建立起来了。

         UITextField *nameTextField = [UITextField new];
         nameTextField.font = [UIFont systemFontOfSize:14];
         nameTextField.placeholder = @"请再次输入密码";
***        //父子控件的建立好关系：self.testView为父控件，nameTextField为子控件***
         [self.testView **addSubview**:nameTextField];
         ***//开始约束***
        [lable mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.testView.mas_left).with.offset(20);
        make.top.mas_equalTo(self.testView.mas_top).with.mas_offset(0);
        make.height.mas_equalTo(30);
        make.width.mas_equalTo(50);
     }];

可能出现的错误章节摘于作者 Xcode8