UICollectionView Cell图片重叠问题求助：测试正常生产环境异常

核心问题分析 #

1. Cell复用导致视图叠加：每次cellForItemAt都会创建新的UIImageView并添加到cell，复用cell时旧的视图未被清理，多次复用后图片叠加。
2. 频繁全局刷新：每张图片加载完成就调用reloadData，生产环境图片数量较多时，会引发布局计算异常。
3. 错误的选中逻辑：在cellForItemAt中调用selectItem，每次创建cell都会强制选中第一个item，干扰cell复用和正常布局流程。

修复步骤 #

1. 解决Cell视图叠加问题

推荐自定义UICollectionViewCell子类，提前配置好UIImageView并复用：

class ImageCollectionViewCell: UICollectionViewCell {
    static let reuseID = "ImageCell"
    
    let imageView: UIImageView = {
        let iv = UIImageView()
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true
        iv.translatesAutoresizingMaskIntoConstraints = false
        return iv
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupSubviews()
    }
    
    private func setupSubviews() {
        contentView.addSubview(imageView)
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
        
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
    
    // 复用前重置图片，避免残留内容
    override func prepareForReuse() {
        super.prepareForReuse()
        imageView.image = nil
    }
}

修改cellForItemAt方法：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ImageCollectionViewCell.reuseID, for: indexPath) as! ImageCollectionViewCell
    cell.imageView.image = picArray[indexPath.row]
    return cell
}

如果不想自定义cell，也可以用tag复用已有视图：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellID, for: indexPath)
    let imageViewTag = 1001
    
    // 复用已存在的UIImageView，不存在则创建
    let iv: UIImageView
    if let existingIV = cell.contentView.viewWithTag(imageViewTag) as? UIImageView {
        iv = existingIV
    } else {
        iv = UIImageView()
        iv.tag = imageViewTag
        iv.frame = cell.contentView.bounds
        iv.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true
        cell.contentView.addSubview(iv)
    }
    
    iv.image = picArray[indexPath.row]
    cell.layer.shouldRasterize = true
    cell.layer.rasterizationScale = UIScreen.main.scale
    
    return cell
}

2. 优化图片加载后的刷新逻辑

避免每张图片加载完成就全局刷新，改为全部加载完成后统一刷新，或插入单个cell：

// 初始化先清空数组
picArray.removeAll()
imageID.removeAll()

db.collection("SAVED IMAGE IDS").getDocuments() { querySnapshot, err in
    if let err = err {
        print("Error getting documents: \(err)")
        return
    }
    guard let documents = querySnapshot?.documents else { return }
    
    var loadedCount = 0
    let totalCount = documents.count
    
    for document in documents {
        let id = document.documentID
        let ref = Storage.storage().reference(forURL: "SavedUserImages/\(id)")
        
        ref.getData(maxSize: 1 * 1024 * 1024) { data, error in
            defer {
                loadedCount += 1
                // 所有图片加载完成后统一刷新
                if loadedCount == totalCount {
                    DispatchQueue.main.async {
                        self.collectionView.reloadData()
                        // 在这里设置默认选中第一个item
                        self.collectionView.selectItem(at: IndexPath(item: 0, section: 0), animated: false, scrollPosition: [])
                    }
                }
            }
            
            if let error = error {
                print("Error: Image could not download! \(error)")
                return
            }
            guard let data = data, let image = UIImage(data: data) else { return }
            
            DispatchQueue.main.async {
                self.picArray.append(image)
                self.imageID.append(id)
            }
        }
    }
}

3. 移除错误的选中逻辑

删除cellForItemAt中的collectionView.selectItem代码，将默认选中逻辑移到数据加载完成后执行（如上述代码所示）。

环境差异原因 #

测试环境图片数量少，cell复用次数少，叠加的视图不足以被察觉；生产环境用户保存的图片多，cell频繁复用，叠加视图累积后出现明显重叠。点击触发reloadData时，cell被重新创建/复用，叠加视图被清理，因此恢复正常。

内容的提问来源于stack exchange，提问作者daj mi spokój