iOS日常开发-九宫格布局

日常开发中，我们不能老是用collectionView去写，在某些场景中colectionView太重，好比用大炮打蚊子....

bg.png

成果

result.png

代码

 CGFloat margin_X = 1; // 水平间距
   
   CGFloat _margin_Y = 1; // 数值间距
   
   CGFloat itemWidth = 50; // 宽
   
   CGFloat itemHeight = 50; // 高
   
   int totalColumns = 3; // 每行最大列数（影响到底几个换行）
   
   NSInteger sourceNumber = 20;  // 数据源
   
   for(int index = 0; index < sourceNumber; index++) {
       UIView * itemView = [[UIView alloc]init];
       itemView.backgroundColor = [UIColor redColor];
       
       int row = index / totalColumns;
       
       int col = index % totalColumns;
       
       NSLog(@"index----%d totalColumns------%ld row ------%d  col--------%d",index,totalColumns,row,col);
       
       CGFloat cellX =  col * (itemWidth + _margin_X);
       
       CGFloat cellY = row * (itemHeight + _margin_Y);
       
       itemView.frame = CGRectMake(cellX,cellY, itemWidth, itemHeight);
       
       [self.view addSubview:itemView];
   }

打印日志

2019-05-14 09:56:09.269396+0800 九宫格算法[2642:91676] index----0 totalColumns------3 row ------0  col--------0
2019-05-14 09:56:09.269786+0800 九宫格算法[2642:91676] index----1 totalColumns------3 row ------0  col--------1
2019-05-14 09:56:09.269931+0800 九宫格算法[2642:91676] index----2 totalColumns------3 row ------0  col--------2
2019-05-14 09:56:09.270099+0800 九宫格算法[2642:91676] index----3 totalColumns------3 row ------1  col--------0
2019-05-14 09:56:09.270240+0800 九宫格算法[2642:91676] index----4 totalColumns------3 row ------1  col--------1
2019-05-14 09:56:09.270368+0800 九宫格算法[2642:91676] index----5 totalColumns------3 row ------1  col--------2
2019-05-14 09:56:09.270502+0800 九宫格算法[2642:91676] index----6 totalColumns------3 row ------2  col--------0
2019-05-14 09:56:09.270653+0800 九宫格算法[2642:91676] index----7 totalColumns------3 row ------2  col--------1
2019-05-14 09:56:09.270796+0800 九宫格算法[2642:91676] index----8 totalColumns------3 row ------2  col--------2
2019-05-14 09:56:09.270924+0800 九宫格算法[2642:91676] index----9 totalColumns------3 row ------3  col--------0
2019-05-14 09:56:09.271046+0800 九宫格算法[2642:91676] index----10 totalColumns------3 row ------3  col--------1
2019-05-14 09:56:09.271272+0800 九宫格算法[2642:91676] index----11 totalColumns------3 row ------3  col--------2
2019-05-14 09:56:09.271583+0800 九宫格算法[2642:91676] index----12 totalColumns------3 row ------4  col--------0
2019-05-14 09:56:09.271802+0800 九宫格算法[2642:91676] index----13 totalColumns------3 row ------4  col--------1
2019-05-14 09:56:09.272071+0800 九宫格算法[2642:91676] index----14 totalColumns------3 row ------4  col--------2
2019-05-14 09:56:09.272347+0800 九宫格算法[2642:91676] index----15 totalColumns------3 row ------5  col--------0
2019-05-14 09:56:09.272669+0800 九宫格算法[2642:91676] index----16 totalColumns------3 row ------5  col--------1
2019-05-14 09:56:09.272932+0800 九宫格算法[2642:91676] index----17 totalColumns------3 row ------5  col--------2
2019-05-14 09:56:09.273169+0800 九宫格算法[2642:91676] index----18 totalColumns------3 row ------6  col--------0
2019-05-14 09:56:09.273545+0800 九宫格算法[2642:91676] index----19 totalColumns------3 row ------6  col--------1

结论

从上面打印可以发现一个规律

index /  totalColumns = row 
Index % totalColumns  = col

行数 = 编号 / 每行最大列数
列数 = 编号 % 每行最大列数

所以我们的view 位置就可以写成

  CGFloat cellX =  col * (itemWidth + _margin_X);
        
  CGFloat cellY = row * (itemHeight + _margin_Y);
        
  itemView.frame = CGRectMake(cellX,cellY, itemWidth, itemHeight);

最后编辑于：2019.05.14 10:21:47