IOS 瀑布流

本篇博客應該算的上CollectionView的高級應用了，從iOS開發之窺探UICollectionViewController(一)到今天的(五)，可謂是由淺入深的窺探了一下UICollectionView的用法，這些用法不只包括SDK中自帶的流式佈局（UICollectionViewDelegateFlowLayout）並且介紹瞭如何根據你的需求去自定義屬於你本身的CollectionView。自定義的CollectionView可謂是很是靈活，其靈活性也決定了其功能的強大。CollectionView的自定義就是其Cell高度可定製的屬性，經過對Cell賦值不一樣的屬性來達到自定義的目的。

　　在上篇博客《iOS開發之窺探UICollectionViewController(四) --一款功能強大的自定義瀑布流》中，經過自定義的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關聯一個類，而後咱們就可使用自定義的佈局了。獲取指定的自定義佈局對象，而後指定委託代理對象，以下所示：

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也會跟着旋轉。具體的實現方案在代碼中添加了註釋，以下所示：

  View Code

 

　　　　(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出如今屏幕的中心的位置，方法以下：

  View Code

 

　　　　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 }

 

　　至此，Demo的代碼講解完畢，通過上述步驟，你就能夠寫出上面動畫中的自定義效果了，具體代碼會在github中進行分享。分享連接以下：

　　github上Demo的連接地址：https://github.com/lizelu/CustomTransformCollecionLayout

做者：青玉伏案 
出處：http://www.cnblogs.com/ludashi/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。