计算行列的流水布局

很多朋友问，如何快速创建行列布局？如果要创建5行8列的布局，如何快速实现？其实很简单，只要通过frame，确定两个因素就可以设置了。以其中两行三列为例子。

1.列数
2.按钮的大小

要如何实现快速行列的布局呢？
首先先创建按钮的时候，让按钮先显示在最中间位置。
先付上最终实现的代码如下

 for (int i = 0; i<images.count; i++) {
        XMGVerticalButton *button = [[XMGVerticalButton alloc] init];
        // 设置内容
        button.titleLabel.font = [UIFont systemFontOfSize:14];
        [button setTitle:titles[i] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:images[i]] forState:UIControlStateNormal];
        
        // 设置frame
        button.width = buttonW;
        button.height = buttonH;
        int row = i / maxCols;
        int col = i % maxCols;
        button.x = buttonStartX + col * (xMargin + buttonW);
        button.y = buttonStartY + row * buttonH;
        [self.view addSubview:button];
    }

Paste_Image.png

此时只是6个按钮重叠在一起了，要把他们分开，我的做法是先设置Y值，然后再设置每个按钮的X值。
此刻，应该要确定的是有多少列，确定列数之后，计算出按钮起始Y值，
如何求起始的Y值：

 CGFloat buttonStartY=(JDScreenH-2*buttonH)*0.5;

  button.y=buttonStartY +row*buttonH;
  button.y=起始的Y值+列数*button的高度

效果如下：

Paste_Image.png

此时还差X值：
x值的计算，应该考虑到左右两边的间距，如果要设置间距margin=15，那么中间的大的间距=（屏幕宽度-2倍的间距）/（按钮的列数-1）

CGFloat buttonMargin =(JDScreenW-2*buttonStartX-maxCols*buttonW)/(maxCols-1);
button.x=buttonStartX+col*(buttonW+buttonMargin);

效果如图：
总结：如果要快速设置这种流水布局，先确定多少列，按钮的大小，然后直接套公式：

按钮的X=起始的X值+列数*（按钮的宽度+中间间距）

按钮的Y=起始的Y值+列数*button的高度

其中：

起始的Y值=（屏幕的高度-按钮行数按钮的高度）0.5
起始的X值=自己定义。

最终的效果就简单的实现了：

Paste_Image.png
原著出自乔丹JD--《IOS开发》专题，如需转载请注明出处，欢迎广大朋友投稿。乔丹postTime-2016-4-20