如何在同一页面通过切换按钮切换TableView与CollectionView并共享头部

核心思路就是：共享同一个头部视图，把TableView和CollectionView放在同一层级，通过切换它们的显示状态来实现视图切换，彻底避开嵌套ScrollView的坑。

具体步骤 #

1. 布局结构搭建 #

• 单独写个HeaderView类，把切换按钮和其他头部内容都封装在这里，复用性更强。
• 在主控制器的view里，先添加头部视图，再依次加入TableView和CollectionView。
• 让TableView和CollectionView的顶部都贴紧头部视图的底部，并且两者的大小、位置完全重合。初始状态先把其中一个藏起来（比如默认显示TableView，隐藏CollectionView）。

2. 切换逻辑实现 #

• 给头部的切换按钮绑定点击事件，点击时直接切换两个滚动视图的isHidden属性即可。
• 要是需要切换后保持之前的滚动位置，可以提前记录当前视图的contentOffset，切换后给另一个视图设置回去（这是可选需求）。

3. 纯代码布局示例（Swift） #

class MainViewController: UIViewController {
    // 初始化头部、TableView、CollectionView
    private let headerView = HeaderView()
    private let tableView = UITableView()
    private let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupSubviews()
        setupConstraints()
        bindSwitchAction()
        // 别忘了配置数据源、代理，注册cell这些常规操作
    }
    
    private func setupSubviews() {
        view.addSubview(headerView)
        view.addSubview(tableView)
        view.addSubview(collectionView)
        
        // 默认隐藏CollectionView
        collectionView.isHidden = true
        
        tableView.dataSource = self
        tableView.delegate = self
        collectionView.dataSource = self
        collectionView.delegate = self
    }
    
    private func setupConstraints() {
        // 关闭自动布局转换
        [headerView, tableView, collectionView].forEach { $0.translatesAutoresizingMaskIntoConstraints = false }
        
        NSLayoutConstraint.activate([
            // 头部视图：顶边贴安全区，左右撑满，高度固定（比如80）
            headerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            headerView.heightAnchor.constraint(equalToConstant: 80),
            
            // TableView：顶部贴头部底部，其他边贴父视图
            tableView.topAnchor.constraint(equalTo: headerView.bottomAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            
            // CollectionView：和TableView完全重合
            collectionView.topAnchor.constraint(equalTo: headerView.bottomAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
    
    private func bindSwitchAction() {
        headerView.switchButton.addTarget(self, action: #selector(toggleContentView), for: .touchUpInside)
    }
    
    @objc private func toggleContentView() {
        // 切换显示状态
        tableView.isHidden.toggle()
        collectionView.isHidden.toggle()
        
        // 可选：恢复滚动位置
        if tableView.isHidden {
            collectionView.setContentOffset(tableView.contentOffset, animated: false)
        } else {
            tableView.setContentOffset(collectionView.contentOffset, animated: false)
        }
    }
}

// 实现TableView和CollectionView的数据源、代理
extension MainViewController: UITableViewDataSource, UITableViewDelegate {
    // 这里写TableView的cell配置、行数等逻辑
}

extension MainViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    // 这里写CollectionView的cell配置、布局等逻辑
}

4. 方案优势 #

• 完全避开嵌套ScrollView的滚动冲突和高度计算问题，两个滚动视图都是独立的，滚动行为更稳定。
• 头部视图只创建一次，真正实现共享，不用重复维护两份头部代码。
• 切换逻辑简单直接，就是隐藏/显示视图，性能开销几乎可以忽略。
• 纯代码布局约束清晰，不会出现莫名其妙的高度错误。

可选优化 #

• 要是想要切换时的过渡动画，可以用UIView.animate修改alpha属性，比如从0到1过渡，比直接设置isHidden更顺滑。
• 可以把切换逻辑抽成一个单独的工具类或者扩展，让主控制器的代码更整洁。

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