iOS中UICollectionView HeaderView滚动固定的实现方法咨询

当然可以直接用UICollectionView实现滚动时Header固定的效果，完全不需要单独创建固定头部视图！根据你的iOS版本，有两种常用方案：

方案一：使用UICollectionViewCompositionalLayout（iOS 13+ 推荐） #

这是苹果在iOS13推出的新布局API，配置固定Header非常直观，代码也更简洁。如果你项目支持iOS13及以上，优先选这个方案，只需要在创建section的header时，设置pinToVisibleBounds为true即可。

示例代码：

// 1. 定义Item布局
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(80))
let item = NSCollectionLayoutItem(layoutSize: itemSize)

// 2. 定义Group布局
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(80))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

// 3. 定义Section布局
let section = NSCollectionLayoutSection(group: group)

// 4. 创建并配置Header
let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(50))
let header = NSCollectionLayoutBoundarySupplementaryItem(
    layoutSize: headerSize,
    elementKind: UICollectionView.elementKindSectionHeader,
    alignment: .top
)
// 关键设置：让Header固定在可视区域顶部
header.pinToVisibleBounds = true
section.boundarySupplementaryItems = [header]

// 5. 应用布局到CollectionView
let layout = UICollectionViewCompositionalLayout(section: section)
collectionView.collectionViewLayout = layout

方案二：自定义UICollectionViewFlowLayout（兼容iOS 13以下） #

如果需要支持更低版本系统，你可以自定义FlowLayout，通过重写布局相关方法来调整Header的位置，实现固定效果。

示例代码：

class StickyHeaderFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let originalAttributes = super.layoutAttributesForElements(in: rect) else { return nil }
        // 复制原属性避免修改系统默认布局
        let updatedAttributes = originalAttributes.map { $0.copy() as! UICollectionViewLayoutAttributes }
        
        guard let collectionView = collectionView else { return updatedAttributes }
        let contentOffsetY = collectionView.contentOffset.y
        let contentInsetTop = collectionView.contentInset.top
        
        for attribute in updatedAttributes {
            // 只处理SectionHeader
            guard attribute.representedElementKind == UICollectionView.elementKindSectionHeader else { continue }
            
            var headerFrame = attribute.frame
            // 计算Header应该停留的位置：要么跟着内容滚动，要么固定在顶部
            headerFrame.origin.y = max(contentOffsetY + contentInsetTop, headerFrame.minY)
            attribute.frame = headerFrame
            // 设置zIndex确保Header在内容上方
            attribute.zIndex = 10
        }
        
        return updatedAttributes
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        // 每次滚动时都重新计算布局，保证Header位置正确
        return true
    }
}

使用时，只需要把你的CollectionView的布局换成这个自定义布局即可：

let layout = StickyHeaderFlowLayout()
layout.scrollDirection = .vertical
layout.headerReferenceSize = CGSize(width: collectionView.bounds.width, height: 50)
collectionView.collectionViewLayout = layout

补充说明 #

• 两种方案都不需要额外创建独立的头部视图，完全基于UICollectionView自身的Header实现固定效果
• 如果你已经在用FlowLayout，方案二可以无缝替换；iOS13及以上版本更推荐方案一，代码维护性更好

内容的提问来源于stack exchange，提问作者czane