Swift：UITableViewCell中状态气泡无法显示的问题排查

问题描述 #

有人遇到UITableViewCell中自定义状态气泡无法显示的问题，已完成相关声明与配置，且inspectionCell已在tableView中正确注册，但完全看不到状态气泡。

相关代码 #

tableView的cellForRowAt方法

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if InspectionData.sharedInstance.partsData?.count != 0 {
        // 获取部件数据
        guard let part = InspectionData.sharedInstance.partsData?[indexPath.row] as? Part else {
            print("ERROR getting the part in cellForRowAt inside InspectionViewController")
            return UITableViewCell()
        }
        let inspectionCell = tableView.dequeueReusableCell(withIdentifier: inspectionCell, for: indexPath) as! InspectionTableViewCell
        var inspectionContent = inspectionCell.defaultContentConfiguration()
        inspectionContent.text = part.title
        inspectionContent.secondaryText = part.location
        inspectionCell.isCompleted = part.completed
        inspectionCell.contentConfiguration = inspectionContent
        return inspectionCell
    } else {
        let placeholderCell = tableView.dequeueReusableCell(withIdentifier: placeholderCell, for: indexPath)
        var placeholderContent = placeholderCell.defaultContentConfiguration()
        placeholderContent.text = "Reminder: Add parts to get started"
        placeholderCell.contentConfiguration = placeholderContent
        return placeholderCell
    }
}

自定义InspectionTableViewCell类

class InspectionTableViewCell: UITableViewCell {
    // 为检查部件列表创建带状态气泡的自定义单元格
    var statusBubble: UIView!
    var isCompleted: Bool = false {
        didSet {
            statusBubble.backgroundColor = isCompleted ? .green : .red
        }
    }
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        statusBubble = UIView()
        statusBubble.translatesAutoresizingMaskIntoConstraints = false
        statusBubble.layer.cornerRadius = 10
        contentView.addSubview(statusBubble)
        
        NSLayoutConstraint.activate([
            statusBubble.widthAnchor.constraint(equalToConstant: 20),
            statusBubble.heightAnchor.constraint(equalToConstant: 20),
            statusBubble.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            statusBubble.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
        ])
    }
    
    required init(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

问题原因与解决方法 #

经排查发现，问题出在状态气泡的添加位置：使用defaultContentConfiguration会覆盖contentView的布局逻辑，导致添加到contentView上的statusBubble被遮挡或布局失效。

需要修改两处代码：

1. 将添加子视图的代码从：

contentView.addSubview(statusBubble)

改为：

addSubview(statusBubble)

2. 同步更新约束，不再引用contentView：

NSLayoutConstraint.activate([
    statusBubble.widthAnchor.constraint(equalToConstant: 20),
    statusBubble.heightAnchor.constraint(equalToConstant: 20),
    statusBubble.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -8),
    statusBubble.centerYAnchor.constraint(equalTo: self.centerYAnchor)
])

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