UIBarButtonItem使用图片时定位偏移问题求助

问题场景 #

使用以下代码创建UIBarButtonItem时，标题按钮显示正常，但图片按钮会出现向左偏移（左侧BarButtonItem同理会偏移）：

// 标题按钮（显示正常）
navigationItem.rightBarButtonItem = UIBarButtonItem(title: "123", style: .done, target: self, action: #selector(toggleInterfaceStyle))

// 图片按钮（位置偏移）
navigationItem.rightBarButtonItem = UIBarButtonItem(image: #imageLiteral(resourceName: "day"), style: .done, target: self, action: #selector(toggleInterfaceStyle))

可能原因 #

1. 系统内边距策略差异：系统对标题型和图片型UIBarButtonItem的内边距计算逻辑不同。标题按钮会自动适配导航栏边距与文字排版需求，而图片按钮的内边距基于图片原始尺寸和导航栏点击区域自动生成，导致视觉位置偏移。
2. 图片资源问题：如果图片采用模板渲染模式（Render As = Template Image），或本身带有多余透明边距，会导致系统计算按钮视觉范围时出现偏差。
3. 安全区域适配缺失：左右BarButtonItem的布局受导航栏安全区域影响，图片按钮未像文字按钮那样自动适配安全区域边距，进而产生偏移。

修复方案 #

方案1：手动调整图片内边距

直接修改UIBarButtonItem的imageInsets修正偏移，根据实际偏移量调整数值：

let imageBarButton = UIBarButtonItem(image: #imageLiteral(resourceName: "day"), style: .done, target: self, action: #selector(toggleInterfaceStyle))
// 右侧按钮向右偏移修正，左侧按钮则改为left: -10, right: 10
imageBarButton.imageInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: -10)
navigationItem.rightBarButtonItem = imageBarButton

方案2：用UIButton作为自定义视图包装

通过自定义UIButton完全控制按钮大小与位置，避免系统默认布局干扰：

let customButton = UIButton(type: .system)
customButton.setImage(#imageLiteral(resourceName: "day"), for: .normal)
customButton.addTarget(self, action: #selector(toggleInterfaceStyle), for: .touchUpInside)
customButton.frame = CGRect(x: 0, y: 0, width: 30, height: 30) // 根据需求调整大小
let barButtonItem = UIBarButtonItem(customView: customButton)
navigationItem.rightBarButtonItem = barButtonItem

方案3：检查并调整图片资源

• 打开Assets.xcassets，选中目标图片，将Render As设置为Original Image（无需模板化渲染时）。
• 确保图片本身无多余透明边距，必要时用图片编辑工具裁剪无效区域。

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