Swift实现tableHeaderView随页面滚动隐藏/显示效果

嘿，这个需求我之前做过类似的，核心就是通过监听TableView的滚动状态，配合简单的动画来实现按钮的隐藏和显示，完全符合你要的Facebook搜索栏那种效果。下面给你一步步拆解实现：

我们需要借助UIScrollViewDelegate的滚动回调方法，记录每次滚动的偏移量，对比上一次的偏移量判断滚动方向，再根据方向和滚动距离触发按钮的显示/隐藏动画，同时加入阈值避免轻微抖动误触发。

1. 先设置好TableHeaderView和按钮 #

首先在viewDidLoad里创建并配置你的headerView和按钮，确保按钮是headerView的子视图：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 配置TableView代理
    tableView.delegate = self
    tableView.dataSource = self
    
    // 创建headerView
    let headerViewHeight: CGFloat = 60
    let headerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: headerViewHeight))
    headerView.backgroundColor = .white
    
    // 创建按钮
    let actionButton = UIButton(type: .system)
    actionButton.setTitle("你的操作按钮", for: .normal)
    actionButton.backgroundColor = .systemBlue
    actionButton.setTitleColor(.white, for: .normal)
    actionButton.layer.cornerRadius = 8
    
    // 添加按钮到headerView，用AutoLayout适配不同屏幕
    headerView.addSubview(actionButton)
    actionButton.translatesAutoresizingMaskIntoConstraints = false
    let buttonTopConstraint = actionButton.topAnchor.constraint(equalTo: headerView.topAnchor, constant: 10)
    NSLayoutConstraint.activate([
        actionButton.leadingAnchor.constraint(equalTo: headerView.leadingAnchor, constant: 16),
        actionButton.trailingAnchor.constraint(equalTo: headerView.trailingAnchor, constant: -16),
        buttonTopConstraint,
        actionButton.heightAnchor.constraint(equalToConstant: 40)
    ])
    
    // 保存按钮的原始top约束值、绑定IBOutlet（也可以直接用变量存储）
    self.buttonTopConstraint = buttonTopConstraint
    originalButtonTopConstant = 10
    
    // 设置tableHeaderView
    tableView.tableHeaderView = headerView
}

2. 定义状态变量 #

在ViewController里添加几个变量，用来记录滚动状态和按钮的原始位置：

// 记录上一次的滚动偏移量
private var lastContentOffset: CGFloat = 0
// 控制动画是否正在执行，避免重复触发导致位置错乱
private var isAnimating = false
// 按钮的原始top约束值
private var originalButtonTopConstant: CGFloat = 0
// 按钮的top约束IBOutlet
@IBOutlet weak var buttonTopConstraint: NSLayoutConstraint!

3. 实现滚动监听核心逻辑 #

遵守UIScrollViewDelegate协议，实现scrollViewDidScroll(_:)方法：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard let headerView = tableView.tableHeaderView else { return }
    
    let currentOffset = scrollView.contentOffset.y
    let scrollDiff = currentOffset - lastContentOffset
    
    // 判断滚动方向
    let isScrollingDown = scrollDiff > 0
    let isScrollingUp = scrollDiff < 0
    
    // 定义触发动画的阈值，避免轻微抖动就触发（比如设置10pt）
    let triggerThreshold: CGFloat = 10
    
    // 向下滚动：隐藏按钮（让按钮完全移出headerView）
    if isScrollingDown && !isAnimating {
        let targetConstant = -actionButton.frame.height - 8 // 8是额外间距，避免残留
        if buttonTopConstraint.constant > targetConstant {
            isAnimating = true
            UIView.animate(withDuration: 0.3, animations: {
                self.buttonTopConstraint.constant = targetConstant
                self.view.layoutIfNeeded()
            }) { [weak self] _ in
                self?.isAnimating = false
            }
        }
    }
    // 向上滚动且超过阈值：显示按钮（恢复到原始位置）
    else if isScrollingUp && !isAnimating {
        if abs(scrollDiff) > triggerThreshold && buttonTopConstraint.constant < originalButtonTopConstant {
            isAnimating = true
            UIView.animate(withDuration: 0.3, animations: {
                self.buttonTopConstraint.constant = self.originalButtonTopConstant
                self.view.layoutIfNeeded()
            }) { [weak self] _ in
                self?.isAnimating = false
            }
        }
    }
    
    // 更新上一次的偏移量
    lastContentOffset = currentOffset
}

• 阈值设置：加入triggerThreshold是为了贴合你“轻微向上滚动才显示”的需求，避免用户手指轻微抖动就触发动画，提升交互流畅度。
• 动画锁isAnimating：防止滚动过程中多次触发动画，导致按钮位置出现错乱或重复动画的问题。
• AutoLayout适配：用约束而非frame控制位置，能更好适配不同屏幕尺寸，避免布局错位。

• 如果你的TableView有下拉刷新控件，需要在计算滚动偏移量时排除下拉刷新的影响，比如判断scrollView.isDragging或scrollView.isDecelerating来调整逻辑。
• 可以根据需求调整动画时长，0.3秒是比较自然的速度，你也可以改成0.25或0.35秒来适配产品风格。

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