需求原型圖：
要求：
各個模塊的大小反映各個模塊的占比（銷售額），所有模塊共同組成一個正方形。
后臺返回的數據格式：
{ "result": true, "data": { "category_sale": [ { "name": "我是你的哥", "sale_amount": 1, "gross_margin_ratio": 0.22 }, { "name": "不是親哥哥", "sale_amount": 4, "gross_margin_ratio": 0 }, { "name": "呵呵噠", "sale_amount": 3, "gross_margin_ratio": 0.19 }, { "name": "因缺思廳", "sale_amount": 2, "gross_margin_ratio": 0.4 }] }, "msg": "ok", "code": 200, "executed": "0.0320830345"}注：gross_margin_ratio代表“毛利率”，不是模塊的占比。
分析
第一眼看到這個原型圖的時候我就覺得不簡單，后面和Android一起研究了一下，也沒有想到什么好的算法。正巧那天上司跑來問我們有沒有什么需要幫忙的，我趕緊把這個問題扔給他。
一周后，他給我說了思路：
每一排放三個，讓它們的高度一致。
經他這么一點，這個問題立即就不是問題了（放3個還是放兩個通過開方得到最合適的值）。
一排放三個模塊，三個一組組成一個矩形，這一組的總面積確定，寬確定，那么高就確定了。高確定，每個模塊的面積確定，每個模塊的寬也就確定了。至于排版
交給UICollectionView就行了。
實現
效果如下：
核心代碼：
- (void)setModel:(CQCategoryModel *)model { _model = model; CGFloat totalSaleAmount = 0; for (CQCategoryItemModel *itemModel in _model.category_sale) { totalSaleAmount += itemModel.sale_amount; } for (CQCategoryItemModel *itemModel in _model.category_sale) { if (totalSaleAmount == 0) { // 特殊處理只有一個item，并且SaleAmount還是0的情況 itemModel.ratio = 1; } else { itemModel.ratio = itemModel.sale_amount/totalSaleAmount; } } // 計算列數 NSInteger listCount = 0; for (int i = 0; i < _model.category_sale.count; i++) { if (i * i < _model.category_sale.count && (i+1) * (i+1) >= _model.category_sale.count) { listCount = i+1; break; } } // 計算行數 NSInteger rowCount = ceil(_model.category_sale.count / (CGFloat)listCount); // 這個方陣是listCount*rowCount的矩陣（最后一排可能不足listCount） // 同一排的cell高度相同 for (int i = 0; i < rowCount; i++) { // 行 CGFloat rowArea = 0; // 行面積 for (int j = 0; j < listCount; j++) { // 列 if (i*listCount+j>=_model.category_sale.count) { break; } CQCategoryItemModel *itemModel = _model.category_sale[i*listCount+j]; itemModel.size = itemModel.ratio * (self.collectionView.width*self.collectionView.width); rowArea += itemModel.size; } // 計算cell的寬高 for (int j = 0; j < listCount; j++) { // 列 if (i*listCount+j>=_model.category_sale.count) { break; } CQCategoryItemModel *itemModel = _model.category_sale[i*listCount+j]; itemModel.height = rowArea / self.collectionView.width; itemModel.width = itemModel.size / itemModel.height; } } [self.collectionView reloadData];}- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { CQCategoryItemModel *model = self.model.category_sale[indexPath.row]; // 減去0.01，避免因小數不精確存儲導致一組cell寬度相加超過collectionView的寬度 return CGSizeMake(model.width-0.01, model.height);}完整demo
https://github.com/CaiWanFeng/iOS_Demo （本地下載）
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
