怎么在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;

CGFloattotalSaleAmount=0;
for(CQCategoryItemModel*itemModelin_model.category_sale){
totalSaleAmount+=itemModel.sale_amount;
}

for(CQCategoryItemModel*itemModelin_model.category_sale){
if(totalSaleAmount==0){
//特殊处理只有一个item，并且SaleAmount还是0的情况
itemModel.ratio=1;
}else{
itemModel.ratio=itemModel.sale_amount/totalSaleAmount;
}
}

//计算列数
NSIntegerlistCount=0;
for(inti=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;
}
}

//计算行数
NSIntegerrowCount=ceil(_model.category_sale.count/(CGFloat)listCount);

//这个方阵是listCount*rowCount的矩阵（最后一排可能不足listCount）
//同一排的cell高度相同
for(inti=0;i<rowCount;i++){//行
CGFloatrowArea=0;//行面积
for(intj=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(intj=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.collectionViewreloadData];
}

-(CGSize)collectionView:(UICollectionView*)collectionViewlayout:(UICollectionViewLayout*)collectionViewLayoutsizeForItemAtIndexPath:(NSIndexPath*)indexPath{
CQCategoryItemModel*model=self.model.category_sale[indexPath.row];
//减去0.01，避免因小数不精确存储导致一组cell宽度相加超过collectionView的宽度
returnCGSizeMake(model.width-0.01,model.height);
}

以上就是怎么在iOS中实现一个按比例拼图功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。