How to center a SF Symbols image vertically in UITabBarItem?

Question

I am using SF Symbols images as tab images in my iOS app by assigning them as follows:

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

This results in all images being top-aligned, but I would like to have them centered vertically.

What do I have to do for this?

dasonntag · Accepted Answer · 2020-01-14T10:20:17.347

9

Apparently SF symbols are rendered with system font size by default. So if you add a baseline offset of half that size to the ellipsis symbol you could almost perfectly center it vertically that way.

It's only almost perfect because ellipsis symbol has a height of its own which is not accounted for by this solution, even if it is not much.

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

edited Jan 14 '20 at 10:20

answered Jan 14 '20 at 10:12

dasonntag

106
1
4

For some symbols the right offset must be chosen manually - but yes, that's the right solution. Thanks! – iosdeveloper Jan 15 '20 at 11:33
Finally a solution that works. Thanks a lot! Ps. min iOS 13 required. – Pomo-J Dec 15 '20 at 17:02

score 1 · Answer 2 · answered Feb 20 '21 at 23:27

The best solution, which will make your button identical to "tabBarSystemItem: .more", but with the possibility of removing the title and applying Configuration is the following:

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

score 0 · Answer 3 · answered Nov 21 '19 at 15:50

You have to set the image insets on the UITabBarItem to shift your icons down 6 or 7px (depending on your icon size).

In code:

I've done this by creating a subclass of UITabBarController and adding this code to the bottom of my viewDidLoad method:

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

(You could also do this in your ViewController classes, if that's where you configure each of their tab bar items.)

In storyboards:

You can also do it using storyboards by selecting your TabBarItem in the storyboard and adjusting the insets in the info panel:

Unfortunately, it seems that imageinset values from the storyboard are not applied to SF Symbols images. — Thomas Walther, Jan 29 '20 at 10:21

How to center a SF Symbols image vertically in UITabBarItem?

3 Answers3

In code:

In storyboards:

Linked