UICollectionView进入编辑模式时复选框显示不一致问题求助

开发iOS应用时遇到以下问题：进入编辑模式后滚动UICollectionView，部分单元格显示复选框，另一部分则不显示。期望所有单元格在编辑模式下均能一致显示复选框。

附加背景 #

• 使用自定义布局的UICollectionView
• 自定义了MailListCell单元格
• 问题仅在编辑模式下滚动视图时出现

预期行为 #

无论单元格是否处于可见状态，编辑模式下所有UICollectionView单元格均需显示复选框。

初始相关代码 #

override func setEditing(_ editing: Bool, animated: Bool) {
    super.setEditing(editing, animated: animated)
    
    if editing {
        // 启用多选、显示复选框等
        navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancelEditing))
        
        // 将列表右移
//        collectionViewLeadingConstraint?.constant = 50
        
        // 显示复选框并将标签右移
                for indexPath in mailListCollectionView.indexPathsForVisibleItems {
                    if let cell = mailListCollectionView.cellForItem(at: indexPath) as? MailListCell {
                        cell.moveLabelsToRight()
//                        cell.roundCheckbox.isHidden = false
//                        cell.animateCheckboxAppearance()
                    }
                }
        mailListCollectionView.allowsMultipleSelection = true
    } else {
        // 禁用多选、隐藏复选框等
        navigationItem.rightBarButtonItem = editButtonItem
        
        // 将列表恢复至原始位置
//        collectionViewLeadingConstraint?.constant = 0
        
                for indexPath in mailListCollectionView.indexPathsForVisibleItems {
                    if let cell = mailListCollectionView.cellForItem(at: indexPath) as? MailListCell {
                        cell.moveLabelsToOriginalPosition()
//                        cell.roundCheckbox.isHidden = true
                    }
                }
    }
    
    // 需要调用layoutIfNeeded以应用约束变更
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
}
@objc func cancelEditing() {
    // 实现用户取消编辑模式时所需的逻辑，例如取消选中所有单元格、隐藏复选框等
    
    setEditing(false, animated: true)
    mailListCollectionView.allowsSelection = false
}

单元格布局调整代码 #

extension MailListCell {
    func moveLabelsToRight() {
        senderLeadingConstraint?.constant = 50
        subjectLeadingConstraint?.constant = 50
        dateLeadingConstraint?.constant = 50
        separatorLeadingConstraint?.constant = 50
        roundCheckboxLeadingConstraint?.constant = 10
        
        // 修改透明度实现淡入效果
        UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseInOut, animations: {
                    self.roundCheckbox.alpha = 1
                }, completion: nil)
    }

    func moveLabelsToOriginalPosition() {
        senderLeadingConstraint?.constant = 16
        subjectLeadingConstraint?.constant = 16
        dateLeadingConstraint?.constant = 16
        separatorLeadingConstraint?.constant = 16
        roundCheckboxLeadingConstraint?.constant = -20
        
        // 修改透明度实现淡出效果
        UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseInOut, animations: {
                    self.roundCheckbox.alpha = 0
                }, completion: nil)
    }
}

更新后的代码 #

override func setEditing(_ editing: Bool, animated: Bool) {
    super.setEditing(editing, animated: animated)
    
    if editing {
        isEditingMode = true
        // 启用多选、显示复选框等
        navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancelEditing))
        
        // 将列表右移
//        collectionViewLeadingConstraint?.constant = 50
        
        // 显示复选框并将标签右移
                for indexPath in mailListCollectionView.indexPathsForVisibleItems {
                    if let cell = mailListCollectionView.cellForItem(at: indexPath) as? MailListCell {
                        cell.moveLabelsToRight()
//                        cell.roundCheckbox.isHidden = false
//                        cell.animateCheckboxAppearance()
                    }
                }
        mailListCollectionView.allowsMultipleSelection = true
    } else {
        isEditingMode = false
        // 禁用多选、隐藏复选框等
        navigationItem.rightBarButtonItem = editButtonItem
        
        // 将列表恢复至原始位置
//        collectionViewLeadingConstraint?.constant = 0
        
                for indexPath in mailListCollectionView.indexPathsForVisibleItems {
                    if let cell = mailListCollectionView.cellForItem(at: indexPath) as? MailListCell {
                        cell.moveLabelsToOriginalPosition()
//                        cell.roundCheckbox.isHidden = true
                    }
                }
    }
    
    // 需要调用layoutIfNeeded以应用约束变更
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! MailListCell
    
    if isEditingMode {
            cell.moveLabelsToRight()
        } else {
            cell.moveLabelsToOriginalPosition()
        }
    
    cell.senderLabel.text = "some sender"
    cell.subjectLabel.text = "some subject"
    cell.dateLabel.text = "dd/mm/yyyy"

    return cell
}

