iOS開發之窺探UICollectionViewController(五)：一款炫酷的圖片瀏覽元件

本篇部落格應該算的上CollectionView的高階應用了，從到今天的(五)，可謂是由淺入深的窺探了一下UICollectionView的用法，這些用法不僅包括SDK中自帶的流式佈局（UICollectionViewDelegateFlowLayout）而且介紹瞭如何根據你的需求去自定義屬於你自己的CollectionView。自定義的CollectionView可謂是非常靈活，其靈活性也決定了其功能的強大。CollectionView的自定義就是其Cell高度可定製的屬性，通過對Cell賦值不同的屬性來達到自定義的目的。

在上篇部落格中，通過自定義的CollectionView建立了一個可定製的自定義瀑布流，效果還是蠻ok的。本篇部落格是使用自定義CollectionView的另一個例項，自定義CollectionView的方式和上一篇是一致的，都是重寫UICollectionViewLayout相應的方法，然後再通過委託回撥來設定佈局的引數。自定義CollectionView的思路是一樣的，只是具體的實現方式不同。學習麼，要學會舉一反三，希望大家能通過這兩篇自定義CollectionView的部落格來寫出屬於你自己的自定義效果。

一.效果展示

廢話少說，進入今天部落格的主題，下方就是今天部落格中Demo的執行效果。雖然執行效果做成gif丟幀了，看起來有些卡，不過跑起來還是比較流暢的。切換圖片時進行一個360度的旋轉，並且修改Cell的層級，當前顯示的圖片層級最高。並且移動時，如果要顯示的圖片不在螢幕中央就做一個位置矯正。點選圖片時，使用仿射變換使其放大，再點選使其縮小。接下來將會詳細的介紹其實現方案。

二.該自定義佈局的使用方式

我們先看一下該自定義佈局是如何使用的，然後再通過使用方式來逐步介紹它是如何實現的。這也是一個由淺入深的過程，因為用起來要比做起了更容易。比如開汽車容易，造汽車可就麻煩多了。所以在本篇部落格的第二部分，將要介紹如何去使用該自定義元件。

其實所有CollectionView的自定義佈局的使用方式都是一樣的，分為以下幾步：

1.為我們的CollectionView指定該佈局，本篇部落格的CollectionView是通過Storyboard來實現的，所以我們可以通過Storyboard來指定自定義的佈局檔案，如果你是使用純程式碼方式，可以在CollectionView例項化時來指定所需的佈局。下方是使用Storyboard來指定的佈局檔案，需要把Layout選項調到Custom下，然後下方的Class選項就是你要關聯的自定義佈局檔案，具體如下所示。程式碼的就在此不做贅述了，網上一抓一大把。

2.給Storyboard上的CollectionViewController關聯一個類，然後我們就可以使用自定義的佈局了。獲取指定的自定義佈局物件，然後指定委託代理物件，如下所示：

Objective-C

 - (void)viewDidLoad {
     [super viewDidLoad];

     _customeLayout = (CustomTransformCollecionLayout *) self.collectionViewLayout;
     _customeLayout.layoutDelegate = self;
 }

123456

-(void)viewDidLoad{[superviewDidLoad];_customeLayout=(CustomTransformCollecionLayout*)self.collectionViewLayout;_customeLayout.layoutDelegate=self;}

3.除了實現CollectionView的DataSource和Delegate, 我們還需實現佈局的代理方法，該自定義佈局要實現的代理方法如下。第一個是設定Cell的大小，也就是寬高。第二個是設定Cell間的邊距。

Objective-C

  #pragma mark 

  - (CGSize)itemSizeWithCollectionView:(UICollectionView *)collectionView
                   collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout {
      return CGSizeMake(200, 200);
  }

  - (CGFloat)marginSizeWithCollectionView:(UICollectionView *)collectionView
                      collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout {
     return 10.0f;
 }

1234567891011

#pragma mark -(CGSize)itemSizeWithCollectionView:(UICollectionView*)collectionView collectionViewLayout:(CustomTransformCollecionLayout*)collectionViewLayout{returnCGSizeMake(200,200);}-(CGFloat)marginSizeWithCollectionView:(UICollectionView*)collectionView collectionViewLayout:(CustomTransformCollecionLayout*)collectionViewLayout{return10.0f;}

