需求原型图：
要求：
各个模块的大小反映各个模块的占比（销售额），所有模块共同组成一个正方形。
后台返回的数据格式：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
{
"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就行了。
实现
效果如下：
核心代码：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
- (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
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对快网idc的支持。
相关文章
猜你喜欢
- 个人服务器网站搭建：如何选择适合自己的建站程序或框架？ 2025-06-10
- 64M VPS建站：能否支持高流量网站运行？ 2025-06-10
- 64M VPS建站：怎样选择合适的域名和SSL证书？ 2025-06-10
- 64M VPS建站：怎样优化以提高网站加载速度？ 2025-06-10
- 64M VPS建站：是否适合初学者操作和管理？ 2025-06-10
