Как центрировать изображение символов SF по вертикали в UITabBarItem?

Question

Я использую изображения SF Symbols в качестве изображений вкладок в моем приложении для iOS, назначая их следующим образом:

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

В результате все изображения выравниваются по верхнему краю, но я бы хотел, чтобы они были центрированы по вертикали.

Что мне для этого нужно сделать?

Answer 1

По-видимому, символы SF по умолчанию отображаются с системным размером шрифта. Таким образом, если вы добавите смещение базовой линии в половину этого размера к символу многоточия, вы сможете почти идеально центрировать его по вертикали таким образом.

Это почти идеально только потому, что у символа многоточия есть собственная высота, которая не учитывается этим решением, даже если она небольшая.

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

Answer 2

Лучшее решение, которое сделает вашу кнопку идентичной tabBarSystemItem: .more, но с возможностью удаления заголовка и применения конфигурации, следующее:

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

Answer 3

Вы должны установить вставки изображений на UITabBarItem чтобы сместить значки вниз на 6 или 7 пикселей (в зависимости от размера значка).

В коде:

Я сделал это, создав подкласс UITabBarController и добавив этот код в конец моего viewDidLoad метод:

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

(Вы также можете сделать это в своих классах ViewController, если именно там вы настраиваете каждый из их элементов панели вкладок.)

В раскадровках:

Вы также можете сделать это с помощью раскадровки, выбрав свой TabBarItem в раскадровке и настроив вставки на информационной панели: