与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

• 1、直播喵播MGMiaoBo下载

Snip20161026_15.png

Snip20161026_16.png

Snip20161026_35.png

• 2、逗视：逗你玩的直播App，可下载试玩

• 看下效果

逗视介绍1.gif

逗视介绍2.gif