Masonry

前言

     #纯手写代码所经历的关于页面布局的三个时期 MagicNumber -> autoresizingMask -> autolayout

在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了
在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变
在iphone5-iphone5s时代 window的size变了(320,568) 这时autoresizingMask派上了用场(为啥这时候不用Autolayout? 因为还要支持ios5呗) 简单的适配一下即可
在iphone6+时代 window的width也发生了变化(相对5和5s的屏幕比例没有变化) 终于是时候抛弃autoresizingMask改用autolayout了(不用支持ios5了 相对于屏幕适配的多样性来说autoresizingMask也已经过时了)
那如何快速的上手autolayout呢? 说实话 当年ios6推出的同时新增了autolayout的特性 我看了一下官方文档和demo 就立马抛弃到一边了 因为实在过于的繁琐和啰嗦(有过经验的朋友肯定有同感)
直到iPhone6发布之后 我知道使用autolayout势在必行了 这时想起了以前在浏览Github看到过的一个第三方库Masonry 在花了几个小时的研究使用后 我就将autolayout掌握了(重点是我并没有学习任何的官方文档或者其他的关于autolayout的知识) 这就是我为什么要写下这篇文章来推荐它的原因.

正文

Masonry创建约束的方法有三个：

//新添加约束 如果之前有相关约束就可能会引起重复添加错误 如果其中一个约束改变 那么必须先卸载之前的约束 再用此方法添加 
1.- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//此方法只能用在约束没有改变参照的情况下 更新相关约束
2.- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//此方法回清空之前所有的约束 重置所有约束 相当于点击了故事板中的Clear Constraints
3.- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

• 方法1是最常用也是用在最简单场景下的，例如我给一个UIImageView设定一个约束，
  [self.view addSubview:self.iconView]; [self.iconView mas_makeConstraints:^(MASConstraintMaker *make) { //设定iconView的水平中心与控制器view水平中心重合，底部距离控制器view上部160，宽高都为85 make.centerX.equalTo(self.view); make.bottom.equalTo(self.view).offset(-160); make.width.height.equalTo(@85); }];
  实际效果
  

  

  Paste_Image.png

• 方法2是在某个约束需要被改变的时候，并且特别注意的是约束的参照不变的情况下了，约束参照如果改变的话会发生错误，下文举例。下面举个简单的动画，详述此方法
  // 第一个方法中列子已经添加了约束，那么我想做一个iamgeView向上的动画，更新约束 参照不能变 只能改变constant常数值
  [self.iconView mas_updateConstraints:^(MASConstraintMaker *make) {
  make.bottom.equalTo(self.view).offset(-([UIScreen mainScreen].bounds.size.height - 160));
  }];
  //改变了iamgeView的约束再运用一个简单的UIView动画 调用layoutifneed就可以了，
  //但要注意的是AutoLayout动画必须调用 layoutIfNeeded,layoutIfNeeded会根据约束重新设置frame
  [UIView animateWithDuration:5 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:2 options:0 animations:^{
  [self.view layoutIfNeeded];
  } completion:^(BOOL finished) {
  NSLog(@"动画完成"); }];
  实际效果（动画效果参数在UIView动画中设置）
  

  

  Paste_Image.png

• 方法3是相当于先清除了所有约束然后根据你设置的约束确定控件的frame此处不再赘述，下面举例一种情况，在cell自适应高度中经常通过设置contentiVew的底部约束，这里就通过改变其底部约束其它约束不变的方法，达到tableViewCell高度自适应。
  首先简单结束一下tabelViewcell高度自适应的步骤：iOS8中引入一个UITableView的一项新功能 — selfSizeingCells:
  1.为原型单元格定义AutoLayout约束 contentView必须有底部依赖
  3.设置预估行高,tableView.estimatedRowHeight;
  2.指定tableView.rowHeight = UITableViewAutomaticDimension

  //此处首先需要设置一个全局变量记录
  @property (nonatomic, strong) MASConstraint *contentViewbottomConstraint;
  //搞一个全局属性接收contentView的底部约束 在需要卸载的地方卸载这个全局属性约束
    self.contentViewbottomConstraint = make.bottom.equalTo(self.view).offset(-160);
    make.width.height.equalTo(@85);
    }];

    // 在需要contenView改变其底部参照的时候，首先把刚才接收的全局变量卸载，再为   contenView添加新的底部参照和底部约束，这样contenView可以实现自适应，自定义cell高                     
    //  度也就实现了自适应
    [self.contentViewbottomConstraint uninstall];
    [self.iconView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.button.mas_bottom).offset(100);
      }];