矩阵式布局的计算方法
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)];
// 对控件进行数据填充等设置
...
}
}
注意，这种方法有两个缺陷：
- 行和列的数目必须事先确定。
- 控件的个数必须为行 * 列个，不能更精确的定义控件的个数。因为每次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)];
// 对控件进行数据填充等设置
...
}
注意，这种方法的好处在于：
- 只需提前确定行数/列数其中之一便可。假设提前确定了列数为column，那么这种算法就会按照每行column个控件的方式一直向下排布。反之亦然。
- 控件的个数不再受到行数和列数的制约，因为行和列之一是不定的。
