自定义UITableViewCell中图片加遮罩后滚动崩溃的解决方法

问题描述 #

在自定义UITableViewCell中为图片添加遮罩，初始显示正常，但滚动表格时，在获取遮罩对应的UIImageView处出现Fatal error: Unexpectedly found nil while unwrapping an Optional value错误，崩溃行是：

let badgeMask = cell?.viewWithTag(4) as! UIImageView

原实现代码（省略部分变量声明）：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "LeagueTableCell") as UITableViewCell?
    
    let badgeFgr = cell?.viewWithTag(9) as! UIImageView
    let badgeMask = cell?.viewWithTag(4) as! UIImageView

    // Set the image
    if let theImage = UIImage(named: imageString) {
      badgeFgr.image = theImage.withRenderingMode(.alwaysTemplate)
      badgeFgr.tintColor = fgrCol
        
      // Apply the mask
      badgeMask.image = UIImage(named: "maskShape")
      badgeFgr.mask = badgeMask
    }

    return cell!
}

移除遮罩相关代码后，图片显示正常且滚动无崩溃。

崩溃原因 #

1. 强制解包风险：使用as!强制解包可选类型，当viewWithTag(4)找不到对应视图时会返回nil，直接触发崩溃。
2. 视图层级变更：将cell的子视图（badgeMask）设置为另一个视图的mask后，该子视图会从cell的视图层级中被移除，导致下次复用cell时，viewWithTag(4)无法找到这个UIImageView，返回nil。

正确实现方式 #

方法1：自定义UITableViewCell子类（推荐） #

提前在自定义cell类中管理遮罩视图，避免视图层级丢失和强制解包问题：

import UIKit

class LeagueTableCell: UITableViewCell {
    // 用IBOutlet绑定cell中的图片视图（替代tag查找）
    @IBOutlet weak var badgeFgr: UIImageView!
    
    // 懒加载创建遮罩视图，确保每次复用都能正确获取
    private lazy var badgeMask: UIImageView = {
        let mask = UIImageView(image: UIImage(named: "maskShape"))
        mask.frame = badgeFgr.bounds
        mask.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        return mask
    }()
    
    // 统一配置cell的方法
    func configure(with imageName: String, tintColor: UIColor) {
        badgeFgr.image = UIImage(named: imageName)?.withRenderingMode(.alwaysTemplate)
        badgeFgr.tintColor = tintColor
        // 应用遮罩
        badgeFgr.mask = badgeMask
    }
    
    // 复用cell时清理旧内容
    override func prepareForReuse() {
        super.prepareForReuse()
        badgeFgr.image = nil
        badgeFgr.tintColor = .clear
        badgeFgr.mask = nil
    }
}

// 在TableView数据源方法中使用
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "LeagueTableCell") as! LeagueTableCell
    
    // 替换为你的图片名称和颜色逻辑
    let imageString = "" 
    let fgrCol = UIColor.black
    
    if let theImage = UIImage(named: imageString) {
        cell.configure(with: imageString, tintColor: fgrCol)
    } else {
        cell.prepareForReuse()
    }
    
    return cell
}

方法2：不自定义cell的兼容方案 #

如果不想创建自定义cell子类，需要处理视图复用后的遮罩查找问题，同时避免强制解包：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // 安全获取cell，避免nil
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "LeagueTableCell") else {
        return UITableViewCell(style: .default, reuseIdentifier: "FallbackCell")
    }
    
    // 安全获取目标图片视图
    guard let badgeFgr = cell.viewWithTag(9) as? UIImageView else {
        return cell
    }
    
    // 处理遮罩：优先从当前mask获取，否则重新查找或创建
    var badgeMask: UIImageView?
    if let existingMask = badgeFgr.mask as? UIImageView {
        badgeMask = existingMask
    } else {
        // 先尝试从cell中找tag=4的视图，找不到则新建
        badgeMask = cell.viewWithTag(4) as? UIImageView ?? UIImageView(image: UIImage(named: "maskShape"))
        badgeMask?.tag = 4
        badgeMask?.frame = badgeFgr.bounds
        badgeMask?.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        // 将新建的遮罩视图添加到cell层级
        cell.contentView.addSubview(badgeMask!)
    }
    
    // 设置图片和遮罩
    let imageString = "" // 替换为你的图片名称
    let fgrCol = UIColor.black // 替换为你的颜色
    
    if let theImage = UIImage(named: imageString) {
        badgeFgr.image = theImage.withRenderingMode(.alwaysTemplate)
        badgeFgr.tintColor = fgrCol
        badgeMask?.image = UIImage(named: "maskShape")
        badgeFgr.mask = badgeMask
    } else {
        // 无图片时清理内容
        badgeFgr.image = nil
        badgeFgr.tintColor = .clear
        badgeFgr.mask = nil
    }
    
    return cell
}

核心注意事项 #

• 禁止强制解包：始终用as?配合guard/if let处理可选类型，避免nil崩溃。
• mask的层级特性：视图被设置为mask后会脱离原父视图，不能再通过原层级的tag查找，需提前保留引用或重新创建。
• 复用清理：在prepareForReuse中清空图片、颜色和mask，避免复用旧数据导致的显示异常。

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