矩阵式布局的计算方法

RAP | 第1列 | 第2列 | 第3列
第1行 | 1 (0, 0) | 2 (0, 1) | 3 (0, 2)
第2行 | 4 (1, 0) | 5 (1, 1) | 6 (1, 2)
第3行 | 7 (2, 0) | 8 (2, 1) | 9 (2, 2)
第4行 | 10 (3, 0) | 11 (3, 1) | 12 (3, 2)

利用行/列索引定位控件

对于一个在矩阵中的控件，利用行索引和列索引来对其进行定位。

• 假设控件与控件之间的，最外围控件到上下左右边界的距离都为MARGIN，控件的宽度为WIDTH，高度为HEIGHT。
• 假设一行有i + 1个控件，对于处于同一行的所有控件来说，其x值等于

x = ( i + 1) * MARGIN + i * WIDTH;

• 假设一 列有k + 1个控件，对于同一列的所有控件来说，其y值等于

y = (k + 1) * MARGIN + k * HEIGHT;

因此，对于一个行索引为i，列索引为k的控件来说，它的x和y值分别为：

x = (i + 1) * MARGIN + i * WIDTH;
y = (k + 1) * MARGIN + k * HEIGHT;

具体的计算代码如下，需要两个for循环嵌套，分别对应行和列：

// column为列数，row为行数

    for (int i = 0; i < column; i++) { // i表示行
        for (int k = 0; k < row; k++) { // k表示列
        
            // 设置单个控件的位置
            RAPMyView *myView = [[RAPMyView alloc] initWithFrame:CGRectMake(columnMargin * (i + 1) + WIDTH * i, rowMargin * (k + 1) + k * HEIGHT, WIDTH, HEIGHT)];
            
            // 对控件进行数据填充等设置
            ...
          }
    }

注意，这种方法有两个缺陷：

1. 行和列的数目必须事先确定。
2. 控件的个数必须为行 * 列个，不能更精确的定义控件的个数。因为每次for循环必须产生column / row个控件，如果控件数量不能满足这种要求，就无法布局。

利用控件在数组中的索引定位控件

基于上面的思路，进一步通过控件在数据模型数组中的索引来计算其行/列索引。假设起索引为index，共有n列：

columnIndex = index % n; // 计算列索引使用模运算（模列）
rowIndex = index / n; // 计算行索引使用除运算（除行）

利用这种方法，用一个for循环即可。假设有数据模型数组dataArray，那么模型的总个数为int count = dataArray.count，利用count来控制for循环的次数，从而达到精确控制控件个数的目的。

// column为列数

    int count = self.dataArray.count; // 数据模型的个数（也就是控件的个数）
    for (int i = 0; i < count; i++) {
    
                int columnIndex = i % column; // 计算列索引
                int rowIndex = i / column; // 计算行索引
                RAPMyView *myView = [[RAPMyView alloc] initWithFrame:CGRectMake(columnMargin * (columnIndex + 1) + WIDTH * columnIndex, rowMargin * (rowIndex + 1) + rowIndex * HEIGHT, WIDTH, HEIGHT)];
                
            // 对控件进行数据填充等设置
            ...
    }

注意，这种方法的好处在于：

1. 只需提前确定行数/列数其中之一便可。假设提前确定了列数为column，那么这种算法就会按照每行column个控件的方式一直向下排布。反之亦然。
2. 控件的个数不再受到行数和列数的制约，因为行和列之一是不定的。