4.點選Cell放大和縮小是在UICollectionViewDataSource中點選Cell的代理方法中做的，在此就不做贅述了，詳見GitHub上分享的連結。

三. 如何實現

上面介紹瞭如何去使用該自定義元件，接下來就是“造車”的過程了。本篇部落格的第三部分介紹如何去實現這個自定義佈局。

1. CustomTransformCollecionLayout標頭檔案中的程式碼如下所示，該檔案中定義了一個協議，協議中的方法就是在CollectionView中要實現的那兩個代理方法。這些代理方法提供了Cell的大小和邊距。該檔案的介面中定義了一個代理物件，當然為了強引用迴圈，該代理物件是weak型別的。

Objective-C

  //
  //  CustomTransformCollecionLayout.h
  //  CustomTransformCollecionLayout
  //
  //  Created by Mr.LuDashi on 15/9/24.
  //  Copyright (c) 2015年 ZeluLi. All rights reserved.
  //

  #import

 #define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
 #define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height

 @class CustomTransformCollecionLayout;

 @protocol CustomTransformCollecionLayoutDelegate
/**
  * 確定cell的大小
  */
 - (CGSize) itemSizeWithCollectionView:(UICollectionView *)collectionView
                  collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout;

 /**
  * 確定cell的大小
  */
 - (CGFloat) marginSizeWithCollectionView:(UICollectionView *)collectionView
                  collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout;

 @end

 @interface CustomTransformCollecionLayout : UICollectionViewLayout

 @property (nonatomic, weak) id layoutDelegate;

 @end

1234567891011121314151617181920212223242526272829303132333435

//// CustomTransformCollecionLayout.h// CustomTransformCollecionLayout//// Created by Mr.LuDashi on 15/9/24.// Copyright (c) 2015年 ZeluLi. All rights reserved.//#import#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height@classCustomTransformCollecionLayout;@protocolCustomTransformCollecionLayoutDelegate/** * 確定cell的大小 */-(CGSize) itemSizeWithCollectionView:(UICollectionView*)collectionView collectionViewLayout:(CustomTransformCollecionLayout*)collectionViewLayout;/** * 確定cell的大小 */-(CGFloat) marginSizeWithCollectionView:(UICollectionView*)collectionView collectionViewLayout:(CustomTransformCollecionLayout*)collectionViewLayout;@end@interface CustomTransformCollecionLayout : UICollectionViewLayout@property(nonatomic,weak)idlayoutDelegate;@end

2.接下來介紹一下CustomTransformCollecionLayout實現檔案也就是.m中的程式碼，其中的延展中的屬性如下所示。numberOfSections：該引數代表著CollectionView的Section的個數。numberOfCellsInSection：代表著每個Section中Cell的個數。itemSize則是Cell的尺寸（寬高），該屬性的值是由佈局代理方法提供。itemMargin: 該屬性是Cell的邊距，它也是通過佈局的代理方法提供。itemsX: 用來儲存計算的每個Cell的X座標。

Objective-C

  //
  //  CustomTransformCollecionLayout.m
  //  CustomTransformCollecionLayout
  //
  //  Created by Mr.LuDashi on 15/9/24.
  //  Copyright (c) 2015年 ZeluLi. All rights reserved.
  //

  #import "CustomTransformCollecionLayout.h"

 @interface CustomTransformCollecionLayout()

 @property (nonatomic) NSInteger numberOfSections;
 @property (nonatomic) NSInteger numberOfCellsInSection;
 @property (nonatomic) CGSize itemSize;
 @property (nonatomic) CGFloat itemMargin;18 @property (nonatomic, strong) NSMutableArray *itemsX;

 @end

123456789101112131415161718

