與UITableView一樣，UICollectionView的每個Section也可以自定義Header與Footer，本節(jié)講解如何創(chuàng)建自定義的Header與Footer

1库快、創(chuàng)建自定義Header/Footer類

• 創(chuàng)建一個自定義類探越，繼承自：UICollectionReusableView
• 定義樣式

2、注冊Header與Footer

• 分別添加Header與Footer的可重用標(biāo)示符

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稚虎、實現(xiàn)Header與Footer的數(shù)據(jù)源方法

• 實現(xiàn)CollectionView的viewForSupplementaryElementOfKind：代理方法侧蘸，并設(shè)置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讳癌、設(shè)置Header與Footer的大小

• 實現(xiàn)UICollectionViewDelegateFlowLayout協(xié)議中的referenceSizeForHeaderInSection以及referenceSizeForFooterInSection方法穿稳，設(shè)置Header與Footer的大小

// 設(shè)置Header的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
 CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
 return CGSizeMake(screenWidth, 69);
}
 
// 設(shè)置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