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);
    }];

效果如下圖：

僅做記錄！