masonry布局直排、竖排多个view视图

Masonry 是强大AutoLayout框架。

masonry预备篇

知识点（1）AutoLayout关于更新的几个方法的区别

setNeedsLayout:告知页面需要更新，但是不会立刻进行更新。执行后会立刻调用layoutSubViews方法。
layoutIfNeeded:告知页面布局立刻更新。所以一般会和setNeedsLayout一起使用。如果要立刻生成新的frame需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。
layoutSubViews:系统重写布局
setNeedsUpdateConstraints:告知需要更新约束，但是不会立刻开始
updateConstrainsIfNeeded:告知立刻更新约束
updateConstraints:系统更新约束

知识点（2）基本使用

** mas_makeConstrins**:添加约束
mas_updateContraints:更新约束、亦可增加新的约束
mas_remakeConstraints:重置之前的约束
multipler属性表示约束值为约束对象的乘因数，dividedBy属性表示约束值为约束对象的除因数，可用于设置view的宽高比。

masonry详解篇

1.mas_makeContstraints 只负责新增约束

新增一个约束使得self.tableView的边缘等于self.view。

[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(self.view);
  }];

两个或两个以上的控件等间隔排序（第一种）。

/**
* 多个控件固定间隔的等间隔排列，变化的是控件的长度或者宽度值 
* 
* @param axisType 轴线方向(Horizontal,Vertical)
* @param fixedSpacing 间隔大小 
* @param leadSpacing 头部间隔 
* @param tailSpacing 尾部间隔 
*/
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
                    withFixedSpacing:(CGFloat)fixedSpacing 
                    leadSpacing:(CGFloat)leadSpacing 
                    tailSpacing：(CGFloat)tailSpacing;

🌰

[@[btn1, btn2, btn3] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal
                                     withFixedSpacing:40
                                          leadSpacing:15
                                          tailSpacing:15];

两个或两个以上的控件等间隔排序（第二种）。

/**
* 多个固定大小的控件的等间隔排列,变化的是间隔的空隙 
*
* @param axisType 轴线方向 
* @param fixedItemLength 每个控件的固定长度或者宽度值 
* @param leadSpacing 头部间隔 
* @param tailSpacing 尾部间隔 
*
/- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
                withFixedItemLength:(CGFloat)fixedItemLength 
                leadSpacing:(CGFloat)leadSpacing
                tailSpacing:(CGFloat)tailSpacing;

🌰🌰

 [@[btn1, btn2, btn3] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal
   //btn1,btn2,btn3三个btn的宽为80   距离左边15  距离右边15
                                withFixedItemLength:80
                                        leadSpacing:15
                                        tailSpacing:15];

  [@[btn1, btn2, btn3] mas_makeConstraints:^(MASConstraintMaker *make) {
      //距离顶部的距离
    make.top.mas_equalTo(0);
  }];

效果图🏃：

image

2.mas_updateConstraints更新约束

创建self.growingButton点击会放大

[self.growingButton addTarget:self action:@selector(onGrowButtonTaped:) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:self.growingButton];
self.scacle = 1.0;
[self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
    make.center.mas_equalTo(self.view);

    // 初始宽、高为100，优先级最低
    make.width.height.mas_equalTo(100 * self.scacle).priorityLow();
    // 最大放大到整个view
    make.width.height.lessThanOrEqualTo(self.view);
  }];

响应事件

- (void)onGrowButtonTaped:(UIButton *)sender {
  self.scacle += 0.2;

  // 告诉self.view约束需要更新
  [self.view setNeedsUpdateConstraints];
  // 调用此方法告诉self.view检测是否需要更新约束，若需要则更新，下面添加动画效果才起作用
  [self.view updateConstraintsIfNeeded];

  [UIView animateWithDuration:0.3 animations:^{
    [self.view layoutIfNeeded];
  }];
}

重写方法

- (void)updateViewConstraints {
  [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
    make.center.mas_equalTo(self.view);

    // 初始宽、高为100，优先级最低
    make.width.height.mas_equalTo(100 * self.scacle).priorityLow();
    // 最大放大到整个view
    make.width.height.lessThanOrEqualTo(self.view);
  }];

  [super updateViewConstraints];
}

masonry直排多个view视图

 for (NSInteger i = 0; i < icons.count / 2; i++) {
        NSString *icon = [icons objectAtIndex:i];
        NSString *title = [titles objectAtIndex:i];
        ATIconButton *iconBtn = [ATIconButton
                                 buttonWithIconName:icon
                                 title:title
                                 iconPosition:Icon_Top];
        iconBtn.tag = i + 10000;
        [iconBtn addTarget:self action:@selector(iconBtnAction:) forControlEvents:UIControlEventTouchUpInside];
        [iconBtn showYellowLayer];
        [self.itemView0 addSubview:iconBtn];
    }
    // 执行九宫格布局
    [self.itemView0.subviews mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:kFitScreen(70) leadSpacing:kFitScreen(20) tailSpacing:10];
    [self.itemView0.subviews mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(10);
        make.height.mas_equalTo(kFitScreen(70));
    }];