需求原型圖:
要求:
各個(gè)模塊的大小反映各個(gè)模塊的占比(銷售額),所有模塊共同組成一個(gè)正方形。
后臺(tái)返回的數(shù)據(jù)格式:
{ "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代表“毛利率”,不是模塊的占比。
分析
第一眼看到這個(gè)原型圖的時(shí)候我就覺(jué)得不簡(jiǎn)單,后面和Android一起研究了一下,也沒(méi)有想到什么好的算法。正巧那天上司跑來(lái)問(wèn)我們有沒(méi)有什么需要幫忙的,我趕緊把這個(gè)問(wèn)題扔給他。
一周后,他給我說(shuō)了思路:
每一排放三個(gè),讓它們的高度一致。
經(jīng)他這么一點(diǎn),這個(gè)問(wèn)題立即就不是問(wèn)題了(放3個(gè)還是放兩個(gè)通過(guò)開(kāi)方得到最合適的值)。
一排放三個(gè)模塊,三個(gè)一組組成一個(gè)矩形,這一組的總面積確定,寬確定,那么高就確定了。高確定,每個(gè)模塊的面積確定,每個(gè)模塊的寬也就確定了。至于排版
交給UICollectionView就行了。
實(shí)現(xiàn)
效果如下:
核心代碼:
- (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) { // 特殊處理只有一個(gè)item,并且SaleAmount還是0的情況 itemModel.ratio = 1; } else { itemModel.ratio = itemModel.sale_amount/totalSaleAmount; } } // 計(jì)算列數(shù) 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; } } // 計(jì)算行數(shù) NSInteger rowCount = ceil(_model.category_sale.count / (CGFloat)listCount); // 這個(gè)方陣是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; } // 計(jì)算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,避免因小數(shù)不精確存儲(chǔ)導(dǎo)致一組cell寬度相加超過(guò)collectionView的寬度 return CGSizeMake(model.width-0.01, model.height);}
完整demo
https://github.com/CaiWanFeng/iOS_Demo
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注