谈谈UICollectionView添加头视图的方法

最新推荐文章于 2025-03-18 12:39:04 发布

xiyouiOS

最新推荐文章于 2025-03-18 12:39:04 发布

阅读量2w

点赞数 2

分类专栏： iOS

本文链接：https://blog.youkuaiyun.com/xiyouiOS/article/details/50191101

版权

iOS 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何在UICollectionView中添加全局头视图，类似Share主页面tableView效果。实现过程涉及设置UICollectionDelegateFlowLayout, UICollectionViewDelegate, UICollectionViewDataSource代理，注册头视图，以及通过代理方法确定头视图大小。注意头视图注册、大小设置和identifier的一致性，否则可能导致程序崩溃。最终实现每个section只有一个头视图的效果。" 109270575,6260857,小型AR工作空间并行跟踪与建图技术,"['增强现实(AR)', 'SLAM算法', '并行计算', '图像处理', '3D地图构建']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天在写项目的时候用到了UICollectionView，在做的时候，需要给整体的CollectionView上面放一个大的头视图，就类似Share中主页面的tableView效果类似。但是当我真正使用的时候发现，这个头视图和tableView里面的头视图，有很大的区别。

开始的效果

最后的效果

其实这种效果实现起来也不难，在使用UICollectionView的时候，我们需要设置三个代理，分别是UICollectionDelegateFlowLayout，UICollectionViewDelegate，UICollectionViewDataSource。

在使用UICollectionView的时候，一开始我们都要定义一个FlowLayout，也就是下面这段代码

UICollectionViewFlowLayout *flowLayout  = [[UICollectionViewFlowLayout alloc] init];

如果你要设置头视图，在flowLayout中要设置一个头视图的大小参数，设置方法如下

flowLayout.headerReferenceSize = CGSizeMake(0, Height / 4);

CGSizeMake中是你头视图的大小，当然，这块参数对我们今天要讲的这个效果影响不大，具体为啥，后面会说。

在设置头视图的时候，记住，这块也是我感觉有点奇葩的地方，就是使用头视图的时候，必须先注册一个！！对，和使用UICollectionViewCell的时候情况一样，都需要注册，如果你不注册，会导致使用下面要说的方法的时候，使程序崩溃。头视图的注册方法如下：

//注册头视图
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"UICollectionViewHeader"];

这块注册的Identifier在下面的方法实现中是会使用到的，这里跟UICollectionViewCell是类似的，其实，也可以说是一样的。

现在，我们可以写UICollectionViewDataSource的头视图设置方法了，具体如下：

//创建头视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
           viewForSupplementaryElementOfKind:(NSString *)kind
                                 atIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
                                                                            withReuseIdentifier:@"UICollectionViewHeader"
                                                                                   forIndexPath:indexPath];
    headView.backgroundColor = [UIColor redColor];
    
    return headView;
}

做完上面这些步骤之后，你就可以启动程序看看效果了。启动后你会发现，你创建的头视图是这样的

你会发现，头视图加的有点奇怪。其实，这种方法添加的是每个section的头视图，也就是每一行都会有对应的头视图和尾视图，我们添加的，就是这些section的头视图。那么，我们怎么实现开头说的那种效果呢？其实，这里有一个小小的技巧，在UICollectionViewDelegateFlowLayout中有一个方法是用来设置头视图的大小的，那么我们就可以利用这个方法，来实现我们需要的效果。具体实现如下：

// 设置section头视图的参考大小，与tableheaderview类似
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
referenceSizeForHeaderInSection:(NSInteger)section {
    
    if (section == 0) {
        return CGSizeMake(self.view.frame.size.width, Height / 4);
    }
    else {
        return CGSizeMake(0, 0);
    }
}

可以看到，我们在section == 0的时候加上其的大小，而在其他情况下，将其大小设置成0。也就是说，只有第一行的头视图有大小，其他行的头视图是没有大小的，也就是大小为0。这样，运行出来的效果就是开头的那样：

在一开始我们说过，在flowLayout中要设置头视图的大小，但是在这里没有什么用，因为我们写了上面那个代理方法，在代理方法中对头视图的大小进行了设置，所以，在flowLayout中也就不必再重复设置了。但是，一旦你没有写上面的这个代理方法，那么你就必须在flowLayout中设置头视图的参数。这样，头视图才能设置出来。这样，我们就能实现一个类似tableView添加头视图的效果了。

那么，在整个过程中，我们需要注意这么几点：

1.如果你没有写设置头视图大小的代理方法，那么在一开始设置flowLayout的时候你就需要设置头视图的大小参数。

2.在设置头视图的时候，切记一定要在前面对其进行注册，否则程序会崩溃

3.需要注意，你在刚开始注册的identifier和下面定义头视图的时候初始化使用的identifier要一致，不能使用不同的identifier

4.你需要看你的具体需求来写设置头视图大小的方法

这种设置头视图的方法是自己无意中看到那个设置section头视图大小的代理方法的时候想到的，如果有更好的实现方法，欢迎交流。

--by糖糖