自定义UITableViewCell复用后ImageView约束异常问题求助

你遇到的问题主要来自UITableViewCell的复用机制和约束的重复创建，咱们一步步来解决：

核心问题点 #

1. 重复添加子视图：每次cellForRowAt调用时，你都新建了一个percentageImageView并添加到cell上。当cell被复用的时候，旧的ImageView并没有被移除，导致cell上叠加了多个ImageView，约束也变得混乱，滚动后自然显示异常。
2. 百分比为0时未处理：当占比为0时，你没有隐藏ImageView，再加上复用的旧视图残留，就会出现不该显示的情况。
3. frame.width不可靠：在cellForRowAt阶段，cell的frame还没完成最终布局，直接用cell.frame.width计算宽度会有误差。

修复步骤 #

第一步：重构自定义Cell，把ImageView作为Cell的属性 #

首先修改你的MyTableViewCell，把percentageImageView变成Cell的成员变量，一次性初始化好，避免重复创建：

class MyTableViewCell: UITableViewCell {
    // 原有的labelCategory、labelQuantity
    let labelCategory = UILabel()
    let labelQuantity = UILabel()
    
    // 新增百分比ImageView属性
    let percentageImageView: UIImageView = {
        let view = UIImageView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.image = UIImage(named: "percentage")
        // 初始隐藏，避免默认显示
        view.isHidden = true
        return view
    }()
    
    // 用于动态更新宽度的约束，设为可选属性
    private var widthConstraint: NSLayoutConstraint?
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupSubviews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupSubviews()
    }
    
    private func setupSubviews() {
        // 先添加你的两个Label的约束（这里假设你已经处理好了，没处理的话也要在这里一次性配置）
        
        // 添加percentageImageView到cell，并设置固定约束
        addSubview(percentageImageView)
        
        // 固定的约束：左、上、高度
        percentageImageView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
        percentageImageView.topAnchor.constraint(equalTo: labelCategory.bottomAnchor, constant: 8).isActive = true
        percentageImageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
        
        // 宽度约束先存起来，后续动态更新
        widthConstraint = percentageImageView.widthAnchor.constraint(equalToConstant: 0)
        widthConstraint?.isActive = true
    }
    
    // 新增一个方法，用于更新百分比视图的状态
    func updatePercentageView(with percentage: CGFloat) {
        if percentage <= 0 {
            percentageImageView.isHidden = true
        } else {
            percentageImageView.isHidden = false
            // 这里用cell的宽度来计算，注意要减去左边的constant（8），避免超出cell
            let maxWidth = bounds.width - 8
            widthConstraint?.constant = maxWidth * percentage
        }
        // 强制更新布局，确保约束生效
        layoutIfNeeded()
    }
}

第二步：修改cellForRowAt方法，复用Cell的ImageView #

现在在cellForRowAt里，只需要调用Cell的更新方法，不用再创建新的ImageView：

let quantities: [Double] = [100, 60, 40, 15, 10, 5, 0, 0, 0, 0, 0]
let categories: [String] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "L", "M"]
let total: Double = 230

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath) as! MyTableViewCell
    
    let category = categories[indexPath.row]
    let quantity = quantities[indexPath.row]
    
    cell.labelCategory.text = "Category \(category)"
    cell.labelQuantity.text = "Quantity: \(quantity)"
    
    // 计算百分比，处理total为0的情况（避免除以0崩溃）
    let percentage = total > 0 ? CGFloat(quantity / total) : 0
    // 调用Cell的更新方法
    cell.updatePercentageView(with: percentage)
    
    return cell
}

额外注意点 #

• 处理total为0的情况：如果总金额是0，直接把百分比设为0，避免除以0的崩溃。
• layoutIfNeeded()：在更新约束后调用这个方法，确保Cell立即更新布局，避免滚动时的延迟。
• cell复用的重置：因为Cell会被复用，所以在updatePercentageView里必须处理隐藏/显示的状态，确保每个Cell显示正确的内容。

这样修改后，滚动时Cell的复用就不会再出现视图叠加和约束混乱的问题，占比为0的分类也会正确隐藏ImageView啦。

内容的提问来源于stack exchange，提问作者Niccolò Bonardi