如何在Xcode 9|Swift 4中实现TableView滚动时联动隐藏/显示表头与导航栏

嘿，这需求我熟！刚好可以用Swift 4在Xcode 9里实现，下面是一步步的方案，能完美实现滚动时Header和导航栏同步隐藏/显示的全屏效果：

首先在viewDidLoad里做好基础设置，确保TableView是全屏布局，同时配置导航栏的样式：

import UIKit

class YourTableViewController: UITableViewController {
    // 记录Header初始高度和上次滚动偏移量
    private var headerOriginalHeight: CGFloat = 0.0
    private var lastScrollOffset: CGFloat = 0.0
    // 如果用AutoLayout的Header，这里加高度约束的IBOutlet
    // @IBOutlet weak var headerHeightConstraint: NSLayoutConstraint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 配置导航栏：隐藏阴影、设置透明背景，让它和TableView无缝衔接
        navigationController?.navigationBar.isTranslucent = false
        navigationController?.navigationBar.shadowImage = UIImage()
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        
        // 让TableView全屏显示，忽略安全区的顶部偏移
        tableView.contentInsetAdjustmentBehavior = .never
        
        // 自定义TableView Header（这里以代码创建为例，也可以用xib）
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 220))
        headerView.backgroundColor = .lightGray
        // 可以在这里加搜索框、标题等内容
        let searchBar = UISearchBar(frame: CGRect(x: 20, y: 80, width: view.bounds.width - 40, height: 44))
        headerView.addSubview(searchBar)
        tableView.tableHeaderView = headerView
        
        // 记录Header的初始高度
        headerOriginalHeight = headerView.frame.height
        
        // 设置TableView代理
        tableView.delegate = self
    }
}

通过实现UIScrollViewDelegate的方法，监听滚动方向和偏移量，同步调整Header高度和导航栏的显示状态：

extension YourTableViewController {
    override func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        // 记录拖动开始时的偏移量，用于判断滚动方向
        lastScrollOffset = scrollView.contentOffset.y
    }
    
    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let currentOffset = scrollView.contentOffset.y
        let scrollDelta = currentOffset - lastScrollOffset
        
        // 1. 计算Header的新高度：最小为0，最大为初始高度
        var newHeaderHeight = headerOriginalHeight + scrollDelta
        newHeaderHeight = max(0, min(newHeaderHeight, headerOriginalHeight))
        
        // 更新Header的高度（如果是Frame布局）
        if let headerView = tableView.tableHeaderView {
            var headerFrame = headerView.frame
            headerFrame.size.height = newHeaderHeight
            headerView.frame = headerFrame
            tableView.tableHeaderView = headerView // 必须重新赋值触发TableView布局更新
        }
        
        // 如果是AutoLayout布局，替换成下面的代码：
        // headerHeightConstraint.constant = newHeaderHeight
        // view.layoutIfNeeded()
        
        // 2. 同步控制导航栏的显示/隐藏
        let navBarHeight = navigationController?.navigationBar.frame.height ?? 0
        let shouldHideNavBar = currentOffset > lastScrollOffset && newHeaderHeight <= navBarHeight
        let shouldShowNavBar = currentOffset < lastScrollOffset && newHeaderHeight < headerOriginalHeight
        
        if shouldHideNavBar {
            navigationController?.setNavigationBarHidden(true, animated: true)
        } else if shouldShowNavBar {
            navigationController?.setNavigationBarHidden(false, animated: true)
        }
        
        // 更新上次滚动偏移量
        lastScrollOffset = currentOffset
    }
}

• 全屏布局验证：确保TableView的top约束是直接和view.top对齐，而不是safeAreaLayoutGuide.top，这样才能真正实现全屏效果。
• Header布局方式：如果用XIB创建Header，记得给高度约束加IBOutlet，然后在滚动时修改约束的constant值，比直接修改Frame更稳定。
• 动画流畅度：导航栏的setNavigationBarHidden(_:animated:)自带动画，和Header的高度变化同步后，过渡会很自然。
• 搜索功能适配：把搜索框放在Header里的话，滚动时会跟着Header一起隐藏；如果希望搜索框始终可用，可以考虑将其集成到导航栏的titleView中，不过这样会牺牲一点全屏阅读的空间。

内容的提问来源于stack exchange，提问作者Oséias Ribeiro