【Swift iOS】UITableView自定义单元格内UICollectionView技术问题咨询

嘿，看你的描述，应该是在UITableViewCell嵌套UICollectionView的布局上卡壳了吧？这种嵌套结构在Swift开发里确实容易踩坑，我结合自己的经验给你梳理几个关键问题的解决方案，应该能帮到你：

一、先把CollectionView的逻辑封装到TableViewCell里 #

千万别在ViewController里直接处理嵌套CollectionView的数据源，把逻辑封装在自定义TableViewCell里才是正确的姿势，能避免很多复用混乱的问题：

class CustomTableViewCell: UITableViewCell {
    @IBOutlet weak var mainIcon: UIImageView!
    @IBOutlet weak var mainTitleLabel: UILabel!
    @IBOutlet weak var buttonCollectionView: UICollectionView!
    @IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!
    
    // 定义闭包传递按钮点击事件给ViewController
    var buttonTapHandler: ((ButtonModel) -> Void)?
    // 数据源模型
    var cellData: CellModel? {
        didSet {
            guard let data = cellData else { return }
            // 更新主内容
            mainTitleLabel.text = data.mainTitle
            mainIcon.image = data.icon
            // 重新计算CollectionView高度并刷新
            updateCollectionViewHeight()
            buttonCollectionView.reloadData()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // 注册CollectionViewCell（代码创建的话用这个，xib的话在xib里设置）
        buttonCollectionView.register(ButtonCollectionCell.self, forCellWithReuseIdentifier: "ButtonCell")
        // 绑定代理和数据源到当前Cell
        buttonCollectionView.delegate = self
        buttonCollectionView.dataSource = self
        // 配置FlowLayout基础参数
        setupCollectionViewLayout()
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 复用前清空数据，防止旧内容残留
        cellData = nil
        buttonCollectionView.reloadData()
    }
    
    // 配置CollectionView的布局
    private func setupCollectionViewLayout() {
        guard let flowLayout = buttonCollectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
        // 用你已经计算好的按钮尺寸
        let buttonSize = CGSize(width: 80, height: 40) // 替换成你的计算值
        flowLayout.itemSize = buttonSize
        // 计算间距，让按钮在屏幕上均匀分布
        let totalItemWidth = buttonSize.width * CGFloat(cellData?.buttons.count ?? 0)
        let spacing = (buttonCollectionView.bounds.width - totalItemWidth) / CGFloat((cellData?.buttons.count ?? 0) + 1)
        flowLayout.minimumInteritemSpacing = spacing
        flowLayout.minimumLineSpacing = 12 // 行间距可以自己调整
        flowLayout.sectionInset = UIEdgeInsets(top: 8, left: spacing, bottom: 8, right: spacing)
    }
    
    // 根据按钮数量计算CollectionView的高度
    private func updateCollectionViewHeight() {
        guard let data = cellData, let flowLayout = buttonCollectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
        let buttonSize = flowLayout.itemSize
        let rowCount = ceil(CGFloat(data.buttons.count) / CGFloat(yourCalculatedRowCount)) // yourCalculatedRowCount是你算出的每行按钮数
        // 计算总高度：按钮高度*行数 + 上下内边距 + 行间距*(行数-1)
        collectionViewHeightConstraint.constant = rowCount * buttonSize.height + 16 + (rowCount - 1) * flowLayout.minimumLineSpacing
        // 强制更新布局
        contentView.layoutIfNeeded()
    }
}

// 实现CollectionView的代理和数据源
extension CustomTableViewCell: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return cellData?.buttons.count ?? 0
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ButtonCell", for: indexPath) as! ButtonCollectionCell
        guard let buttonData = cellData?.buttons[indexPath.item] else { return cell }
        cell.button.setTitle(buttonData.title, for: .normal)
        return cell
    }
    
    // 处理按钮点击事件
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        guard let buttonData = cellData?.buttons[indexPath.item] else { return }
        buttonTapHandler?(buttonData)
    }
}

// 定义数据模型
struct CellModel {
    let mainTitle: String
    let icon: UIImage?
    let subtitle: String // 你的副标题
    let buttons: [ButtonModel]
}

struct ButtonModel {
    let title: String
    // 可以加其他属性，比如按钮ID、跳转链接等
}

// 自定义CollectionViewCell（按钮容器）
class ButtonCollectionCell: UICollectionViewCell {
    let button: UIButton = {
        let btn = UIButton(type: .system)
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 14)
        btn.backgroundColor = UIColor.systemGray5
        btn.layer.cornerRadius = 6
        btn.translatesAutoresizingMaskIntoConstraints = false
        return btn
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubview(button)
        NSLayoutConstraint.activate([
            button.topAnchor.constraint(equalTo: contentView.topAnchor),
            button.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            button.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            button.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

二、确保TableViewCell能自适应高度 #

在ViewController里开启TableView的自动行高，让Cell根据内部CollectionView的高度自动调整：

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.rowHeight = UITableView.automaticDimension
    tableView.estimatedRowHeight = 200 // 给一个预估高度，提升滚动流畅度
    tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "CustomCell")
}

// 在cellForRowAt里给Cell赋值数据
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomTableViewCell
    cell.cellData = yourDataSourceArray[indexPath.row]
    // 绑定按钮点击事件
    cell.buttonTapHandler = { buttonData in
        // 在这里处理按钮点击逻辑，比如跳转、弹窗等
        print("点击了按钮：\(buttonData.title)")
    }
    return cell
}

三、常见问题排查点 #

如果还是有问题，可以从这几个方向检查：

• 按钮换行异常：确认yourCalculatedRowCount的计算逻辑是否正确，比如有没有考虑到屏幕边缘的间距
• CollectionView高度不对：检查updateCollectionViewHeight里的高度计算是否包含了内边距和行间距
• 复用混乱：确认prepareForReuse方法里清空了cellData，并且CollectionView的代理没有被意外重置

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