如何实现类似Reddit的UICollectionViewController动态头部滚动隐藏/显示

嘿，这个需求我之前做过类似的，刚好适配你这种「水平分页CollectionView + 每个Cell内嵌可滚动TableView」的布局，给你一套完整的实现方案，亲测流畅：

因为每个Cell里的TableView都是独立滚动的，所以我们需要统一监听所有TableView的滚动事件，通过判断滚动方向来调整头部视图的位置；同时还要处理CollectionView分页切换时的状态同步，避免切换页面后触发错误的滚动判断。

1. 初始化头部视图与状态变量 #

首先在你的UICollectionViewController里定义需要的属性：

import UIKit

class PagedCollectionVC: UICollectionViewController {
    // 自定义头部视图（替换成你自己的头部类）
    private let headerView = CustomHeaderView()
    // 头部视图原始的Y轴位置
    private var headerOriginalY: CGFloat = 0
    // 记录上一次滚动的偏移量，用于判断滚动方向
    private var lastScrollOffsetY: CGFloat = 0
    // 头部视图高度（根据你的需求调整）
    private let headerHeight: CGFloat = 60
    // 滚动触发阈值（避免轻微滚动就触发显示/隐藏，提升体验）
    private let scrollThreshold: CGFloat = 10
    // 标记头部当前状态，避免重复执行动画
    private var isHeaderHidden = false

2. 布局头部视图 #

在viewDidLoad里完成头部视图的布局，并设置CollectionView的内边距避免内容被头部遮挡：

override func viewDidLoad() {
    super.viewDidLoad()
    setupHeaderView()
    // 配置CollectionView分页、cell大小等（你的原有代码）
    collectionView.isPagingEnabled = true
    collectionView.register(TableViewCell.self, forCellWithReuseIdentifier: "TableViewCell")
}

private func setupHeaderView() {
    view.addSubview(headerView)
    headerView.translatesAutoresizingMaskIntoConstraints = false
    // 用AutoLayout固定头部位置
    NSLayoutConstraint.activate([
        headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        headerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        headerView.heightAnchor.constraint(equalToConstant: headerHeight)
    ])
    // 保存头部原始位置
    headerOriginalY = headerView.frame.origin.y
    // 设置CollectionView内边距，让内容从头部下方开始
    collectionView.contentInset = UIEdgeInsets(top: headerHeight, left: 0, bottom: 0, right: 0)
}

3. 绑定TableView的滚动监听 #

在CollectionView的cellForItemAt方法里，把每个Cell内TableView的delegate设置为当前控制器，这样就能统一处理滚动事件：

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TableViewCell", for: indexPath) as! TableViewCell
    // 设置TableView代理为当前控制器
    cell.tableView.delegate = self
    // 如果是当前显示的Cell，同步它的滚动偏移量
    if indexPath.item == collectionView.indexPathsForVisibleItems.first?.item {
        lastScrollOffsetY = cell.tableView.contentOffset.y
    }
    // 配置TableView数据源（你的原有代码）
    cell.tableView.dataSource = self
    return cell
}

4. 处理滚动事件，控制头部显示/隐藏 #

实现UITableViewDelegate的scrollViewDidScroll方法，判断滚动方向并执行动画：

extension PagedCollectionVC: UITableViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let currentOffset = scrollView.contentOffset.y
        let scrollDiff = currentOffset - lastScrollOffsetY
        
        // 只有滚动超过阈值才触发动作，避免抖动
        guard abs(scrollDiff) > scrollThreshold else {
            lastScrollOffsetY = currentOffset
            return
        }
        
        if scrollDiff > 0 && !isHeaderHidden {
            // 向下滚动：隐藏头部
            UIView.animate(withDuration: 0.25, options: .curveEaseInOut) {
                self.headerView.frame.origin.y = self.headerOriginalY - self.headerHeight
                // 同步调整CollectionView内边距，让内容跟着上移
                self.collectionView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            }
            isHeaderHidden = true
        } else if scrollDiff < 0 && isHeaderHidden {
            // 向上滚动：显示头部
            UIView.animate(withDuration: 0.25, options: .curveEaseInOut) {
                self.headerView.frame.origin.y = self.headerOriginalY
                self.collectionView.contentInset = UIEdgeInsets(top: self.headerHeight, left: 0, bottom: 0, right: 0)
            }
            isHeaderHidden = false
        }
        
        lastScrollOffsetY = currentOffset
    }
}

5. 处理CollectionView分页切换的状态同步 #

当CollectionView切换页面时，需要更新当前活跃的TableView的滚动偏移量，避免切换后触发错误的显示/隐藏：

extension PagedCollectionVC {
    override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        guard scrollView is UICollectionView else { return }
        // 获取当前显示的Cell
        if let visibleCell = collectionView.visibleCells.first as? TableViewCell {
            lastScrollOffsetY = visibleCell.tableView.contentOffset.y
            // 如果当前TableView已经滚动到顶部，强制显示头部
            if visibleCell.tableView.contentOffset.y <= 0 && isHeaderHidden {
                UIView.animate(withDuration: 0.25) {
                    self.headerView.frame.origin.y = self.headerOriginalY
                    self.collectionView.contentInset = UIEdgeInsets(top: self.headerHeight, left: 0, bottom: 0, right: 0)
                }
                isHeaderHidden = false
            }
        }
    }
}

• 如果你习惯用约束而非直接修改frame，可以把头部的top约束存为变量，通过修改constraint.constant来控制显示/隐藏（比如隐藏时设为-headerHeight，显示时设为0），适配AutoLayout更友好。
• 如果TableView有下拉刷新控件，记得在刷新状态下禁用头部的隐藏逻辑，避免冲突。
• 可以给头部视图添加阴影效果，隐藏/显示时视觉过渡更自然。

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