iOS | 比例拼图

作者 : 开心源码 本文共2318个字,预计阅读时间需要6分钟 发布时间: 2022-05-11 共83人阅读

给陈意涵打call

需求原型图:

要求:
各个板块的大小反映各个板块的占比(销售额),所有板块共同组成一个正方形。

后端返回的数据格式:

{    "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

CaiWanFeng/iOS_Demo

已是最前 目录 下一篇

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » iOS | 比例拼图

发表回复