如何不使用自定义Cell或Nib，实现iOS设置App式TableViewCell图标

我想完全通过代码、不使用自定义Cell或Nib来复刻iOS设置App中左侧带SF Symbols图标的TableViewCell样式，但用系统UITableViewCell实现时，遇到了SF Symbols图标在ImageView里的尺寸适配和背景边框问题，达不到设置App的效果。

原始实现代码 #

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCell(withIdentifier: "cell")
        
        if cell == nil {
            cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
        }
        
        cell?.textLabel?.font = .systemFont(ofSize: 17, weight: .regular)
        cell?.accessoryType = .disclosureIndicator
        cell?.selectionStyle = .none
        
        let item = tableItems[indexPath.row]
        cell?.textLabel?.text = item.title

         //let config = UIImage.SymbolConfiguration(pointSize: 25, weight: .regular, scale: .small)
         //cell?.imageView?.image = UIImage(systemName: item.systemImageName, withConfiguration: config)?.withTintColor(.white, renderingMode: .alwaysOriginal)
        
        cell?.imageView?.image = UIImage(systemName: item.systemImageName)?.withTintColor(.white, renderingMode: .alwaysOriginal)

        cell?.imageView?.backgroundColor = tableItems[indexPath.row].backgroundColor
       
        if let imageView = cell?.imageView, imageView.transform == .identity {
           imageView.transform = imageView.transform.scaledBy(x: 0.50, y: 0.50)
           imageView.contentMode = .center
           imageView.layer.cornerRadius = 5
        }

        return cell!
    }

修复后的实现代码 #

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // 简化cell初始化逻辑
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") ?? UITableViewCell(style: .default, reuseIdentifier: "cell")
    
    // 基础文本与交互配置
    cell.textLabel?.font = .systemFont(ofSize: 17, weight: .regular)
    cell.accessoryType = .disclosureIndicator
    cell.selectionStyle = .none
    
    let item = tableItems[indexPath.row]
    cell.textLabel?.text = item.title
    
    // 精准配置SF Symbols图标
    let symbolConfig = UIImage.SymbolConfiguration(pointSize: 20, weight: .medium, scale: .medium)
    if let image = UIImage(systemName: item.systemImageName, withConfiguration: symbolConfig)?.withTintColor(.white, renderingMode: .alwaysOriginal) {
        cell.imageView?.image = image
    }
    
    // 匹配设置App的图标背景样式
    cell.imageView?.backgroundColor = item.backgroundColor
    cell.imageView?.layer.cornerRadius = 8 // 设置App原生圆角为8pt
    cell.imageView?.clipsToBounds = true // 确保背景色被圆角裁剪
    cell.imageView?.frame = CGRect(x: 0, y: 0, width: 36, height: 36) // 固定背景区域尺寸
    cell.imageView?.contentMode = .center // 保证图标居中显示
    
    return cell
}

关键改动说明 #

• 替换Transform缩放为SymbolConfiguration：直接通过符号配置定义图标尺寸、权重，避免transform缩放导致的图标模糊问题，完全匹配SF Symbols的原生渲染逻辑。
• 固定ImageView尺寸：系统默认imageView尺寸偏大，设置36x36的固定尺寸，和设置App中图标背景的标准大小一致。
• 开启clipsToBounds：必须添加该属性，否则背景色会超出圆角范围，导致圆角效果失效。
• 调整圆角值：设置App中图标背景的圆角为8pt，而非原始代码的5pt，更贴近原生视觉效果。

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