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

Question

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

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

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

我需要为此做什么？

Answer 1

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

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

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

（您也可以在 ViewController 类中执行此操作，如果这是您配置每个标签栏项目的地方。）

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

Answer 2

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

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

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

Answer 3

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

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

How to center a SF Symbols image vertically in UITabBarItem?