怎么在iOS中实现一个按比例拼图功能-创新互联
本篇文章给大家分享的是有关怎么在iOS中实现一个按比例拼图功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
要求：
各个模块的大小反映各个模块的占比（销售额），所有模块共同组成一个正方形。
后台返回的数据格式：
{
"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);
}以上就是怎么在iOS中实现一个按比例拼图功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联网站建设公司行业资讯频道。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前名称：怎么在iOS中实现一个按比例拼图功能-创新互联
文章来源：http://scyanting.com/article/egiis.html
