第三方控件Masonry和IOS代码实现Autolayout的比较

1.自动布局的核心公式

• obj1.property1 =（obj2.property2 * multiplier）+ constant value
• 可以理解成控件A的Width等于控件B的Width乘以一个固定的倍数C然后加上一个固定的值D.
• 也可以理解成控件A的Height等于控件B的Height乘以一个固定的倍数C然后加上一个固定的值D.

通过IOS代码实现autolayout两个View的代码如下,虽然不复杂,但是非常繁琐.

    // 1.蓝色的view
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 禁止autoresizing自动转为约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

    // 2.红色的view
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 禁止autoresizing自动转为约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

    /**** 添加约束****/
    // 3.添加蓝色view的约束

    // 3.1左边约束
    NSLayoutConstraint *leftlcs_b = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30];
    [self.view addConstraint:leftlcs_b];

    // 3.2底部约束
    NSLayoutConstraint *bottomlcs_b = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-30];
    [self.view addConstraint:bottomlcs_b];

    // 3.3右边约束
    NSLayoutConstraint *rightlcs_b = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-30];
    [self.view addConstraint:rightlcs_b];

    // 3.4宽度约束
    NSLayoutConstraint *wlcs_b = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
    [self.view addConstraint:wlcs_b];

    // 3.5高度约束
    NSLayoutConstraint *hlcs_b = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50];
    [blueView addConstraint:hlcs_b];


    // 4.添加红色view的约束
    // 4.1 右边的约束
    NSLayoutConstraint *rightlcs_r = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30];
    [self.view addConstraint:rightlcs_r];

    // 4.2 顶部对齐
    NSLayoutConstraint *toplcs_r = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    [self.view addConstraint:toplcs_r];

    //4.3 底部对齐
    NSLayoutConstraint *bottomlcs_r = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:bottomlcs_r];
}

• 通过IOS实现autolayout要注意约束要添加给谁,如果是布局两个同级的View的约束,那么要把这个约束添加给他们的父类,如下图所示 

  

• 对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上,如下图所示

  

• 对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上,如下图所示
• 
  

下面主要介绍第三方控件Masonry实现Autolayout

• 首先下载第三方控件Masonry,然后将控件导入到我们的代码中
• 在需要自动布局的页面导入Masonry的头文件#import "Masonry.h"
• 在导入头文件之间最好先声明下面2个宏,这样可以使我们的代码更加简练(1)#define MAS_SHORTHAND (2)#define MAS_SHORTHAND_GLOBALS

做好以上准备工作后我们可以利用第三方控件代码实现Autolayout了,实现和上述IOS的两个View的代码如下

  //创建一个蓝色的UIView
 UIView  *bluewView = [[UIView alloc]init];
    bluewView.backgroundColor = [UIColor blueColor];
    [self.view addSubview: bluewView];

    //创建一个红色的UIView
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview: redView];

    //设置蓝色View的约束
  [bluewView makeConstraints:^(MASConstraintMaker *make) {
      make.left.equalTo(self.view.left).offset(30);
      make.width.equalTo(100);
      make.height.equalTo(100);
      make.bottom.equalTo(self.view.bottom).offset(-30);

  }];
    //设置红色View的约束

    [redView makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(bluewView.width);
        make.height.equalTo(bluewView.height);
        make.left.equalTo(bluewView.right).offset(30);
        make.top.equalTo(bluewView.top);
    }];

在Masonry实现修改约束的代码如下

 //修改约束
    [bluewView updateConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(150);
        make.height.equalTo(150);
    }];