iOS开发之--Masonry多个平均布局

使用Masonry平均布局，代码如下：

其实就是用Masonry提供的两个方法，如下：

/**
    *  distribute with fixed spacing
    *
    *  @param axisType     横排还是竖排
    *  @param fixedSpacing 两个控件间隔
    *  @param leadSpacing  第一个控件与边缘的间隔
    *  @param tailSpacing  最后一个控件与边缘的间隔
    */
    [tolAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing: leadSpacing: tailSpacing:];

    /**
    *  distribute with fixed item size
    *
    *  @param axisType        横排还是竖排
    *  @param fixedItemLength 控件的宽或高
    *  @param leadSpacing     第一个控件与边缘的间隔
    *  @param tailSpacing     最后一个控件与边缘的间隔
    */
    [tolAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength: leadSpacing: tailSpacing:];

一、水平布局

1、创建

//    图片组数
    NSArray *imgAry = @[@"home_icon01",@"home_icon02",@"home_icon03",@"home_icon04"];
//    文字数字
    NSArray *titleAry = @[@"高额",@"低息",@"灵活",@"便捷"];

    NSMutableArray *tolAry = [NSMutableArray new];
    for (int i = ; i < ; i ++) {
        HTVerticalButton *btn = [HTVerticalButton buttonWithType:UIButtonTypeCustom];
        [btn setImage:[UIImage imageNamed:imgAry[i]] forState:UIControlStateNormal];
        [btn setTitle:titleAry[i] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor colorWithHex:@"#333333"] forState:UIControlStateNormal];
        btn.titleLabel.font = [UIFont systemFontOfSize:];
        btn.imageEdgeInsets = UIEdgeInsetsMake(, , , );
        [self addSubview:btn];
        [tolAry addObject:btn];
    }

2、使用Masonry布局

//水平方向控件间隔固定等间隔
    [tolAry mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing: leadSpacing: tailSpacing:];
    [tolAry mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@);
        make.height.equalTo(@);
    }];

    //水平方向宽度固定等间隔
    [tolAry mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength: leadSpacing: tailSpacing:];
    [tolAry mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@);
        make.height.equalTo(@);
    }];

效果如下：

二、垂直布局，不多阐述，直接上代码：

UIView *view = [UIView new];
    view.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view];

    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo();
        make.left.mas_equalTo();
        make.centerX.mas_equalTo(self.view);
        make.height.mas_equalTo(*);
    }];

    NSMutableArray *tolAry = [NSMutableArray new];//图片数组
    NSMutableArray *titleAry = [NSMutableArray new];//标题数组
    NSMutableArray *btnAry = [NSMutableArray new];//按钮数组

    for (int i = ; i < ; i ++) {
        UIImageView *img = [UIImageView new];
        img.backgroundColor = [UIColor redColor];
        [view addSubview:img];

        UILabel *lab = [UILabel new];
        lab.backgroundColor = [UIColor purpleColor];
        [view addSubview:lab];

        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.backgroundColor = [UIColor greenColor];
        [btn setTitle:[NSString stringWithFormat:@"%d",i+] forState:UIControlStateNormal];
        [view addSubview:btn];

        [tolAry addObject:img];
        [titleAry addObject:lab];
        [btnAry addObject:btn];
    }

    // 实现masonry垂直方向固定控件高度方法
      //垂直方向
      [tolAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing: leadSpacing: tailSpacing:];

      [tolAry mas_makeConstraints:^(MASConstraintMaker *make) {

         //垂直方向可以设置水平居中
          make.left.mas_equalTo();
          make.width.equalTo(@);
      }];

    [titleAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing: leadSpacing: tailSpacing:];

    [titleAry mas_makeConstraints:^(MASConstraintMaker *make) {

       //垂直方向可以设置水平居中
        make.left.mas_equalTo();
        make.width.equalTo(@);
    }];

    [btnAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing: leadSpacing: tailSpacing:];

    [btnAry mas_makeConstraints:^(MASConstraintMaker *make) {

       //垂直方向可以设置水平居中
        make.right.mas_equalTo(-);
        make.width.equalTo(@);
    }];

效果如下图：

仅做记录！