How to vertically center system images in a UITabBarController

Question

I'm trying to use the new SFSymbols for icons in my tab bar.

The images should be centered in their respective tab bar item, but they appear to be aligned to the top:

Here's an image from the View Hierarchy Debugger:

This is the code that is used to create the images:

class TabBarController: UITabBarController {
  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    children[0].tabBarItem.image = UIImage(systemName: "magnifyingglass")
    children[1].tabBarItem.image = UIImage(systemName: "ellipsis")
  }
}

Yes, exactly. I'd like to line up all the images and all the texts vertically — Xavier Lowmiller, May 13 '20 at 07:32
Have you tried something like this? https://stackoverflow.com/questions/16285205/moving-uitabbaritem-image-down — Alan Steiman, May 13 '20 at 07:41

score 0 · Answer 1 · answered May 13 '20 at 08:22

You can centre it vertically by specifying a baseline offset from the bottom, which is half the size of the font that you are using for the SFSymbol. In your case you are not specifying a font so it will be half the size of the default system font.

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

How to vertically center system images in a UITabBarController

1 Answers1