如何让资源目录SVG图片与SF Symbol在UITableView列中对齐？

核心原因 #

SF Symbols（通过UIImage(systemName:)创建）自带预设的对齐矩形内边距（alignmentRectInsets），确保在UI组件中统一对齐；而资源目录中的SVG图片默认无此内边距，对齐矩形与图片边界完全重合，导致在defaultContentConfiguration中比SF Symbols更靠左，进而挤压右侧文本错位。

有效解决方案 #

方案1：资源目录可视化配置对齐内边距

1. 打开Xcode的资源目录（Assets.xcassets），选中目标SVG图片。
2. 在右侧「Attributes Inspector」面板中，找到Alignment Rect Insets选项。
3. 参考SF Symbols的内边距值设置：
   • 先通过代码获取.medium尺度SF Symbol的内边距：

     let sfConfig = UIImage.SymbolConfiguration(scale: .medium)
     let sampleSfImage = UIImage(systemName: "circle", withConfiguration: sfConfig)!
     print(sampleSfImage.alignmentRectInsets) // 示例输出：UIEdgeInsets(top: 2, left: 2, bottom: 2, right: 2)
     

   • 将资源图片的Alignment Rect Insets设置为相同数值。

方案2：代码中统一对齐规则

若需动态适配，可在代码中获取SF Symbols的标准内边距，再应用到资源图片上：

// 1. 获取.medium尺度SF Symbols的标准内边距
let sfConfig = UIImage.SymbolConfiguration(scale: .medium)
let referenceSfImage = UIImage(systemName: "square", withConfiguration: sfConfig)!
let standardInsets = referenceSfImage.alignmentRectInsets

// 2. 处理资源图片
guard var assetImage = UIImage(named: "your-svg-asset-name") else { return }
// 若需和SF Symbols保持一致的模板渲染模式，开启此设置
assetImage = assetImage.withRenderingMode(.alwaysTemplate)
// 应用对齐内边距
assetImage = assetImage.withAlignmentRectInsets(standardInsets)

// 3. 赋值给单元格的内容配置
var cellConfig = cell.defaultContentConfiguration()
cellConfig.image = assetImage
cellConfig.attributedText = yourAttributedText
cell.contentConfiguration = cellConfig

常见问题说明

• 调用withAlignmentRectInsets无效的常见原因：资源图片未设置正确的渲染模式（如需模板模式时未开启），或SVG的viewBox未预留足够空间导致内边距无法生效。
• 确保SVG图片的尺寸与.medium尺度的SF Symbols匹配（通常为24x24pt），避免因尺寸差异引发对齐偏移。

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