Swift：使用.flexibleSpace时UIToolbar内UIBarButtonItems无法居中如何解决？

问题描述 #

在UIKit应用中创建了包含5个按钮的UIToolbar，代码实现如下，但运行后按钮并未正确居中：

Toolbar类代码 #

class BrowserToolbar: UIToolbar {
  let goBackButton = UIBarButtonItem(image: UIImage(systemName: "chevron.left"), style: .plain, target: nil, action: nil)
  let goForwardButton = UIBarButtonItem(image: UIImage(systemName: "chevron.right"), style: .plain, target: nil, action: nil)
  let shareButton = UIBarButtonItem(image: UIImage(systemName: "square.and.arrow.up"), style: .plain, target: nil, action: nil)
  let bookmarkButton = UIBarButtonItem(image: UIImage(systemName: "book"), style: .plain, target: nil, action: nil)
  let tabsButton = UIBarButtonItem(image: UIImage(systemName: "square.on.square"), style: .plain, target: nil, action: nil)
  
  override init(frame: CGRect) {
    // If toolbar frame size is not set then autolayout breaks so we need to set it manually
    super.init(frame: CGRect(origin: .zero, size: CGSize(width: 100, height: 100)))
    setupButtons()
  }
  
  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
}

按钮布局代码 #

private extension BrowserToolbar {
  func setupButtons() {
    items = [
      goBackButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      goForwardButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      shareButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      bookmarkButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      tabsButton
    ]
  }
}

当前效果：

问题原因 #

当前的item排列逻辑是「按钮+弹性空间」循环，最后以按钮收尾。这种布局下，第一个按钮会贴紧Toolbar左侧边缘，最后一个按钮贴紧右侧边缘，中间按钮虽被弹性空间分开，但整体按钮组无法居中——因为Toolbar左右两侧没有弹性空间来平衡剩余宽度。

修复方案 #

在按钮组的首尾各添加一个.flexibleSpace类型的UIBarButtonItem，让左右两侧的弹性空间平分Toolbar的空余宽度，从而让中间的按钮组自动居中。

修改后的setupButtons()代码：

private extension BrowserToolbar {
  func setupButtons() {
    items = [
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      goBackButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      goForwardButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      shareButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      bookmarkButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
      tabsButton,
      UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    ]
  }
}

效果说明 #

首尾的弹性空间会自动填充Toolbar左右两侧的剩余空间，中间的5个按钮会被均匀分配的弹性空间隔开，最终实现整个按钮组在Toolbar中水平居中的效果。

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