iOS Storyboard中UICollectionView 添加变高header

Coding every day

tableView自带headerView的属性，用起来非常方便，但是想给collectionView添加header就比较麻烦了。
本文将讨论给collectionView 通过storyboard的方式添加header，并让header可以动态变高，真正做到可见即可得，高度可定制化的效果。

下面是具体步骤。

步骤1.

首先在storyboard中添加一个collectionView，添加一个collectionViewCell。设置UI，datasource，delegate等，先让正常的能显示出来

步骤2.

创建一个类，继承UICollectionReusableView，这个类就是headerView的类。

步骤3.

在storyboard中拖一个CollectionReusableView到collectionView上，将其类设定为步骤2中创建的类，再设置UI连线等和设置cell一样

CollectionReusableView.jpg

步骤4.

增加代理方法返回这个view，类似cell的重用

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
HeaderView *headerV = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:NSStringFromClass([HeaderView class]) forIndexPath:indexPath];
return headerV;
}

步骤5.设定headerView的高度

注意，headerView的高度通过layout去设定。 layout.headerReferenceSize = CGSizeMake(Screen_Width, 200);

如何动态对headerView变高?

在需要的时候重新对步骤5中的layout进行赋值即可，但是layout应通过Collection去获取，而不是重新创建。

UICollectionViewFlowLayout *layout = (id)self.collectionView.collectionViewLayout;
layout.headerReferenceSize = CGSizeMake(Screen_Width, 高度);
self.collectionView.collectionViewLayout = layout;

应用场景

比如headerView里面放了一个webview，需要让headerView和webView的内容等高，这样webview就让完全显示出来。这样的需求可以给headerView加一个代理，在webView的内容高度变化后回调到VC中，然后VC中再动态设置layout即可。（webView的内容高度可用动态KVO监听）