UITableView中多CollectionView布局覆盖显示异常问题

问题根源 #

核心问题出在这几点：

• 四个UICollectionView被同时添加到UITableViewCell上，且设置了完全重叠的frame，后添加的CollectionView会直接覆盖先添加的。
• 除当前section对应的CollectionView外，其他要么无数据（比如popular返回0个item），要么被上层空白的CollectionView遮挡，导致看不到内容。
• 你在cellForRowAt中，除了country section，其他section直接返回默认UITableViewCell，这也导致对应section无法加载正确的CollectionView布局。

具体修改步骤 #

1. 优化自定义UITableViewCell的布局与显示逻辑

修改HomeVCTableViewCell，默认隐藏所有CollectionView，用AutoLayout让每个CollectionView充满cell的contentView（注意：UITableViewCell的子视图应该添加到contentView而非cell本身）：

class HomeVCTableViewCell: UITableViewCell {

    static let identifier = "HomeVCTableViewCell"
    
    // 保持四个CollectionView的定义不变...
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configureView()
    }
    
    required init?(coder: NSCoder) {
        fatalError()
    }
    
    private func configureView() {
        let collectionViews: [UICollectionView] = [countryCollectionView, categoriesCollectionView, popularCollectionView, specialsCollectionView]
        collectionViews.forEach { collectionView in
            collectionView.delegate = self
            collectionView.dataSource = self
            // 添加到contentView而非cell本身
            contentView.addSubview(collectionView)
            // 默认隐藏所有CollectionView
            collectionView.isHidden = true
            // 用AutoLayout约束让CollectionView充满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)
            ])
        }
    }
    
    // 新增各section对应的配置方法
    func configureCountryCell(with areas: [String]) {
        // 只显示当前CollectionView，隐藏其他
        showOnlyCollectionView(countryCollectionView)
        self.areas = areas
        countryCollectionView.reloadData()
    }
    
    func configureCategoriesCell() {
        showOnlyCollectionView(categoriesCollectionView)
        categoriesCollectionView.reloadData()
    }
    
    func configurePopularCell() {
        showOnlyCollectionView(popularCollectionView)
        popularCollectionView.reloadData()
    }
    
    func configureSpecialsCell() {
        showOnlyCollectionView(specialsCollectionView)
        specialsCollectionView.reloadData()
    }
    
    // 辅助方法：控制CollectionView的显示/隐藏
    private func showOnlyCollectionView(_ targetCollectionView: UICollectionView) {
        let collectionViews: [UICollectionView] = [countryCollectionView, categoriesCollectionView, popularCollectionView, specialsCollectionView]
        collectionViews.forEach {
            $0.isHidden = $0 != targetCollectionView
        }
    }
}

// 保持CollectionView的代理方法不变...

2. 修改UITableView的cellForRowAt方法

不再返回默认UITableViewCell，统一使用HomeVCTableViewCell并调用对应配置方法：

extension HomeVC: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: HomeVCTableViewCell.identifier, for: indexPath) as? HomeVCTableViewCell else {
            return UITableViewCell()
        }
        
        switch indexPath.section {
        case Sections.country.rawValue:
            cell.configureCountryCell(with: areas)
        case Sections.categories.rawValue:
            cell.configureCategoriesCell()
        case Sections.popular.rawValue:
            cell.configurePopularCell()
        case Sections.specials.rawValue:
            cell.configureSpecialsCell()
        default:
            break
        }
        
        return cell
    }
    
    // 保持其他代理方法不变...
}

3. 移除layoutSubviews中的frame设置

已经用AutoLayout约束实现布局，无需手动设置frame：

// 删除这个方法
// override func layoutSubviews() {
//     super.layoutSubviews()
//     ...
// }

额外优化建议 #

• 可以为每个section创建独立的UITableViewCell子类（比如CountryTableViewCell、CategoriesTableViewCell），每个cell只包含对应的CollectionView，代码结构会更清晰，避免多个CollectionView共存的问题。
• 调试时可以给每个CollectionView设置不同的backgroundColor，方便快速确认布局是否正确。

内容的提问来源于stack exchange，提问作者Altan Koray Benli