iOS開發開發高級分享 — 窺探UICollectionViewController(五)

iOS開發高級分享 — 窺探UICollectionViewController(一)

iOS開發高級分享 — 窺探UICollectionViewController(二)

iOS開發高級分享 — 窺探UICollectionViewController(三)

iOS開發開發高級分享 — 窺探UICollectionViewController(四)

一款炫酷的圖片瀏覽組件

本篇博客是使用自定義CollectionView的另外一個實例，自定義CollectionView的方式和上一篇是一致的，都是重寫UICollectionViewLayout相應的方法，而後再經過委託回調來設置佈局的參數。自定義CollectionView的思路是同樣的，只是具體的實現方式不一樣。學習麼，要學會觸類旁通，但願你們能經過這兩篇自定義CollectionView的博客來寫出屬於你本身的自定義效果。

點擊此處便可獲取精選面試資料哦

一.效果展現

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

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

咱們先看一下該自定義佈局是如何使用的，而後再經過使用方式來逐步介紹它是如何實現的。這也是一個由淺入深的過程，由於用起來要比作起了更容易。好比開汽車容易，造汽車可就麻煩多了。因此在本篇博客的第二部分，將要介紹如何去使用該自定義組件。

其實全部CollectionView的自定義佈局的使用方式都是同樣的，分爲如下幾步：

1. 爲咱們的CollectionView指定該佈局，本篇博客的CollectionView是經過Storyboard來實現的，因此咱們能夠經過Storyboard來指定自定義的佈局文件，若是你是使用純代碼方式，能夠在CollectionView實例化時來指定所需的佈局。下方是使用Storyboard來指定的佈局文件，須要把Layout選項調到Custom下，而後下方的Class選項就是你要關聯的自定義佈局文件，具體以下所示。代碼的就在此不作贅述了，網上一抓一大把。

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

1 - (void)viewDidLoad {
2     [super viewDidLoad];
3     
4     _customeLayout = (CustomTransformCollecionLayout *) self.collectionViewLayout;
5     _customeLayout.layoutDelegate = self;
6 }
複製代碼

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

1 #pragma mark <CustomTransformCollecionLayoutDelegate>
 2 
 3 - (CGSize)itemSizeWithCollectionView:(UICollectionView *)collectionView
 4                  collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout {
 5     return CGSizeMake(200, 200);
 6 }
 7 
 8 - (CGFloat)marginSizeWithCollectionView:(UICollectionView *)collectionView
 9                     collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout {
10     return 10.0f;
11 }
複製代碼

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

三. 如何實現

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

1. CustomTransformCollecionLayout頭文件中的代碼以下所示，該文件中定義了一個協議，協議中的方法就是在CollectionView中要實現的那兩個代理方法。這些代理方法提供了Cell的大小和邊距。該文件的接口中定義了一個代理對象，固然爲了強引用循環，該代理對象是weak類型的。

1 //
 2 //  CustomTransformCollecionLayout.h
 3 //  CustomTransformCollecionLayout
 4 //
 5 //  Created by Mr.LuDashi on 15/9/24.
 6 //  Copyright (c) 2015年 ZeluLi. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 #define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
12 #define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height
13 
14 @class CustomTransformCollecionLayout;
15 
16 @protocol CustomTransformCollecionLayoutDelegate <NSObject>
17 /**
18  * 肯定cell的大小
19  */
20 - (CGSize) itemSizeWithCollectionView:(UICollectionView *)collectionView
21                  collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout;
22 
23 /**
24  * 肯定cell的大小
25  */
26 - (CGFloat) marginSizeWithCollectionView:(UICollectionView *)collectionView
27                  collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout;
28 
29 @end
30 
31 @interface CustomTransformCollecionLayout : UICollectionViewLayout
32 
33 @property (nonatomic, weak) id<CustomTransformCollecionLayoutDelegate> layoutDelegate;
34 
35 @end
複製代碼

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

1 //
 2 //  CustomTransformCollecionLayout.m
 3 //  CustomTransformCollecionLayout
 4 //
 5 //  Created by Mr.LuDashi on 15/9/24.
 6 //  Copyright (c) 2015年 ZeluLi. All rights reserved.
 7 //
 8 
 9 #import "CustomTransformCollecionLayout.h"
10 
11 @interface CustomTransformCollecionLayout()
12 
13 @property (nonatomic) NSInteger numberOfSections;
14 @property (nonatomic) NSInteger numberOfCellsInSection;
15 @property (nonatomic) CGSize itemSize;
16 @property (nonatomic) CGFloat itemMargin;18 @property (nonatomic, strong) NSMutableArray *itemsX;
19 
20 @end
複製代碼

3. 在實現中咱們須要重寫UICollectionViewLayout中相關的方法，須要重寫的方法以下：

(1). 預加載佈局方法, 該方法會在UICollectionView加載數據時執行一次，在該方法中負責調用一些初始化函數。具體以下所示。

1 #pragma mark -- UICollectionViewLayout 重寫的方法
2 - (void)prepareLayout {
3     [super prepareLayout];
4     
5     [self initData];
6     
7     [self initItemsX];
8 }
複製代碼

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

1 /**
2  * 該方法返回CollectionView的ContentSize的大小
3  */
4 - (CGSize)collectionViewContentSize {
5     CGFloat width = _numberOfCellsInSection * (_itemSize.width + _itemMargin);
6     return CGSizeMake(width,  SCREEN_HEIGHT);
7 }
複製代碼

(3).下方的方法是爲每一個Cell綁定一個UICollectionViewLayoutAttributes對象，用來設置每一個Cell的屬性。

