UITableViewController分段切换显示TableCell与内嵌CollectionView方案咨询

嘿，我完全懂你不想大改控制器的想法——毕竟重构代码不仅费时间，还容易引入新问题😎。下面就给你详细说说两种可行的替代方案，重点拆解你提到的「在UITableViewCell里嵌入动态布局UICollectionView」的具体实现：

核心方案：在UITableViewCell中嵌入UICollectionView #

这应该是最贴合你需求的方式，既能保留UITableViewController的结构，又能实现网格滚动效果。

1. 自定义带UICollectionView的TableViewCell #

先创建一个专门用来承载UICollectionView的cell，比如命名为CollectionContainerTableViewCell：

class CollectionContainerTableViewCell: UITableViewCell {
    let collectionView: UICollectionView
    
    // 初始化时配置collectionView
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        // 自定义布局（这里用流式布局做示例，你也可以换成自定义布局）
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.itemSize = CGSize(width: 100, height: 100)
        layout.minimumInteritemSpacing = 8
        layout.minimumLineSpacing = 8
        
        collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        // 配置collectionView的基础属性
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.backgroundColor = .clear
        collectionView.register(YourCustomCollectionCell.self, forCellWithReuseIdentifier: "CustomCollectionCell")
        
        contentView.addSubview(collectionView)
        
        // 设置自动布局约束，让collectionView填满cell的contentView
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: contentView.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 让TableViewCell高度自适应CollectionView内容 #

要让tableView的cell高度刚好匹配collectionView的内容高度，有两种常用方式：

• 方式一：监听CollectionView的contentSize变化
  在你的UITableViewController里，给collectionView添加回调来触发cell高度更新：

// 在CollectionContainerTableViewCell中添加闭包回调
var onContentSizeChange: (() -> Void)?

override func layoutSubviews() {
    super.layoutSubviews()
    onContentSizeChange?()
}

// 在UITableViewController的cellForRowAt里设置回调
if let cell = tableView.dequeueReusableCell(withIdentifier: "CollectionContainerCell") as? CollectionContainerTableViewCell {
    cell.collectionView.delegate = self
    cell.collectionView.dataSource = self
    cell.onContentSizeChange = { [weak self] in
        self?.tableView.performBatchUpdates(nil)
    }
    return cell
}

然后在heightForRowAt里返回collectionView的内容高度：

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if selectedSegmentIndex == 1 { // 第二个分段
        return collectionView.contentSize.height + contentView.layoutMargins.top + contentView.layoutMargins.bottom
    } else {
        return UITableView.automaticDimension // 普通cell的高度
    }
}

• 方式二：使用自动布局动态计算高度
  确保collectionView的约束完全贴合cell的contentView，然后在UITableViewController里设置：

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 400 // 设置一个预估高度

这种方式依赖AutoLayout自动计算，需要确保collectionView的布局能正确算出contentSize。

3. 处理分段切换逻辑 #

在UISegmentedControl的valueChanged事件里，切换数据源并刷新tableView：

var selectedSegmentIndex = 0

@IBAction func segmentChanged(_ sender: UISegmentedControl) {
    selectedSegmentIndex = sender.selectedSegmentIndex
    tableView.reloadData()
}

// 控制不同分段下的cell数量
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if selectedSegmentIndex == 0 {
        return normalCellData.count // 第一个分段的普通cell数量
    } else {
        return 1 // 第二个分段只显示一个承载collectionView的cell
    }
}

// 返回对应类型的cell
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if selectedSegmentIndex == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "NormalCell", for: indexPath)
        // 配置普通cell的内容
        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CollectionContainerCell", for: indexPath) as! CollectionContainerTableViewCell
        cell.collectionView.reloadData()
        return cell
    }
}

备选方案：直接在TableView上方添加UICollectionView作为子视图 #

如果你觉得嵌入cell的方式有点复杂，也可以直接把UICollectionView作为UITableView的子视图，放在header下方：

1. 在UITableViewController的viewDidLoad里创建并添加UICollectionView：

let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.isHidden = true // 默认隐藏
view.addSubview(collectionView)

// 设置约束，让collectionView紧贴header下方，宽度和tableView一致
NSLayoutConstraint.activate([
    collectionView.topAnchor.constraint(equalTo: tableView.tableHeaderView!.bottomAnchor),
    collectionView.leadingAnchor.constraint(equalTo: tableView.leadingAnchor),
    collectionView.trailingAnchor.constraint(equalTo: tableView.trailingAnchor),
    collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

2. 分段切换时控制显示/隐藏：

@IBAction func segmentChanged(_ sender: UISegmentedControl) {
    if sender.selectedSegmentIndex == 0 {
        collectionView.isHidden = true
        tableView.isScrollEnabled = true
        tableView.reloadData()
    } else {
        collectionView.isHidden = false
        tableView.isScrollEnabled = false // 禁止tableView滚动，避免冲突
        collectionView.reloadData()
    }
}

这种方式的好处是实现更简单，但要注意处理滚动冲突——比如当collectionView显示时，要禁用tableView的滚动，否则两个滚动视图会互相干扰。

关键注意事项 #

• 滚动冲突处理：无论是嵌入cell还是添加子视图，都要确保两个滚动视图的滚动行为不会冲突。比如嵌入cell时，可以让collectionView滚动时，tableView不响应滚动；或者设置collectionView的alwaysBounceVertical为true，tableView的bounces为false。
• 性能优化：记得复用UICollectionViewCell，避免在cellForItemAt里重复创建视图；如果数据量较大，考虑使用异步加载和缓存。
• 布局适配：确保在不同屏幕尺寸下，collectionView的itemSize和间距能自适应，可以用UICollectionViewFlowLayout的estimatedItemSize或者自定义布局来实现动态适配。

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