解决思路与建议 #

1. 统一单元格状态管理，避免手动遍历可见单元格 #

在setEditing方法中，修改isEditingMode后直接刷新整个集合视图，替代手动遍历可见单元格修改布局的逻辑。这样所有单元格（包括即将滚动进入视野的）都会通过cellForItemAt获取最新的编辑状态：

override func setEditing(_ editing: Bool, animated: Bool) {
    super.setEditing(editing, animated: animated)
    
    isEditingMode = editing
    
    // 更新导航栏按钮与多选设置
    navigationItem.rightBarButtonItem = editing ? 
        UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancelEditing)) : 
        editButtonItem
    mailListCollectionView.allowsMultipleSelection = editing
    if !editing {
        mailListCollectionView.allowsSelection = false
    }
    
    // 刷新所有单元格，确保状态一致
    if animated {
        UIView.animate(withDuration: 0.3) {
            self.mailListCollectionView.reloadData()
            self.view.layoutIfNeeded()
        }
    } else {
        self.mailListCollectionView.reloadData()
        self.view.layoutIfNeeded()
    }
}

2. 修复单元格复用的状态残留问题 #

在MailListCell中重写prepareForReuse方法，重置所有布局状态到初始值，避免复用带有编辑状态的旧单元格：

class MailListCell: UICollectionViewCell {
    // ...你的其他单元格代码
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 重置到非编辑状态的布局参数
        senderLeadingConstraint?.constant = 16
        subjectLeadingConstraint?.constant = 16
        dateLeadingConstraint?.constant = 16
        separatorLeadingConstraint?.constant = 16
        roundCheckboxLeadingConstraint?.constant = -20
        roundCheckbox.alpha = 0
        // 立即应用布局变更，避免状态滞后
        self.layoutIfNeeded()
        // 移除所有未完成的动画，防止复用后动画冲突
        self.layer.removeAllAnimations()
    }
}

3. 优化单元格布局动画逻辑 #

在moveLabelsToRight和moveLabelsToOriginalPosition中，先应用约束变更再执行动画，确保初始布局正确：

extension MailListCell {
    func moveLabelsToRight() {
        // 先移除未完成的动画
        self.layer.removeAllAnimations()
        
        // 设置编辑模式下的约束
        senderLeadingConstraint?.constant = 50
        subjectLeadingConstraint?.constant = 50
        dateLeadingConstraint?.constant = 50
        separatorLeadingConstraint?.constant = 50
        roundCheckboxLeadingConstraint?.constant = 10
        
        // 先应用约束变更，保证动画起始状态正确
        self.layoutIfNeeded()
        
        // 执行淡入动画
        UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseInOut) {
            self.roundCheckbox.alpha = 1
            self.layoutIfNeeded()
        }
    }

    func moveLabelsToOriginalPosition() {
        self.layer.removeAllAnimations()
        
        // 设置非编辑模式下的约束
        senderLeadingConstraint?.constant = 16
        subjectLeadingConstraint?.constant = 16
        dateLeadingConstraint?.constant = 16
        separatorLeadingConstraint?.constant = 16
        roundCheckboxLeadingConstraint?.constant = -20
        
        self.layoutIfNeeded()
        
        // 执行淡出动画
        UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseInOut) {
            self.roundCheckbox.alpha = 0
            self.layoutIfNeeded()
        }
    }
}

4. 确保cellForItemAt中的布局设置时机正确 #

在cellForItemAt中，先设置单元格的基础数据，再根据isEditingMode调整布局，避免数据覆盖或布局异常：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! MailListCell
    
    // 先设置基础数据
    cell.senderLabel.text = "some sender"
    cell.subjectLabel.text = "some subject"
    cell.dateLabel.text = "dd/mm/yyyy"
    
    // 再根据编辑状态调整布局
    if isEditingMode {
        cell.moveLabelsToRight()
    } else {
        cell.moveLabelsToOriginalPosition()
    }

    return cell
}

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