UICollectionView详解：(Header/Footer)

与UITableView一样，UICollectionView的每个Section也可以自定义Header与Footer，本节讲解如何创建自定义的Header与Footer

1、创建自定义Header/Footer类

创建一个自定义类，继承自：UICollectionReusableView
定义样式

2、注册Header与Footer

分别添加Header与Footer的可重用标示符

static NSString * const reuseIdentifierHeader = @"MGHeaderCell";
static NSString * const reuseIdentifierFooter = @"MGFooterCell";

在viewDidLoad方法中注册Header与Footer

[self.collectionView registerNib:[UINib nibWithNibName:@"MGHeaderView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:reuseIdentifierHeader];
[self.collectionView registerNib:[UINib nibWithNibName:@"MGFooterView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:reuseIdentifierFooter];

3、实现Header与Footer的数据源方法

实现CollectionView的viewForSupplementaryElementOfKind：代理方法，并设置Header、Footer的一些属性，如下：

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
 
 UICollectionReusableView *supplementaryView;
 
 if ([kind isEqualToString:UICollectionElementKindSectionHeader]){
 MGHeaderView *view = (MGHeaderView *)[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:reuseIdentifierHeader forIndexPath:indexPath];
 view.headerLabel.text = [NSString stringWithFormat:@"MG这是header:%d",indexPath.section];
 supplementaryView = view;
 
 }
 else if ([kind isEqualToString:UICollectionElementKindSectionFooter]){
 MGFooterView *view = (MGFooterView *)[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:reuseIdentifierFooter forIndexPath:indexPath];
 view.footerLabel.text = [NSString stringWithFormat:@"MG这是Footer:%d",indexPath.section];
 supplementaryView = view;
 
 }
 
 return supplementaryView;
}

4、设置Header与Footer的大小

实现UICollectionViewDelegateFlowLayout协议中的referenceSizeForHeaderInSection以及referenceSizeForFooterInSection方法，设置Header与Footer的大小

// 设置Header的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
 CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
 return CGSizeMake(screenWidth, 69);
}
 
// 设置Footer的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
 CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
 return CGSizeMake(screenWidth, 50);
}

github

项目	简介
MGDS_Swif	逗视视频直播
MGMiaoBo	喵播视频直播
MGDYZB	斗鱼视频直播
MGDemo	n多小功能合集
MGBaisi	高度仿写百思
MGSinaWeibo	高度仿写Sina
MGLoveFreshBeen	一款电商App
MGWeChat	小部分实现微信功能
MGTrasitionPractice	自定义转场练习
DBFMDemo	豆瓣电台
MGPlayer	一个播放视频的Demo
MGCollectionView	环形图片排布以及花瓣形排布
MGPuBuLiuDemo	瀑布流--商品展
MGSlideViewDemo	一个简单点的侧滑效果，仿QQ侧滑
MyResume	一个展示自己个人简历的Demo
GoodBookDemo	好书