UICollectionView详解：(Header/Foote

2016-05-15 本文已影响5695人 Mg明明就是你

与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);
}```