UICollectionView Cell动态添加高亮子视图异常问题求解

两个问题的核心原因非常明确：

1. 高亮视图串显：Cell被复用时，之前添加的高亮子视图没有被清理，每次cellForItemAt执行都会新增一批高亮View，导致视图残留错位。
2. 加在imageView上长按不触发：UIImageView默认isUserInteractionEnabled属性为false，会拦截所有子视图的交互事件，手势自然无法响应。

修复步骤 #

1. 实现Cell重用前的清理逻辑 #

在自定义ImageTextCell中重写prepareForReuse方法，每次Cell进入复用池前移除所有历史高亮视图，从根源避免残留：

class ImageTextCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
    // 你已有的其他属性、布局代码
    
    // 给高亮视图定义统一标识，避免误删其他子视图
    static let highlightViewTag = 9527

    override func prepareForReuse() {
        super.prepareForReuse()
        // 移除所有历史高亮视图
        imageView.subviews.forEach { subview in
            if subview.tag == Self.highlightViewTag {
                subview.removeFromSuperview()
            }
        }
    }
}

2. 开启UIImageView的交互能力 #

不需要把高亮视图加到Cell本身，只要打开imageView的交互开关，就能正常响应子视图的长按手势，同时还能保证高亮区域和图片位置完全对齐，不会因为Cell层级变化错位。

3. 修正cellForItemAt中的实现逻辑 #

调整后的代码如下，额外加了一层兜底清理逻辑，应对prepareForReuse未触发的极端场景，同时修正了尺寸获取的写法：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageTextCell", for: indexPath) as! ImageTextCell
    cell.imageView.image = UIImage(named: "img\(indexPath.item)")
    // 开启imageView交互，支持子视图手势响应
    cell.imageView.isUserInteractionEnabled = true
    
    let data = datasource[indexPath.item]
    let scale = 2000 / collectionView.bounds.width // 直接取bounds宽度，不要取layer.width，避免布局未完成时取值错误

    for (index, area) in data.enumerated() {
        let minX = area.startX! / scale
        let minY = area.startY! / scale
        let width = (area.endX! - area.startX!) / scale
        let height = (area.endY! - area.startY!) / scale

        let highlightView = UIView(frame: CGRect(x: minX, y: minY, width: width, height: height))
        highlightView.tag = ImageTextCell.highlightViewTag
        highlightView.accessibilityLabel = "\(indexPath.item)-\(index)"
        highlightView.backgroundColor = UIColor(hexString: "#000000", alpha: 0.2)
        highlightView.isUserInteractionEnabled = true

        let longPress = UILongPressGestureRecognizer(target: self, action: #selector(longPressed(_:)))
        highlightView.addGestureRecognizer(longPress)
        cell.imageView.addSubview(highlightView)
    }

    return cell
}

注意事项 #

• 如果你的图片使用aspectFit/aspectFill模式做了缩放，当前的坐标换算逻辑会出现位置偏移，需要基于图片实际显示的区域尺寸重新计算缩放比，不能直接用collectionView宽度做基准。
• 不要把高亮视图直接添加到cell根视图上，建议要么加在imageView上和图片层级绑定，要么加在cell.contentView上，避免Cell选中、编辑状态下的层级异常。
• 长按事件回调中，可以通过gesture.view?.accessibilityLabel拿到当前触发的高亮区域标识，解析出对应的indexPath和区域序号做后续业务处理。

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