如何在 UITabBarItem 中垂直居中 SF Symbols 图像？答案

【问题标题】：How to center a SF Symbols image vertically in UITabBarItem?如何在 UITabBarItem 中垂直居中 SF Symbols 图像？
【发布时间】：2020-01-30 18:25:14
【问题描述】：

我在我的 iOS 应用程序中使用 SF Symbols 图像作为标签图像，方法如下：

self.tabBarItem.image = UIImage(systemName: "ellipsis")

这会导致所有图像顶部对齐，但我希望它们垂直居中。

我该怎么做？

【问题讨论】：

标签： ios uikit uitabbar uitabbaritem sf-symbols

【解决方案1】：

显然 SF 符号默认使用系统字体大小呈现。因此，如果您将一半大小的基线偏移量添加到省略号符号，您几乎可以完全以这种方式将其垂直居中。

它几乎是完美的，因为省略号符号有它自己的高度，这个解决方案没有考虑到，即使它并不多。

self.tabBarItem.image = UIImage(systemName: "ellipsis")!.withBaselineOffset(fromBottom: UIFont.systemFontSize / 2)

【讨论】：

对于某些符号，必须手动选择正确的偏移量 - 但是是的，这是正确的解决方案。谢谢！
终于找到了一个可行的解决方案。非常感谢！附言。至少需要 iOS 13。

【解决方案2】：

使您的按钮与“tabBarSystemItem: .more”相同但可以删除标题并应用配置的最佳解决方案如下：

self.tabBarItem.image = UIImage(systemName: "ellipsis", withConfiguration: 
UIImage.SymbolConfiguration(weight: .black))!.imageWithoutBaseline()

【讨论】：

【解决方案3】：

您必须在 UITabBarItem 上设置图片插入，以将您的图标向下移动 6 或 7 像素（取决于您的图标大小）。

在代码中：

我通过创建UITabBarController 的子类并将此代码添加到我的viewDidLoad 方法的底部来完成此操作：

tabBar.items?.forEach({
  $0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
})

（您也可以在 ViewController 类中执行此操作，如果您在其中配置每个选项卡栏项。）

在故事板中：

您也可以通过在情节提要中选择 TabBarItem 并调整信息面板中的插图来使用情节提要：

【讨论】：

不幸的是，故事板中的 imageinset 值似乎不适用于 SF Symbols 图像。