如何防止未设置图片时Table View分组头部单元格显示图片

核心原因 #

UITableView的单元格复用机制导致了这个问题：当图片单元格被滑出屏幕或折叠后，会被回收复用为头部单元格，但之前设置的imageView图片、约束以及布局状态没有被清空，所以再次显示头部时会残留图片，且文本因为imageView的存在而自动右移。

具体修复步骤 #

1. 复用前强制重置单元格状态：清空所有可能影响布局的属性，避免复用残留。
2. 清理重复约束：每次添加新约束前，先移除旧约束，防止约束冲突和布局异常。
3. 明确区分两类单元格的布局：头部单元格强制隐藏并清空imageView，确保文本布局正常；图片单元格单独配置图片和对应约束。

修改后的完整代码 #

import UIKit

class expandedSection {
    let title: String
    var isOpened: Bool = false
    var image: UIImage!
    init(title: String, isOpened: Bool = false, image: UIImage) {
        self.title = title
        self.isOpened = isOpened
        self.image = image
    }
}

class AnalyticsViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet var buttons: [UIButton]!
    @IBOutlet weak var tableView: UITableView!
    var sectionImages = [UIImage(named: "graph1"), UIImage(named: "graph1")]
    private var sections = [expandedSection]()
    
    override func viewDidLoad() {
        sections.insert(expandedSection(title: "Title", image: sectionImages[0]!), at: 0)
        view.backgroundColor = UIColor(red: 127/255, green: 204/255, blue: 204/255, alpha: 1)
        super.viewDidLoad()
        self.tableView.register(UINib.init(nibName: "ExercisesTableViewCell", bundle: .main), forCellReuseIdentifier: "ExercisesTableViewCell")
        tableView.dataSource = self
        tableView.delegate = self
        self.navigationItem.title = "Progression"
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return sections.count
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        let section = sections[section]
        return section.isOpened ? 2 : 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: ExercisesTableViewCell = tableView.dequeueReusableCell(withIdentifier: "ExercisesTableViewCell", for: indexPath) as! ExercisesTableViewCell
        
        // 重置单元格状态，清除复用残留
        cell.textLabel?.text = ""
        cell.imageView?.image = nil
        cell.selectionStyle = .default
        // 移除之前添加的底部约束，避免冲突
        cell.imageView?.constraints.forEach { constraint in
            if constraint.firstAttribute == .bottom {
                constraint.isActive = false
            }
        }
        
        if indexPath.row == 0 {
            // 头部单元格配置
            cell.textLabel?.text = sections[indexPath.section].title
            cell.textLabel?.textColor = UIColor(red: 73/255, green: 72/255, blue: 178/255, alpha: 1)
            cell.imageView?.isHidden = true
        } else {
            // 图片单元格配置
            cell.selectionStyle = .none
            cell.imageView?.isHidden = false
            cell.imageView?.image = sections[indexPath.section].image
            cell.imageView?.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: 3).isActive = true
        }
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return indexPath.row != 0 ? 400.0 : 50
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        if indexPath.row == 0 {
            sections[indexPath.section].isOpened = !sections[indexPath.section].isOpened
            tableView.reloadSections([indexPath.section], with: .automatic)
        }
    }
}

额外优化建议 #

• 在自定义ExercisesTableViewCell类中提前设置imageView的基础约束，只在需要时调整显示/隐藏状态，避免动态添加约束的潜在问题。
• 给头部单元格和图片单元格设置不同的复用标识符（比如HeaderCell和ImageCell），彻底避免复用冲突，代码逻辑会更清晰。

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