iOS開發之窺探UICollectionViewController(五),ios開發uicollection
本篇部落格應該算的上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選項就是你要關聯的自訂布局檔案,具體如下所示。代碼的就在此不做贅述了,網上一抓一大把。
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.width12 #define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height13 14 @class CustomTransformCollecionLayout;15 16 @protocol CustomTransformCollecionLayoutDelegate <NSObject>17 /**18 * 確定cell的大小19 */20 - (CGSize) itemSizeWithCollectionView:(UICollectionView *)collectionView21 collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout;22 23 /**24 * 確定cell的大小25 */26 - (CGFloat) marginSizeWithCollectionView:(UICollectionView *)collectionView27 collectionViewLayout:(CustomTransformCollecionLayout *)collectionViewLayout;28 29 @end30 31 @interface CustomTransformCollecionLayout : UICollectionViewLayout32 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 //根據滑動的位移計算當前顯示的時第幾個Cell12 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 }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出現在螢幕的中心的位置,方法如下:
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 }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