如何为UICollectionView实现含可变数量子视图的Cell？求最优方案

作为iOS开发老鸟，先给你这个新手点个赞——能想到三种不同的实现思路已经很棒了！不过这三个方案各有弊端，我来帮你拆解下，再说说最推荐的最优方案：

先说说你提出的三个方案的问题 #

• 方案1（预布局占位符）：
  这种方式虽然上手简单，但弊端很明显：一是占位符哪怕隐藏也会占用布局计算资源，可能干扰StackView的自动布局逻辑；二是隐藏的视图可能会意外响应交互事件；三是扩展性差，后续如果要支持超过4个座位，就得修改Cell的预设布局结构。

• 方案2（在cellForItemAt中动态添加）：
  思路方向是对的，但直接在cellForItemAt里操作StackView会踩Cell复用的坑——UICollectionView的Cell是循环复用的，当Cell被复用时，之前添加的「座位」视图不会自动清除，导致每次复用都会叠加新视图，最后Cell里的子视图越积越多，不仅布局混乱，还会造成内存浪费。

• 方案3（注册5个Cell类）：
  性能确实可能不错，但完全没必要——维护5个几乎一模一样的Cell类会产生大量冗余代码，后续修改布局（比如调整头像大小、间距）时，要同步修改5次，维护成本极高，完全不符合*DRY（Don't Repeat Yourself）*原则，确实不够优雅。

最优方案：复用「座位」视图 + 利用Cell生命周期清理状态 #

基于方案2优化，核心思路是封装布局逻辑+复用视图池+清理复用状态，具体步骤如下：

1. 把布局逻辑封装在Cell内部：
   不要直接在cellForItemAt里操作StackView，而是在自定义Cell类中写一个专属配置方法（比如configureWithSeatData:），让Cell自己处理视图的添加、复用和数据绑定，cellForItemAt只负责传递数据，代码更清晰。

2. 维护「座位」视图复用池：
   在Cell类里创建一个数组作为可复用的座位视图池，当需要配置n个座位时：

   • 如果复用池里的视图数量 ≥ n：取出前n个视图配置数据并显示，剩下的视图隐藏并从StackView中移除
   • 如果复用池里的视图数量 < n：先把所有复用视图添加到StackView，再创建缺少数量的新视图，添加到StackView和复用池

3. 在prepareForReuse中清理状态：
   重写Cell的prepareForReuse方法，把所有座位视图从StackView中移除并隐藏，确保Cell被复用时，不会带着上一次的布局状态。

代码示例（简化版） #

class CustomCollectionViewCell: UICollectionViewCell {
    // 用来承载座位的StackView
    let seatStackView = UIStackView()
    // 座位视图复用池
    private var reusableSeatViews: [UIImageView] = []
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 初始化StackView的基础属性
        seatStackView.axis = .horizontal
        seatStackView.spacing = 8
        seatStackView.alignment = .center
        contentView.addSubview(seatStackView)
        // 给StackView添加约束（根据你的布局需求调整）
        seatStackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            seatStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            seatStackView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            seatStackView.heightAnchor.constraint(equalToConstant: 32)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 清理复用状态：移除所有座位视图，隐藏备用
        reusableSeatViews.forEach {
            $0.removeFromSuperview()
            $0.isHidden = true
        }
    }
    
    // 对外暴露的配置方法
    func configure(with seatData: [AvatarModel]) {
        let neededCount = seatData.count
        
        // 先处理复用池里已有的视图
        for (index, seatView) in reusableSeatViews.enumerated() {
            if index < neededCount {
                // 配置视图数据（比如设置头像图片）
                seatView.image = seatData[index].avatar
                seatView.isHidden = false
                seatStackView.addArrangedSubview(seatView)
            } else {
                seatView.isHidden = true
            }
        }
        
        // 如果需要的数量超过复用池现有数量，创建新视图
        if neededCount > reusableSeatViews.count {
            let createCount = neededCount - reusableSeatViews.count
            for i in 0..<createCount {
                let newSeatView = UIImageView()
                // 配置座位视图样式
                newSeatView.layer.cornerRadius = 16
                newSeatView.clipsToBounds = true
                newSeatView.contentMode = .scaleAspectFill
                newSeatView.frame = CGRect(x: 0, y: 0, width: 32, height: 32)
                // 绑定数据
                newSeatView.image = seatData[reusableSeatViews.count + i].avatar
                // 添加到复用池和StackView
                reusableSeatViews.append(newSeatView)
                seatStackView.addArrangedSubview(newSeatView)
            }
        }
    }
}

然后在cellForItemAt里只需要简单调用配置方法：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCollectionViewCell
    let currentSeatData = dataSource[indexPath.item]
    cell.configure(with: currentSeatData)
    return cell
}

为什么这是最优方案？ #

1. 彻底解决复用问题：通过prepareForReuse清理状态，确保每个Cell被复用时都是干净的，不会出现视图叠加的情况。
2. 性能优异：复用视图池避免了频繁创建和销毁视图，减少了内存开销和布局计算消耗，性能和方案3接近，但没有冗余代码。
3. 维护性强：所有布局逻辑都封装在Cell类内部，cellForItemAt只负责传递数据，后续修改座位样式、扩展支持更多座位数量，只需要修改Cell类的代码即可。
4. 灵活性高：不管座位数量是0还是4（甚至以后扩展到更多），都能无缝适配，不需要修改Cell的注册逻辑。

如果你的「座位」视图有复杂交互或样式，还可以单独封装一个SeatView类，进一步提升代码的可维护性。

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