如何在TableView滚动时隐藏其上方的CollectionView？

核心思路 #

通过监听TableView的滚动事件，根据滚动偏移量动态调整外部CollectionView的位置，实现上滑隐藏、下拉恢复的平滑过渡效果。推荐使用Auto Layout约束+动态修改约束值的方案，兼容性更强，适配屏幕旋转、自适应布局更省心。

具体实现步骤 #

1. 基础布局配置 #

将CollectionView和TableView置于同一个父View中，通过Auto Layout设置：

• CollectionView的top、leading、trailing约束绑定父View，高度设为固定值（或自适应）。
• TableView的top约束绑定CollectionView的bottom，leading、trailing、bottom绑定父View。
• 给CollectionView的top约束创建一个IBOutlet引用，命名为collectionViewTopConstraint。

2. 监听滚动事件 #

遵守UIScrollViewDelegate，给TableView设置delegate，并实现scrollViewDidScroll:方法：

import UIKit

class ViewController: UIViewController, UITableViewDelegate {
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var collectionViewTopConstraint: NSLayoutConstraint!
    
    private var lastContentOffset: CGFloat = 0
    // 替换为你的CollectionView实际高度
    private let collectionViewHeight: CGFloat = 120

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        // 初始化上次滚动偏移量为TableView初始值
        lastContentOffset = tableView.contentOffset.y
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // 若TableView内容不足以滚动，直接返回
        guard scrollView.contentSize.height > scrollView.bounds.height else {
            return
        }
        
        let currentOffset = scrollView.contentOffset.y
        let offsetDiff = currentOffset - lastContentOffset
        
        // 计算约束的新值，限制在[-collectionViewHeight, 0]区间内
        var newConstant = collectionViewTopConstraint.constant + offsetDiff
        newConstant = max(-collectionViewHeight, min(newConstant, 0))
        
        // 更新约束，Auto Layout会自动同步CollectionView和TableView的位置
        collectionViewTopConstraint.constant = newConstant
        
        lastContentOffset = currentOffset
    }
}

关键细节优化 #

• 滚动边界控制：通过max(-collectionViewHeight, min(newConstant, 0))限制偏移范围，避免CollectionView过度偏移导致的布局异常。
• 无滚动场景处理：先判断TableView内容是否足够滚动，防止内容不足时误触发偏移逻辑。
• 流畅度保障：直接修改约束值属于实时布局更新，不需要额外添加动画，避免滚动时出现卡顿。
• 屏幕旋转适配：Auto Layout会自动处理旋转后的布局调整，无需额外编写适配代码。

替代方案（Frame/Transform方式） #

如果项目未使用Auto Layout，也可以直接修改控件的frame或transform属性：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard scrollView.contentSize.height > scrollView.bounds.height else { return }
    
    let currentOffset = scrollView.contentOffset.y
    let offsetDiff = currentOffset - lastContentOffset
    
    // 修改CollectionView的frame
    var newCollectionY = collectionView.frame.origin.y + offsetDiff
    newCollectionY = max(-collectionViewHeight, min(newCollectionY, 0))
    collectionView.frame = CGRect(x: collectionView.frame.origin.x,
                                 y: newCollectionY,
                                 width: collectionView.frame.width,
                                 height: collectionView.frame.height)
    
    // 同步调整TableView的位置
    tableView.frame = CGRect(x: tableView.frame.origin.x,
                            y: newCollectionY + collectionViewHeight,
                            width: tableView.frame.width,
                            height: tableView.frame.height)
    
    lastContentOffset = currentOffset
}

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