//// CustomTransformCollecionLayout.m// CustomTransformCollecionLayout//// Created by Mr.LuDashi on 15/9/24.// Copyright (c) 2015年 ZeluLi. All rights reserved.//#import "CustomTransformCollecionLayout.h"@interfaceCustomTransformCollecionLayout()@property(nonatomic)NSIntegernumberOfSections;@property(nonatomic)NSIntegernumberOfCellsInSection;@property(nonatomic)CGSizeitemSize;@property(nonatomic)CGFloatitemMargin;18@property(nonatomic,strong)NSMutableArray*itemsX;@end

3. 在實現中我們需要重寫UICollectionViewLayout中相關的方法，需要重寫的方法如下：

(1). 預載入佈局方法, 該方法會在UICollectionView載入資料時執行一次，在該方法中負責呼叫一些初始化函式。具體如下所示。

Objective-C

 #pragma mark -- UICollectionViewLayout 重寫的方法
 - (void)prepareLayout {
     [super prepareLayout];

     [self initData];

     [self initItemsX];
 }

12345678

#pragma mark -- UICollectionViewLayout 重寫的方法-(void)prepareLayout{[superprepareLayout];[selfinitData];[selfinitItemsX];}

(2).下面的方法會返回ContentSize, 說白一些，就是CollectionView滾動區域的大小。

Objective-C

 /**
  * 該方法返回CollectionView的ContentSize的大小
  */
 - (CGSize)collectionViewContentSize {
     CGFloat width = _numberOfCellsInSection * (_itemSize.width + _itemMargin);
     return CGSizeMake(width,  SCREEN_HEIGHT);
 }

1234567

/** * 該方法返回CollectionView的ContentSize的大小 */-(CGSize)collectionViewContentSize{CGFloatwidth=_numberOfCellsInSection *(_itemSize.width+_itemMargin);returnCGSizeMake(width,SCREEN_HEIGHT);}

(3).下方的方法是為每個Cell繫結一個UICollectionViewLayoutAttributes物件，用來設定每個Cell的屬性。

Objective-C

  /**
   * 該方法為每個Cell繫結一個Layout屬性~
   */
  - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

      NSMutableArray *array = [NSMutableArray array];

      //add cells
      for (int i = 0; i ) {
         NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];

         UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];

         [array addObject:attributes];
     }
     return array;
 }

1234567891011121314151617