1 /**
 2  * 該方法爲每一個Cell綁定一個Layout屬性~
 3  */
 4 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
 5     
 6     NSMutableArray *array = [NSMutableArray array];
 7     
 8     //add cells
 9     for (int i = 0; i < _numberOfCellsInSection; i++) {
10         NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
11         
12         UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
13         
14         [array addObject:attributes];
15     }
16     return array;
17 }
複製代碼

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

1 /**
 2  * 爲每一個Cell設置attribute
 3  */
 4 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
 5     
 6     //獲取當前Cell的attributes
 7     UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
 8     
 9     //獲取滑動的位移
10     CGFloat contentOffsetX = self.collectionView.contentOffset.x;
11     //根據滑動的位移計算當前顯示的時第幾個Cell
12     NSInteger currentIndex = [self countIndexWithOffsetX: contentOffsetX];
13     //獲取Cell的X座標
14     CGFloat centerX = [_itemsX[indexPath.row] floatValue];
15     //計算Cell的Y座標
16     CGFloat centerY = SCREEN_HEIGHT/2;
17     
18     //設置Cell的center和size屬性
19     attributes.center = CGPointMake(centerX, centerY);
20     attributes.size = CGSizeMake(_itemSize.width, _itemSize.height);
21 
22     //計算當前偏移量（滑動後的位置 - 滑動前的位置）
23     CGFloat animationDistance = _itemSize.width + _itemMargin;
24     CGFloat change = contentOffsetX - currentIndex * animationDistance + SCREEN_WIDTH / 2 - _itemSize.width / 2;
25     
26     //作一個位置修正，由於當滑動過半時，currentIndex就會加一，就不是上次顯示的Cell的索引，因此要減去一作個修正
27     if (change < 0) {
28         change = contentOffsetX - (currentIndex - 1) * animationDistance + SCREEN_WIDTH/2 - _itemSize.width/2;
29     }
30     
31     if (currentIndex == 0 && contentOffsetX <= 0) {
32         change = 0;
33     }
34     
35     //旋轉量
36     CGFloat temp = M_PI * 2 * (change / (_itemSize.width + _itemMargin));
37     
38     //仿射變換 賦值
39     attributes.transform = CGAffineTransformMakeRotation(temp);
40     
41     //把當前顯示的Cell的zIndex設置成較大的值
42     if (currentIndex == indexPath.row) {
43         attributes.zIndex = 1000;
44     } else {
45         attributes.zIndex = currentIndex;
46     }
47     
48     return attributes;
49 }
複製代碼

(5).要讓Cell隨着滾動旋轉起來，你須要重寫下面這個方法，而且返回YES。該方法返回YES意味着當滾動時，會再次執行上面（4）的方法，從新爲每一個Cell的屬性賦值。因此重寫下面的方法，並返回YES(下面的表達式也是同樣的)才能夠運動起來呢。

1 //當邊界發生改變時，是否應該刷新佈局。若是YES則在邊界變化（通常是scroll到其餘地方）時，將從新計算須要的佈局信息。
2 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
3     return !CGRectEqualToRect(newBounds, self.collectionView.bounds);
4 }
複製代碼

(6).重寫下面的方法是爲了修正CollectionView滾動的偏移量，使當前顯示的Cell出如今屏幕的中心的位置，方法以下：

1 //修正Cell的位置，使當前Cell顯示在屏幕的中心
 2 - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
 3     
 4     
 5     //計算顯示的是第幾個Cell
 6     NSInteger index = [self countIndexWithOffsetX:proposedContentOffset.x];
 7     
 8     CGFloat centerX = index * (_itemSize.width + _itemMargin) + (_itemSize.width/2);
 9     
10     proposedContentOffset.x = centerX - SCREEN_WIDTH/2;
11     
12     return proposedContentOffset;
13 }
複製代碼

4. 下方就是我本身實現的方法了，也就在重寫的方法中調用的函數，具體以下。

1 #pragma mark -- 自定義的方法
 2 /**
 3  * 根據滾動便宜量來計算當前顯示的時第幾個Cell
 4  */
 5 - (NSInteger) countIndexWithOffsetX: (CGFloat) offsetX{
 6     return (offsetX + (SCREEN_WIDTH / 2)) / (_itemSize.width + _itemMargin);
 7 }
 8 
 9 /**
10  * 初始化私有屬性，經過代理獲取配置參數
11  */
12 - (void) initData{
13     _numberOfSections = self.collectionView.numberOfSections;
14     
15     _numberOfCellsInSection = [self.collectionView numberOfItemsInSection:0];
16 
17     _itemSize = [_layoutDelegate itemSizeWithCollectionView:self.collectionView collectionViewLayout:self];
18     
19     _itemMargin = [_layoutDelegate marginSizeWithCollectionView:self.collectionView collectionViewLayout:self];
20     
21 }
22 
23 /**
24  * 計算每一個Cell的X座標
25  */
26 - (void) initItemsX{
27     _itemsX = [[NSMutableArray alloc] initWithCapacity:_numberOfCellsInSection];
28     
29     for (int i = 0; i < _numberOfCellsInSection; i ++) {
30         CGFloat tempX = i * (_itemSize.width + _itemMargin) + _itemSize.width/2;
31         [_itemsX addObject:@(tempX)];
32     }
33     
34     
35 }
複製代碼

你認爲如何？請經過加咱們的交流羣 點擊此處進交流羣 ，來一塊兒交流或者發佈您的問題，意見或反饋。

github上Demo的連接地址：github.com/lizelu/Cust…

做者：青玉伏案  出處：www.cnblogs.com/ludashi/