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

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

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

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

一、水平布局

1、创建

//    图片组数
    NSArray *imgAry = @[@"home_icon01",@"home_icon02",@"home_icon03",@"home_icon04"];
//    文字数字
    NSArray *titleAry = @[@"高额",@"低息",@"灵活",@"便捷"];
    
    NSMutableArray *tolAry = [NSMutableArray new];
    for (int i = 0; i < 4; 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:13];
        btn.imageEdgeInsets = UIEdgeInsetsMake(30, 30, 30, 30);
        [self addSubview:btn];
        [tolAry addObject:btn];
    }

2、使用Masonry布局

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

效果如下：

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

UIView *view = [UIView new];
    view.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view];
    
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(150);
        make.left.mas_equalTo(15);
        make.centerX.mas_equalTo(self.view);
        make.height.mas_equalTo(50*3);
    }];
    
    
    NSMutableArray *tolAry = [NSMutableArray new];//图片数组
    NSMutableArray *titleAry = [NSMutableArray new];//标题数组
    NSMutableArray *btnAry = [NSMutableArray new];//按钮数组
    
    for (int i = 0; i < 4; 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+90] forState:UIControlStateNormal];
        [view addSubview:btn];
        
        [tolAry addObject:img];
        [titleAry addObject:lab];
        [btnAry addObject:btn];
    }
    
    // 实现masonry垂直方向固定控件高度方法
      //垂直方向
      [tolAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:10 leadSpacing:10 tailSpacing:10];

      [tolAry mas_makeConstraints:^(MASConstraintMaker *make) {
              
         //垂直方向可以设置水平居中
          make.left.mas_equalTo(5);
          make.width.equalTo(@30);
      }];
    
    [titleAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:10 leadSpacing:10 tailSpacing:10];

    [titleAry mas_makeConstraints:^(MASConstraintMaker *make) {
            
       //垂直方向可以设置水平居中
        make.left.mas_equalTo(40);
        make.width.equalTo(@60);
    }];
    
    [btnAry mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:10 leadSpacing:10 tailSpacing:10];

    [btnAry mas_makeConstraints:^(MASConstraintMaker *make) {
            
       //垂直方向可以设置水平居中
        make.right.mas_equalTo(-10);
        make.width.equalTo(@30);
    }];

效果如下图：

仅做记录！

作者：稻草人11223