- 三個(gè)代理<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
前兩個(gè)的用法和tableView的很像寺渗,第三個(gè)是布局的協(xié)議大猛。(注意:頭視圖尾視圖都是由代理方法獲得历涝,而且需要寫(xiě)注冊(cè)诅需,缺少了也不行漾唉。) 注冊(cè)以后,就不需要再去管理復(fù)用的問(wèn)題了堰塌。這點(diǎn)就很簡(jiǎn)單赵刑。這個(gè)如果用好的話(huà),會(huì)非常的簡(jiǎn)單蔫仙。 - item(即cell)的布局原理(類(lèi)似tableView)
- header/footer View的布局原理
都是繼承于UICollectionReusableView料睛,并且必須要從dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:這個(gè)代理方法中獲取,而且根據(jù)不同的kind作為headerView或者footerView摇邦,切記:collectionView中頭部視圖和尾部視圖也需要注冊(cè)
下面直接上代碼恤煞,看注釋即可:
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>{
}
@property (strong, nonatomic)UICollectionView *collectionView;
@end
ViewController.m
#import "ViewController.h"
#import "NewSceneCollectionHeaderView.h"
#import "NewSceneCollectionFooterView.h"
#import "NewSceneCollectionViewCell.h"
@interface ViewController ()
@end
//cell、header施籍、footerView 標(biāo)識(shí)
static NSString *cellIdentifier = @"NewSceneCollectionViewCell";
static NSString *headerIdentifier = @"NewSceneCollectionHeaderView";
static NSString *footerIdentifier = @"NewSceneCollectionFooterView";
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//創(chuàng)建布局對(duì)象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
//flowlaout的屬性居扒,確定是水平滾動(dòng),還是垂直滾動(dòng)
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//接下來(lái)就在創(chuàng)建collectionView的時(shí)候初始化丑慎,就很方便了(能直接帶上layout)
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 200, 320, 280) collectionViewLayout:flowLayout];
self.collectionView.backgroundColor = [UIColor grayColor];
//指定數(shù)據(jù)源和代理
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
//添加到主頁(yè)面上去
[self.view addSubview:self.collectionView];
//collectionCell的注冊(cè)
[self.collectionView registerClass:[NewSceneCollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];
//collection頭視圖的注冊(cè)喜喂。 注意:奇葩的地方來(lái)了,頭視圖和尾部視圖也得注冊(cè)
[self.collectionView registerClass:[NewSceneCollectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
[self.collectionView registerClass:[NewSceneCollectionFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:footerIdentifier];
/*另一種方式
//從Xib上注冊(cè)
UINib *nib = nil;
nib = [UINib nibWithNibName:cellIdentifier bundle:nil];
[self.collectionView registerNib:nib
forCellWithReuseIdentifier:cellIdentifier];
//注冊(cè)headerview和footerview
nib = [UINib nibWithNibName:headerIdentifier bundle:nil];
[self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
nib = [UINib nibWithNibName:footerIdentifier bundle:nil];
[self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier];
*/
[self.view addSubview:self.collectionView];
}
/********************************************************
*UICollectionViewDataSource/Delegate/DelegateFlowLayout
********************************************************/
#pragma mark UICollectionViewDataSource/Delegate
//返回多少組(section)竿裂,此方法不寫(xiě)默認(rèn)是1組(跟tableview類(lèi)似)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 2;
}
#pragma mark required
//每組返回多少個(gè)Item玉吁,這個(gè)Item類(lèi)似tableview中的cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
//返回cell,這里構(gòu)建Item(即cell)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//這里是自定義的cell
NewSceneCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor redColor];
return cell;
}
#pragma mark optional
//自定義header/footerView
// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
//這里返回的view必須要從dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:這個(gè)方法中獲取腻异,而且根據(jù)不同的kind作為headerView或者footerView进副,切記:collectionView中頭部視圖和尾部視圖也需要注冊(cè)
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
UICollectionReusableView *reusableView = nil;
if (UICollectionElementKindSectionHeader == kind) {
//這里是自定義的頭視圖
NewSceneCollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
headerView.backgroundColor = [UIColor whiteColor];
return headerView;
}
if (UICollectionElementKindSectionFooter == kind {
//這里是自定義的尾視圖
NewSceneCollectionFooterView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
footerView.backgroundColor = [UIColor whiteColor];
return footerView;
}
return reusableView;
}
#pragma mark --UICollectionViewDelegateFlowLayout
//布局確定每個(gè)Item 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(100, 100);
}
//布局確定每個(gè)section內(nèi)的Item距離section四周的間距 UIEdgeInsets
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(10, 10, 10, 10);
}
//返回每個(gè)section內(nèi)上下兩個(gè)Item之間的間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 10;
}
//返回每個(gè)section內(nèi)左右兩個(gè)Item之間的間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 10;
}
//返回headerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
CGFloat width = CGRectGetWidth(collectionView.bounds);
CGFloat height = width + 86;
return CGSizeMake(width, height);
}
//返回footerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
CGFloat width = CGRectGetWidth(collectionView.bounds);
CGFloat height = 144;
return CGSizeMake(width, height);
}
#pragma mark --UICollectionViewDelegate
//UICollectionView被選中時(shí)調(diào)用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NewSceneCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor greenColor];
NSLog(@"item======%ld",(long)indexPath.item);
NSLog(@"row=======%ld",(long)indexPath.row);
NSLog(@"section===%ld",(long)indexPath.section);
}
//返回這個(gè)UICollectionView是否可以被選擇
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}