iOS实现比例拼图的方法示例
程序员文章站
2023-12-11 17:26:40
需求原型图:
要求:
各个模块的大小反映各个模块的占比(销售额),所有模块共同组成一个正方形。
后台返回的数据格式:
{
"result":...
需求原型图:
要求:
各个模块的大小反映各个模块的占比(销售额),所有模块共同组成一个正方形。
后台返回的数据格式:
{ "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 (本地下载)
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。