UICollectionView 的标题视图在滚动时不断重复 - 如何创建固定（非粘性）的单个集合视图标题？

Posted 2023-02-23

【中文标题】UICollectionView 的标题视图在滚动时不断重复 - 如何创建固定（非粘性）的单个集合视图标题？

【英文标题】：Header view of UICollectionView keeps duplicating on scroll - How to create fixed (non-sticky), single collection view header?

【发布时间】：2019-06-18 10:37:54

【问题描述】：

我想实现如下视图层次结构，以便整个视图可以滚动：

UIScrollView

图像视图

集合视图

但是这里很多人都说最好使用集合视图附带的标题。我已经这样做了，但现在我遇到了一个新问题：当我滚动集合视图时，我对 viewForSupplementaryElementOfKind 函数中的标题单元格所做的任何配置都是重复的（例如：如果我以编程方式在 viewForSupplementaryElementOfKind 函数中创建一个新视图，此视图将在我滚动时继续创建）

我有点明白这种情况正在发生，因为我正在使用 dequeueReusableSupplementaryView 将标头出列。但是我已经尝试在 Apple 文档上进行搜索，并且没有其他代码可以用来实例化标题视图而不使其可重用。

有什么方法可以在不使用 UICollectionView 的情况下创建如上所述的视图控制器？

我尝试将节数设置为 1，希望它只能重复使用一次，但它不起作用。

编辑：还尝试使用 UICollectionViewDelegateFlowLayouta 设置标题大小并使用 UICollectionView 而不是 UIViewController 和 UICollectionViewDataSource 等。

func collectionView(_ collectionView: UICollectionView,
                                 viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView 

        switch kind 
        case UICollectionView.elementKindSectionHeader:
            guard
                let headerView = collectionView.dequeueReusableSupplementaryView(
                    ofKind: kind,
                    withReuseIdentifier: "DiscoverHeader",
                    for: indexPath) as? DiscoverHeader
                else 
                    fatalError("Invalid view type")
            

            // Rotating arrow image
            headerView.arrowImg.transform = headerView.arrowImg.transform.rotated(by: CGFloat.pi/0.67)

            return headerView
        default:
            assert(false, "Invalid element type")
        

【问题讨论】：

headerView的高度你给了吗？

【参考方案1】：

为什么不在UIScrollView 中使用UIImageView 和UICollectionView？

您绝对可以创建一个UIScrollView 并在其中添加一个UIImageView 和一个UICollectionView。

但这不会按预期工作。这是因为您将scrollView(UICollectionView) 嵌入到另一个scrollView 中。 Scrolling 和collectionView 垂直会阻碍外部scrollView 的scrolling。

解决方案：

尝试使用UICollectionViewDelegateFlowLayout's 方法给出header view 的height，

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize 
    return CGSize(width: collectionView.bounds.width, height: 100.0) //give the height as per your requirement...

另外，将imageView 的contentMode 设置为Aspect Fit / Aspect Fill。

【讨论】：

嗨对不起，我想我应该在我的帖子中包含它，我已经使用 UICollectionViewDelegateFlowLayout 以编程方式设置标题大小，并将 imageView 设置为 Aspect Fill :(

请添加您所获得的屏幕截图作为输出。