关于批量控件在视图中的布局（以按钮为例）

一个赏心悦目的界面，少不了的就是排版，我们项目中比较常见的就是方形的布局,   图片，按钮，标签的布局等等；

这里我就以按钮为例，介绍几种开发中对批量控件布局的方式：

  线形布局：

第一种： 最简单直接，但比较繁琐，代码冗余的方式：

  //1.创建按钮

      UIButton *button1 = [[UIButton alloc]init];

      UIButton *button2 = [[UIButton alloc]init];

      UIButton *button3 = [[UIButton alloc]init];

 //2.添加到父视图中

     [self.view addSubview:button1];

     [self.view addSubview:button2];

     [self.view addSubview:button3];

 //3.布局

 [button1 mas_makeConstraints:^(MASConstraintMaker *make) {

     make.centerY.equalTo(self.view.mas_centerY);

             make.left.equalTo(self.view.mas_left);

 }];

      [button2 mas_makeConstraints:^(MASConstraintMaker *make) {

             make.left.equalTo(button1.mas_right);

             make.centerY.equalTo(button1.mas_centerY);

             make.width.equalTo(button1.mas_width);

     }];

      [button3 mas_makeConstraints:^(MASConstraintMaker *make) {

             make.left.equalTo(button2.mas_right);

             make.centerY.equalTo(button2.mas_centerY);

             make.width.equalTo(button2.mas_width);

             make.right.equalTo(self.view.mas_right);

     }];

    第二种：这种方式就代码简洁，比较简单

//创建按钮数组

    NSMutableArray *buttonArrM = [NSMutableArray array];

    //1.创建按钮

    for (NSInteger i = 0; i < 3; i++) {

        UIButton *button = [[UIButton alloc]init];

        [self.view addSubview:button];

        [buttonArrM addObject: button];

    }

    //2.布局

    [buttonArrM mas_distributeViewsAlongAxis: MASAxisTypeHorizontal withFixedSpacing:0 leadSpacing:0 tailSpacing:0];

    [buttonArrM mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.bottom.equalTo(self.view);

    }];

  方形布局（九宫格）：

     第一种方式：先说简单的方式

     //按钮的宽高

    CGFloat buttonWH = 60;

    

    //第一个 button 的 frame 假设第一个 button 的 坐标点为原点

    CGRect firstFrame = CGRectMake(0, 0, buttonWH, buttonWH);

    

    //设置按钮要移动的间距

    CGFloat gap = buttonWH + 20;

    

    for (NSInteger i = 0; i < 9; i++) {

        

        UIButton *button = [[UIButton alloc]init];

        

        [self.view addSubview:button];

        

        //九宫格算法

        //计算行数和列数

        NSInteger row = i / 3;

        NSInteger col = i % 3;

        

        //给每一个按钮设置 frame

        // 在 swifit 中 button.frame = firstFrame.offsetBy(gap * col, gap * row)

        button.frame = CGRectOffset(firstFrame, gap * col, gap * row);

        

    }

 

     第二种方式：这种方式跟上述线形布局思路一样(在上一个按钮的位置做偏移，这里就不做描述了)

以上的这些布局方式适用于多种控件，当然我想大家一定会选用简单快捷，而稍具有质量的代码，希望可以帮助大家。