/** * 該方法為每個Cell繫結一個Layout屬性~ */-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{NSMutableArray*array=[NSMutableArrayarray];//add cellsfor(inti=0;i){NSIndexPath*indexPath=[NSIndexPath indexPathForItem:i inSection:0];UICollectionViewLayoutAttributes*attributes=[self layoutAttributesForItemAtIndexPath:indexPath];[array addObject:attributes];}returnarray;}

(4).下方這個方法是比較重要的，重寫這個方法是為了為每個Cell設定不同的屬性值。其中transform的值是根據CollectionView的滾動偏移量來計算的，所以在滾動CollectionView時，Cell也會跟著旋轉。具體的實現方案在程式碼中添加了註釋，如下所示：

Objective-C

  /**
   * 為每個Cell設定attribute
   */
  - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{

      //獲取當前Cell的attributes
      UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

      //獲取滑動的位移
     CGFloat contentOffsetX = self.collectionView.contentOffset.x;
     //根據滑動的位移計算當前顯示的時第幾個Cell
     NSInteger currentIndex = [self countIndexWithOffsetX: contentOffsetX];
     //獲取Cell的X座標
     CGFloat centerX = [_itemsX[indexPath.row] floatValue];
     //計算Cell的Y座標
     CGFloat centerY = SCREEN_HEIGHT/2;

     //設定Cell的center和size屬性
     attributes.center = CGPointMake(centerX, centerY);
     attributes.size = CGSizeMake(_itemSize.width, _itemSize.height);

     //計算當前偏移量（滑動後的位置 - 滑動前的位置）
     CGFloat animationDistance = _itemSize.width + _itemMargin;
     CGFloat change = contentOffsetX - currentIndex * animationDistance + SCREEN_WIDTH / - _itemSize.width / 2;

     //做一個位置修正，因為當滑動過半時，currentIndex就會加一，就不是上次顯示的Cell的索引，所以要減去一做個修正
     if (change 0) {
         change = contentOffsetX - (currentIndex - 1) * animationDistance + SCREEN_WIDTH/2 - _itemSize.width/2;
     }

     if (currentIndex == 0 & contentOffsetX 0) {
         change = 0;
     }

     //旋轉量
     CGFloat temp = M_PI * 2 * (change / (_itemSize.width + _itemMargin));

     //仿射變換 賦值
     attributes.transform = CGAffineTransformMakeRotation(temp);

     //把當前顯示的Cell的zIndex設定成較大的值
     if (currentIndex == indexPath.row) {
         attributes.zIndex = 1000;
     } else {
         attributes.zIndex = currentIndex;
     }

     return attributes;
 }

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

/** * 為每個Cell設定attribute */-(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPath{//獲取當前Cell的attributesUICollectionViewLayoutAttributes*attributes=[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];//獲取滑動的位移CGFloatcontentOffsetX=self.collectionView.contentOffset.x;//根據滑動的位移計算當前顯示的時第幾個CellNSIntegercurrentIndex=[self countIndexWithOffsetX: contentOffsetX];//獲取Cell的X座標CGFloatcenterX=[_itemsX[indexPath.row] floatValue];//計算Cell的Y座標CGFloatcenterY=SCREEN_HEIGHT/2;//設定Cell的center和size屬性attributes.center=CGPointMake(centerX,centerY);attributes.size=CGSizeMake(_itemSize.width,_itemSize.height);//計算當前偏移量（滑動後的位置 - 滑動前的位置）CGFloatanimationDistance=_itemSize.width+_itemMargin;CGFloatchange=contentOffsetX-currentIndex *animationDistance+SCREEN_WIDTH/-_itemSize.width/2;//做一個位置修正，因為當滑動過半時，currentIndex就會加一，就不是上次顯示的Cell的索引，所以要減去一做個修正if(change0){change=contentOffsetX-(currentIndex-1)*animationDistance+SCREEN_WIDTH/2-_itemSize.width/2;}if(currentIndex==0&contentOffsetX0){change=0;}//旋轉量CGFloattemp=M_PI*2*(change/(_itemSize.width+_itemMargin));//仿射變換賦值attributes.transform=CGAffineTransformMakeRotation(temp);//把當前顯示的Cell的zIndex設定成較大的值if(currentIndex==indexPath.row){attributes.zIndex=1000;}else{attributes.zIndex=currentIndex;}returnattributes;

iOS開發之窺探UICollectionViewController(五)：一款炫酷的圖片瀏覽元件

iOS開發之窺探UICollectionViewController(五)：一款炫酷的圖片瀏覽元件

iOS開發之窺探UICollectionViewController(三) ：使用UICollectionView自定義瀑布流

iOS開發之窺探UICollectionViewController(二) ：詳解CollectionView各種回撥

iOS開發之窺探UICollectionViewController(一) ：Ready Your CollectionViewController

iOS開發之窺探UICollectionViewController(四) --一款功能強大的自定義瀑布流

iOS開發之效能除錯Instruments（一）

iOS開發之runtime（一）：runtime除錯環境搭建

iOS開發之快取（一）：記憶體快取

iOS開發之opencv學習筆記一：下載和安裝

Qt開發之中國象棋篇（一）：工程概述

iOS開發之Weex爬坑之路環境部署和Devtools Debug（一）

iOS開發之再探多執行緒程式設計：Grand Central Dispatch詳解

iOS開發之opencv學習筆記四：使用feature2d識別圖片

iOS開發之高階檢視—— UITableView(一)簡單例子

IOS開發之非同步載入網路圖片並快取本地實現瀑布流（一）

Hybrid APP 混合開發模式的選擇之路（五：原生和H5的互動原理）

IOS開發之新增第三方lib或從其他工程引入lib時的連結錯誤：ld: symbol(s) not found for architecture i386

iOS開發之網路程式設計篇三：同步，非同步請求差異及用法

IOS開發之HomeKit（一）

iOS開發之關於Runtime執行時：類與物件

iOS開發之窺探UICollectionViewController(五)：一款炫酷的圖片瀏覽元件

相關推薦