轉載:http://www.cnblogs.com/wayne23/p/4013522.html
初始化部分:
UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init]; self.myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(20, 20, 250, 350) collectionViewLayout:flowLayout]; self.myCollectionView.backgroundColor = [UIColor grayColor]; [self.myCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@“myCell"]; self.myCollectionView.delegate = self; self.myCollectionView.dataSource = self; [self.view addSubview:self.myCollectionView];
UICollectionViewLayout
UICollectionViewLayout決定了UICollectionView如何顯示在界面上,Apple提供了一個最簡單的默認layout對象:UICollectionViewFlowLayout。
Flow Layout是一個Cells的線性佈局方案,並具有頁面和頁腳。其可定製的內容如下:
itemSize屬性
設定全局的Cell尺寸,如果想要單獨定義某個Cell的尺寸,可以使用下面方法:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
minimumLineSpacing屬性
設定全局的行間距,如果想要設定指定區內Cell的最小行距,可以使用下面方法:
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
minimumInteritemSpacing屬性
設定全局的Cell間距,如果想要設定指定區內Cell的最小間距,可以使用下面方法:
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
scrollDirection屬性
設定滾動方向,有UICollectionViewScrollDirectionVertical和UICollectionViewScrollDirectionHorizontal兩個值。
headerReferenceSize屬性與footerReferenceSize屬性
設定頁眉和頁腳的全局尺寸,需要注意的是,根據滾動方向不同,header和footer的width和height中只有一個會起作用。如果要單獨設置指定區內的頁面和頁腳尺寸,可以使用下面方法:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
sectionInset屬性
設定全局的區內邊距,如果想要設定指定區的內邊距,可以使用下面方法:
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
然後需要實現三種類型的委託:UICollectionViewDataSource, UICollectionViewDelagate和UICollectionViewDelegateFlowLayout。
@interface ViewController : UIViewController <UICollectionViewDelegateFlowLayout, UICollectionViewDataSource>
因爲UICollectionViewDelegateFlowLayout實際上是UICollectionViewDelegate的一個子協議,它繼承了UICollectionViewDelegate,所以只需要在聲明處寫上UICollectionViewDelegateFlowLayout就行了。
UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
返回collection view裏區(section)的個數,如果沒有實現該方法,將默認返回1:
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 2; }
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
返回指定區(section)包含的數據源條目數(number of items),該方法必須實現:
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 7; }
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
返回某個indexPath對應的cell,該方法必須實現:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath]; if(indexPath.section==0) { cell.backgroundColor = [UIColor redColor]; } else if(indexPath.section==1) { cell.backgroundColor = [UIColor greenColor]; } return cell; }
UICollectionViewCell結構上相對比較簡單,由下至上:
- 首先是cell本身作爲容器view
- 然後是一個大小自動適應整個cell的backgroundView,用作cell平時的背景
- 再其次是selectedBackgroundView,是cell被選中時的背景
- 最後是一個contentView,自定義內容應被加在這個view上
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
爲collection view添加一個補充視圖(頁眉或頁腳)
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
設定頁眉的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
設定頁腳的尺寸
- (void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier
添加頁眉和頁腳以前需要註冊類和標識:
添加補充視圖的代碼示例:
[self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader"]; [self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader"]; -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section { CGSize size = {240,25}; return size; } -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section { CGSize size = {240,25}; return size; } - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { MyHeadView *headView; if([kind isEqual:UICollectionElementKindSectionHeader]) { headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath]; [headView setLabelText:[NSString stringWithFormat:@"section %d's header",indexPath.section]]; } else if([kind isEqual:UICollectionElementKindSectionFooter]) { headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath]; [headView setLabelText:[NSString stringWithFormat:@"section %d's footer",indexPath.section]]; } return headView; }
MyHeadView.h
#import <UIKit/UIKit.h> @interface MyHeadView : UICollectionReusableView - (void) setLabelText:(NSString *)text; @end
MyHeadView.m
#import "MyHeadView.h" @interface MyHeadView() @property (strong, nonatomic) UILabel *label; @end @implementation MyHeadView - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.label = [[UILabel alloc] init]; self.label.font = [UIFont systemFontOfSize:18]; [self addSubview:self.label]; } return self; } - (void) setLabelText:(NSString *)text { self.label.text = text; [self.label sizeToFit]; } @end
在註冊Cell和補充視圖時,也可以用新建xib文件的方式:
[self.myCollectionView registerNib:[UINib nibWithNibName:@"MyCollectionCell" bundle:nil] forCellWithReuseIdentifier:@"hxwCell"]; [self.myCollectionView registerNib:[UINib nibWithNibName:@"MySupplementaryView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader"]; [self.myCollectionView registerNib:[UINib nibWithNibName:@"MySupplementaryView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwFooter"];
用這種方式註冊後,甚至可以不用新建類去綁定這個xib,直接通過viewWithTag的方式獲取xib裏的控件:
UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind :kind withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath]; UILabel *label = (UILabel *)[view viewWithTag:1]; label.text = @"empty";
UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
設定指定Cell的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { if(indexPath.section==0 && indexPath.row==1) { return CGSizeMake(50, 50); } else { return CGSizeMake(75, 30); } }
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
設定collectionView(指定區)的邊距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { if(section==0) { return UIEdgeInsetsMake(35, 25, 15, 25); } else { return UIEdgeInsetsMake(15, 15, 15, 15); } }
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
設定指定區內Cell的最小行距,也可以直接設置UICollectionViewFlowLayout的minimumLineSpacing屬性
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { if(section==0) { return 10.0; } else { return 20.0; } }
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
設定指定區內Cell的最小間距,也可以直接設置UICollectionViewFlowLayout的minimumInteritemSpacing屬性
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { if(section==0) { return 10.0; } else { return 20.0; } }
UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
當指定indexPath處的item被選擇時觸發
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { [self.myArray removeObjectAtIndex:indexPath.row]; [collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]]; }
P.s. 當你刪除或添加元素時,一定要更新numberOfItemsInSection的返回情況。
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
當指定indexPath處的item被取消選擇時觸發,僅在允許多選時被調用
下面是三個和高亮有關的方法:
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath
事件的處理順序如下:
- 手指按下
- shouldHighlightItemAtIndexPath (如果返回YES則向下執行,否則執行到這裏爲止)
- didHighlightItemAtIndexPath (高亮)
- 手指鬆開
- didUnhighlightItemAtIndexPath (取消高亮)
- shouldSelectItemAtIndexPath (如果返回YES則向下執行,否則執行到這裏爲止)
- didSelectItemAtIndexPath (執行選擇事件)
如果只是簡單實現點擊後cell改變顯示狀態,只需要在cellForItemAtIndexPath方法裏返回cell時,指定cell的selectedBackgroundView:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath]; UIView* selectedBGView = [[UIView alloc] initWithFrame:cell.bounds]; selectedBGView.backgroundColor = [UIColor blueColor]; cell.selectedBackgroundView = selectedBGView; return cell; }
如果要實現點擊時(手指未鬆開)的顯示狀態與點擊後(手指鬆開)的顯示狀態,則需要通過上面提到的方法來實現:
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } - (void)collectionView:(UICollectionView *)colView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell* cell = [colView cellForItemAtIndexPath:indexPath]; [cell setBackgroundColor:[UIColor purpleColor]]; } - (void)collectionView:(UICollectionView *)colView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell* cell = [colView cellForItemAtIndexPath:indexPath]; [cell setBackgroundColor:[UIColor yellowColor]]; }