F#实现UICollectionView固定顶部Header的方法

这个需求我做项目时也碰到过，给你分享两个最实用的解决办法：

方法一：用FlowLayout自带属性（最简单） #

如果你用的是UICollectionViewFlowLayout，那一行代码就能搞定！FlowLayout本身提供了sectionHeadersPinToVisibleBounds属性，开启后section header会自动固定在collectionView可视区域顶部，不会跟着内容滚动。

在你的UICollectionViewController的viewDidLoad里加这段代码：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 确认当前布局是FlowLayout
    if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        // 开启header固定功能
        flowLayout.sectionHeadersPinToVisibleBounds = true
    }
}

这个方法的优势是零成本，系统已经帮你处理了滚动边界、contentInset适配等所有细节，不用自己写复杂逻辑。

方法二：自定义UICollectionViewLayout（适合自定义布局场景） #

如果你的collectionView用了自定义布局，就得手动控制header位置了。核心思路是在布局更新时，动态调整header的frame，让它始终贴合collectionView可视顶部，同时设置更高的zIndex避免被cell挡住。

下面是自定义布局的示例代码：

class StickyHeaderLayout: UICollectionViewFlowLayout {
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        // 复制系统计算的布局属性，避免修改原数据
        let attributes = super.layoutAttributesForElements(in: rect)?.map { $0.copy() as! UICollectionViewLayoutAttributes }
        
        guard let collectionView = collectionView else { return attributes }
        
        let contentOffsetY = collectionView.contentOffset.y
        let topInset = collectionView.contentInset.top
        
        attributes?.forEach { attr in
            // 只处理section header
            if attr.representedElementKind == UICollectionView.elementKindSectionHeader {
                var frame = attr.frame
                
                // 让header顶部始终和collectionView可视顶部对齐
                frame.origin.y = max(contentOffsetY + topInset, frame.origin.y)
                
                // 处理滚动到底部的情况：header不能超出当前section底部
                let section = attr.indexPath.section
                let numberOfItems = collectionView.numberOfItems(inSection: section)
                if numberOfItems > 0 {
                    let lastItemIndexPath = IndexPath(item: numberOfItems - 1, section: section)
                    if let lastItemAttr = layoutAttributesForItem(at: lastItemIndexPath) {
                        let sectionBottomY = lastItemAttr.frame.maxY
                        frame.origin.y = min(frame.origin.y, sectionBottomY - frame.height)
                    }
                }
                
                attr.frame = frame
                // 设置zIndex确保header在所有cell上方
                attr.zIndex = 100
            }
        }
        
        return attributes
    }
    
    // 告诉系统：滚动时需要重新计算布局
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

然后在ViewController里替换collectionView的布局：

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.collectionViewLayout = StickyHeaderLayout()
}

额外注意点 #

• 如果collectionView设置了contentInset，一定要把topInset算进去，不然header会被导航栏/状态栏挡住。
• 多section场景下，每个section的header会依次固定在顶部，直到下一个section的header把它顶走。
• 确保你的header是通过dequeueReusableSupplementaryView获取的section header，要是直接加到collectionView上的子视图，那直接把它加到ViewController的view上就行，不用跟collectionView绑定。

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