本篇文章給大家分享的是有關(guān)怎么在iOS中實(shí)現(xiàn)一個按比例拼圖功能，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)企業(yè)網(wǎng)站設(shè)計(jì)方案、改版、費(fèi)用等問題，行業(yè)涉及玻璃隔斷等多個領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

要求：

各個模塊的大小反映各個模塊的占比（銷售額），所有模塊共同組成一個正方形。

后臺返回的數(shù)據(jù)格式：

{
 "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一起研究了一下，也沒有想到什么好的算法。正巧那天上司跑來問我們有沒有什么需要幫忙的，我趕緊把這個問題扔給他。

一周后，他給我說了思路：

每一排放三個，讓它們的高度一致。

經(jīng)他這么一點(diǎn)，這個問題立即就不是問題了（放3個還是放兩個通過開方得到最合適的值）。

一排放三個模塊，三個一組組成一個矩形，這一組的總面積確定，寬確定，那么高就確定了。高確定，每個模塊的面積確定，每個模塊的寬也就確定了。至于排版

交給UICollectionView就行了。

實(shí)現(xiàn)

效果如下：

核心代碼：

- (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;
 }
 }
 
 // 計(jì)算列數(shù)
 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;
 }
 }
 
 // 計(jì)算行數(shù)
 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;
 }
 // 計(jì)算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，避免因小數(shù)不精確存儲導(dǎo)致一組cell寬度相加超過collectionView的寬度
 return CGSizeMake(model.width-0.01, model.height);
}

以上就是怎么在iOS中實(shí)現(xiàn)一個按比例拼圖功能，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：怎么在iOS中實(shí)現(xiàn)一個按比例拼圖功能-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/egiis.html