UITableView结合Segment Control的左右切换动画实现问题

嘿，我完全懂你要的这种效果——顶部带Segment的Header稳稳不动，下面的TableView像翻页似的左右滑切，还不能让Header跟着凑热闹对吧？之前试了4种方案都踩坑，估计要么是Header跟着动了，要么动画衔接生硬，或者数据加载和动画不同步？我给你分享一个亲测可行的实现思路，完美解决Header不参与动画的问题：

首先要打破原来把Header放在TableView里的结构，把布局拆成两部分：

• 固定的HeaderView：把带Segment Control的Header单独做成一个UIView，直接添加到ViewController的根view上，设置top/leading/trailing约束，高度固定死。这样它就完全脱离TableView的层级，不管下面怎么动，Header都纹丝不动。
• 滑动容器View：在HeaderView的下方添加一个UIView作为容器，设置top约束等于HeaderView的bottom，leading/trailing/bottom和根view对齐。这个容器就是专门用来承载两个TableView的“舞台”。

1. 提前初始化并布局两个TableView #

针对Segment的每个选项，提前创建对应的UITableView实例（比如tableViewA和tableViewB）：

• 把两个TableView都添加到滑动容器里，设置它们的translatesAutoresizingMaskIntoConstraints = false（或者直接用frame布局，动画时更直观）。
• 初始状态：将当前要显示的TableView（比如tableViewA）的frame设为容器的bounds；另一个TableView（tableViewB）的frame设为容器bounds向右偏移一个容器宽度的位置（也就是CGRect(x: containerView.bounds.width, y: 0, width: containerView.bounds.width, height: containerView.bounds.height)）。
• 提前给每个TableView绑定好数据源、代理，加载好对应的数据，避免动画过程中才加载导致卡顿。

2. Segment切换的动画逻辑 #

监听Segment的valueChanged事件，在回调里执行以下操作：

@objc func segmentValueChanged(_ sender: UISegmentedControl) {
    // 确定当前显示的TableView和目标TableView
    let currentTableView = sender.selectedSegmentIndex == 0 ? tableViewB : tableViewA
    let targetTableView = sender.selectedSegmentIndex == 0 ? tableViewA : tableViewB
    
    // 执行滑动动画
    UIView.animate(withDuration: 0.3, options: .curveEaseInOut, animations: {
        // 当前TableView向左移出容器
        currentTableView.frame = CGRect(x: -self.containerView.bounds.width, y: 0, width: self.containerView.bounds.width, height: self.containerView.bounds.height)
        // 目标TableView从右侧移入容器
        targetTableView.frame = self.containerView.bounds
    }) { _ in
        // 动画结束后，把当前TableView重置到右侧，为下一次切换做准备
        currentTableView.frame = CGRect(x: self.containerView.bounds.width, y: 0, width: self.containerView.bounds.width, height: self.containerView.bounds.height)
    }
}

3. 处理TableView内部的Section Header #

如果你每个TableView内部还有自己的Section Header，完全不用担心——它们属于各自的TableView层级，会跟着TableView一起参与动画，而外层带Segment的Header始终固定在顶部，完全符合你的需求。

• 如果你之前直接给整个UITableView做动画，那Header作为TableView的一部分肯定会跟着动，拆分布局是解决这个问题的核心。
• 要是之前用了UIPageViewController或者TabBarController，可能会遇到手势冲突、布局约束优先级的问题，这种自定义容器的方式更灵活，完全可控。
• 动态创建TableView再添加的话，容易出现布局跳动，提前初始化并设置好初始frame就能避免。
• 动画过程中别做网络请求或大量计算，建议提前预加载对应Segment的数据，或者用异步加载+占位符，保证动画流畅。

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