如何让UIContextualAction按钮的图片正常显示？

嘿，我之前也踩过UIContextualAction图片显示的坑！结合你用Sketch做图的情况，大概率是图片的渲染模式、格式或者尺寸没适配iOS的要求，给你几个针对性的解决办法：

先把你的代码整理出来方便参考：

let action = UIContextualAction(style: .normal, title: "Guestlist") { (action, actionView ,completion) in
    completion(true)
}
action.image = #imageLiteral(resourceName: "GuestList")
// action.backgroundColor = .purple
return action

1. 调整Sketch的图片导出设置 #

UIContextualAction对图片的要求比较特殊，它默认会把图片当成**模板图（Template Image）**处理，但Sketch导出的图如果没做对应设置，就容易显示异常：

• 导出时选择PNG格式，并且确保图标是**单色（推荐白色）**设计——因为模板图只会保留alpha通道，最终颜色由iOS系统或你手动设置的tintColor控制。
• 导出尺寸建议用24pt×24pt（对应@2x是48px，@3x是72px），这个尺寸刚好适配侧滑按钮的大小，避免图片被过度拉伸变形。

2. 在Xcode中设置图片渲染模式 #

把图片导入Xcode的Assets后，选中图片，在右侧属性面板找到Render As选项，将其改成Template Image。这样图片就会自动适配UIContextualAction的渲染规则，不会出现颜色跑偏、显示不全的问题。

3. 代码层面强制转换图片渲染模式 #

如果不想修改Assets的设置，也可以在代码里直接把图片转换成模板模式，还能自定义图标颜色：

let action = UIContextualAction(style: .normal, title: "Guestlist") { (action, actionView ,completion) in
    completion(true)
}
// 将原图转换为模板模式
let guestListImage = #imageLiteral(resourceName: "GuestList").withRenderingMode(.alwaysTemplate)
action.image = guestListImage
// 设置图标颜色
action.tintColor = .white
// 建议打开背景色注释，和图标颜色搭配更协调
action.backgroundColor = .purple
return action

4. 检查图片宽高比 #

如果你的图标是长条形或宽高比差距很大的设计，UIContextualAction的方形按钮会把它拉伸变形。回到Sketch里调整图标，尽量做成正方形或接近正方形的比例，显示效果才会正常。

按照上面的步骤调整后，你的侧滑按钮图片应该就能正常显示啦！

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