Swift iOS开发中如何调整导航栏按钮项实现水平对齐

问题场景 #

配置导航控制器的左右栏按钮后，两个按钮未完全水平对齐，实际效果如下：

原有实现代码：

navController.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: 
.plain, target: nil, action: nil)

self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Skip", style: 
.plain, target: nil, action: nil)
self.navigationItem.rightBarButtonItem!.tintColor = .red

问题原因 #

系统默认的返回栏按钮自带内置边距与返回箭头的垂直位置偏移，和右侧纯文本栏按钮的文字基线位置不统一，因此出现视觉上不对齐的情况。

可落地调整方案 #

• 方案1：通过标题位置偏移属性微调对齐
  调用UIBarButtonItem的setTitlePositionAdjustment方法，给两个按钮设置统一的垂直偏移量即可快速对齐，偏移数值可根据实际显示效果微调，参考代码：

  // 配置返回按钮
  let backItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
  backItem.setTitlePositionAdjustment(UIOffset(horizontal: 0, vertical: -2), for: .default)
  navController.navigationItem.backBarButtonItem = backItem
  
  // 配置右侧Skip按钮
  let skipItem = UIBarButtonItem(title: "Skip", style: .plain, target: nil, action: nil)
  skipItem.tintColor = .red
  skipItem.setTitlePositionAdjustment(UIOffset(horizontal: 0, vertical: -2), for: .default)
  self.navigationItem.rightBarButtonItem = skipItem
  

  一般垂直偏移值设置在-1~-3区间即可匹配系统导航栏的视觉对齐标准。

• 方案2：自定义栏按钮视图实现精准对齐
  如果微调偏移无法满足要求，可以放弃系统默认的UIBarButtonItem样式，用自定义UIButton包装成栏按钮项，统一设置内部文字的字体、边距、垂直位置，从根源消除系统控件内置边距带来的错位问题。

• 方案3：检查自定义返回图标尺寸
  如果之前自定义过返回箭头图标，需要确认图标本身的上下留白均匀、视觉重心居中，避免图标自身的绘制偏差导致看起来不对齐。

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