初始化部分:
UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayo ut alloc]init];self.myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(20, 20, 250, 350) collectionViewLayout:flowLayout];self.myCollectionView.backgroundColor = [UIColor grayColor];[self.myCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifi er:@“myCell"];self.myCollectionView.delegate = self;self.myCollectionView.dataSource = self;[self.view addSubview:self.myCollectionView];
UICollectionViewLayout
UICollectionViewLayout決定了UICollectionView如何顯示在界面上,Apple提供了一個最簡單的默認layout對象:UICollectionViewFlowLayo
ut。 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 minimumLineSpacingForSec tionAtIndex:(NSInteger)section minimumInteritemSpacing屬性
設定全局的Cell間距,如果想要設定指定區內Cell的最小間距,可以使用下面方法:
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingF
orSectionAtIndex:(NSInteger)section; scrollDirection屬性
設定滾動方向,有UICollectionViewScrollDi
rectionVertical和UICollectionViewScrollDi rectionHorizontal兩個值。 headerReferenceSize屬性與footerReferenceSize屬性
設定頁眉和頁腳的全局尺寸,需要注意的是,根據滾動方向不同,header和footer的width和height中只有一個會起作用。如果要單獨設置指定區內的頁面和頁腳尺寸,可以使用下面方法:
-
(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderIn Section:(NSInteger)section -
(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterIn Section:(NSInteger)section sectionInset屬性
設定全局的區內邊距,如果想要設定指定區的內邊距,可以使用下面方法:
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
然后需要實現三種類型的委托:UICollectionViewDataSour
ce, UICollectionViewDelagate 和UICollectionViewDelegate FlowLayout。 @interface ViewController : UIViewController因為UICollectionViewDelegate
FlowLayout實際上是UICollectionViewDelegate 的一個子協議,它繼承了UICollectionViewDelegate ,所以只需要在聲明處寫上UICollectionViewDelegate FlowLayout就行了。
UICollectionViewDataSour
ce -
(NSInteger)numberOfSectionsInCollec tionView:(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 viewForSupplementaryElem entOfKind:(NSString*)kind atIndexPath:(NSIndexPath *)indexPath 為collection view添加一個補充視圖(頁眉或頁腳)
-
(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderIn Section:(NSInteger)section 設定頁眉的尺寸
-
(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterIn Section:(NSInteger)section 設定頁腳的尺寸
-
(void)registerClass:(Class)viewClass forSupplementaryViewOfKi nd:(NSString *)elementKind withReuseIdentifier:(NSString*)identifier 添加頁眉和頁腳以前需要注冊類和標識:
添加補充視圖的代碼示例:
[self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindS ectionHeader withReuseIdentifier:@"hxwHeader"];[self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKi nd:UICollectionElementKindS ectionFooter withReuseIdentifier:@"hxwHeader"];-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderIn Section:(NSInteger)section{ CGSize size = {240,25}; return size;}-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterIn Section:(NSInteger)section{ CGSize size = {240,25}; return size;}- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElem entOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ MyHeadView *headView; if([kind isEqual:UICollectionElementKindS ectionHeader]) { headView = [collectionView dequeueReusableSupplemen taryViewOfKind:UICollectionElementKindS ectionHeader withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath]; [headView setLabelText:[NSString stringWithFormat:@"section %d's header",indexPath.section]]; } else if([kind isEqual:UICollectionElementKindS ectionFooter]) { headView = [collectionView dequeueReusableSupplemen taryViewOfKind:UICollectionElementKindS ectionFooter withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath]; [headView setLabelText:[NSString stringWithFormat:@"section %d's footer",indexPath.section]]; } return headView;}
MyHeadView.h
#import @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] forSupplementaryViewOfKi nd:UICollectionElementKindS ectionHeader withReuseIdentifier:@"hxwHeader"]; [self.myCollectionView registerNib:[UINib nibWithNibName:@"MySupplementaryView" bundle:nil] forSupplementaryViewOfKi nd:UICollectionElementKindS ectionFooter withReuseIdentifier:@"hxwFooter"]; 用這種方式注冊后,甚至可以不用新建類去綁定這個xib,直接通過viewWithTag的方式獲取xib里的控件:
UICollectionReusableView*view = [collectionView dequeueReusableSupplemen taryViewOfKind :kind withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];UILabel *label = (UILabel *)[view viewWithTag:1];label.text = @"empty";
UICollectionViewDelegate
FlowLayout -
(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 minimumLineSpacingForSec tionAtIndex:(NSInteger)section 設定指定區內Cell的最小行距,也可以直接設置UICollectionViewFlowLayo
ut的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 minimumInteritemSpacingF
orSectionAtIndex:(NSInteger)section; 設定指定區內Cell的最小間距,也可以直接設置UICollectionViewFlowLayo
ut的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 didDeselectItemAtIndexPa th:(NSIndexPath *)indexPath 當指定indexPath處的item被取消選擇時觸發,僅在允許多選時被調用
下面是三個和高亮有關的方法:
-
(BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtInd exPath:(NSIndexPath *)indexPath -
(void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexP ath:(NSIndexPath *)indexPath -
(void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtInde xPath:(NSIndexPath *)indexPath
事件的處理順序如下:
手指按下shouldHighlightItemAtIndexPath (如果返回YES則向下執行,否則執行到這里為止)didHighlightItemAtIndexP ath (高亮)手指松開didUnhighlightItemAtInde xPath (取消高亮)shouldSelectItemAtIndexP ath (如果返回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 didHighlightItemAtIndexP ath:(NSIndexPath *)indexPath{ UICollectionViewCell* cell = [colView cellForItemAtIndexPath:indexPath]; [cell setBackgroundColor:[UIColor purpleColor]];}- (void)collectionView:(UICollectionView *)colView didUnhighlightItemAtInde xPath:(NSIndexPath *)indexPath{ UICollectionViewCell* cell = [colView cellForItemAtIndexPath:indexPath]; [cell setBackgroundColor:[UIColor yellowColor]];}
新聞熱點
疑難解答