iOS开发中Masonry的使用总结：

Posted 2020-09-25

 一、AutoLayout基本概念：

     1、利用约束来控制视图的大小和位置，系统会在运行时通过设置的约束计算得到frame再绘制屏幕。Autolayout提供的两个关键词是：约束,参照，Autolayout其实核心思想是设置frame，再确定视图的位置与尺寸。

     2、两个属性Content Compression Resistance（排挤，值越高越固定）和Content Hugging（拥抱）

     3、preferredMaxLayoutWidth用来制定最大的宽，一般用在多行的UILabel中

     4、systemLayoutSizeFittingSize方法能够获得view的高度

     5、ios7有两个很有用的属性，topLayoutGuide和bottomLayoutGuide，这个两个主要是方便获取UINavigationController和UITabBarController的头部视图区域和底部视图区域。

     

     

    二、AutoLayout一些方法的区别：

     1、setNeedsLayout：告知页面需要更新，但是不会立刻开始更新。执行后会立刻调用layoutSubviews。

     2、layoutIfNeeded：告知页面布局立刻更新。所以一般都会和setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。

     3、layoutSubviews：系统重写布局

     4、setNeedsUpdateConstraints：告知需要更新约束，但是不会立刻开始

     5、updateConstraintsIfNeeded：告知立刻更新约束

     6、updateConstraints：系统更新约束

     

     

     三、Masonry基本概念：

     1、Masonry 是一个对系统 NSLayoutConstraint 进行封装的第三方自动布局框架，采用链式编程的方式提供给开发者 API 。系统 AutoLayout 支持的操作， Masonry 都支持。

     2、Masonry 采取了链式编程的方式，代码理解起来非常清晰易懂，而且写完之后代码量看起来非常少。之前用 NSLayoutConstraint 写很多代码才能实现的布局，用 Masonry 最少一行代码就可以搞定。

     3、Masonry 是同时支持 Mac 和 iOS 两个平台的，在这两个平台上都可以使用 Masonry 进行自动布局。

     

     

      四、Masonry使用注意事项：

      1、在使用 Masonry 添加约束之前，需要在 addSubview 之后才能使用，否则会导致崩溃。

      2、在添加约束时初学者经常会出现一些错误，约束出现问题的原因一般就是两种：约束冲突和缺少约束。对于这两种问题，可以通过调试和 log 排查。

      3、之前使用 Interface Builder 添加约束，如果约束有错误直接就可以看出来，并且会以红色或者黄色警告体现出来。而 Masonry 则不会直观的体现出来，而是以运行过程中崩溃或者打印异常 log 体现，所以这也是手写代码进行 AutoLayout 的一个缺点。

     

      4、mas_equalTo适用数值元素，equalTo适合多属性的比如make.left.and.right.equalTo(self.view)

      5、方法and和with只是为了可读性，返回自身，比如make.left.and.right.equalTo(self.view)和make.left.right.equalTo(self.view)是一样的。

      6、因为iOS中原点在左上角所以注意使用offset时注意right和bottom用负数。

      7、开发项目时是先在iOS8上调试完成的，测试时发现iOS7以下低版本的系统会发生奔溃的现象，修复后总结问题主要是在equalTo的对象指到了父视图的父视图或者父视图同级的子视图上造成的。

 

        五、示例代码如下：

    //红，绿，蓝，紫

    UIView* redView=[[UIView alloc]init];

    redView.backgroundColor=[UIColor redColor];

    [self.view addSubview:redView];

    

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {

        

        make.top.equalTo(self.view.mas_top).offset(0);

        make.left.equalTo(self.view.mas_left).offset(0);

        //设置宽度为self.view的一半，multipliedBy是倍数的意思，也就是，使宽度等于self.view宽度的0.5倍

        make.width.equalTo(self.view.mas_width).multipliedBy(0.5);

        make.height.equalTo(self.view.mas_height).multipliedBy(0.5);

        

    }];

   

    

    UIView* greenView=[[UIView alloc]init];

    greenView.backgroundColor=[UIColor greenColor];

    [self.view addSubview:greenView];

    

    

    [greenView mas_makeConstraints:^(MASConstraintMaker *make) {

    

        make.top.equalTo(redView.mas_top);//与redView顶部对齐

        make.left.equalTo(redView.mas_right);

        make.width.and.height.equalTo(redView);

        

    }];

   

    

    UIView* blueView=[[UIView alloc]init];

    blueView.backgroundColor=[UIColor blueColor];

    [self.view addSubview:blueView];

    

    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {

        

        make.leading.equalTo(redView);//与redView左对齐

        make.top.equalTo(redView.mas_bottom);

        make.width.and.height.equalTo(redView);

        

    }];

    

    

    UIView* purpleView=[[UIView alloc]init];

    purpleView.backgroundColor=[UIColor purpleColor];

    [self.view addSubview:purpleView];

    

    [purpleView mas_makeConstraints:^(MASConstraintMaker *make) {

        

        make.top.equalTo(greenView.mas_bottom);

        make.left.equalTo(blueView.mas_right);

        make.width.and.height.equalTo(redView);

      

    }];

 

      六、计算UITableView动态Cell高度：

  // 设置tableView自动高度

  _tableView.rowHeight = UITableViewAutomaticDimension;

   [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {

               make.edges.equalTo(self.view);

      }];

   - (CGFloat)tableView:(UITableView *)tableViewestimatedHeightForRowAtIndexPath:(NSIndexPath      *)indexPath {

             return 40.f;

     }

 

    七、UIScrollView自动布局：

    self.scrollView.contentSize = CGSizeMake(1000, 1000);

     [self.scrollViewmas_makeConstraints:^(MASConstraintMaker *make) {

                make.edges.equalTo(self.view);

    }];