国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 系統(tǒng) > iOS > 正文

iOS實(shí)現(xiàn)比例拼圖的方法示例

2019-10-21 18:40:45
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

需求原型圖:

iOS,比例拼圖

要求:

各個(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)

效果如下:

iOS,比例拼圖

核心代碼:

- (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)的支持。


注:相關(guān)教程知識(shí)閱讀請(qǐng)移步到IOS開(kāi)發(fā)頻道。
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 屏边| 洪湖市| 正阳县| 紫阳县| 桃江县| 开化县| 关岭| 正定县| 贵阳市| 南陵县| 易门县| 页游| 台山市| 临颍县| 苍南县| 岑溪市| 林州市| 淮安市| 阿拉善盟| 灵台县| 琼海市| 马鞍山市| 藁城市| 营口市| 绥宁县| 丹凤县| 剑河县| 牙克石市| 卫辉市| 万安县| 蒲江县| 佛冈县| 尼木县| 江西省| 满洲里市| 东兰县| 三穗县| 三穗县| 固原市| 讷河市| 莆田市|