How to layout tabBar items?

Question

I need to layout tab bar custom icon items, but I don't know how I can do this properly, here are the visual issues I'm having with icon and text:

I want to indent 20 pх for image from the top edge of Tab Bar and 20 px for title text from image. Code below...

My code in Xcode 11.5

 let navigationVC = UINavigationController(rootViewController: rootVC)
    navigationVC.tabBarItem.image = UIImage(named: TBimageName)
    navigationVC.tabBarItem.title = TBTitle

    navigationVC.tabBarItem.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -16, right: 0)

    rootVC.navigationItem.title = TBTitle

I can configure the image display through the "imageInsets" but in this case, my title stays in its place and overlaps the image.

I don't know how I can fix this. Maybe I can used some method to layout for tabBarItem.title?

Does this answer your question? [TabBarItems and setting their image sizes?](https://stackoverflow.com/questions/29874499/tabbaritems-and-setting-their-image-sizes) — denis_lor, Jun 06 '20 at 19:47
Hi Stenly Resly. Please [edit] your question and post a minimal version of your code that reproduces the issue. Posting as an image makes it harder to reproduce for others and also means it isn't searchable. — Dijkgraaf, Jun 06 '20 at 21:14

denis_lor · Accepted Answer · 2020-06-07T12:30:24.427

Please remove the navigationVC.tabBarItem.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -16, right: 0) which most probably won't look really appropriate (scale) on iPhone SE compared to iPhone 11 Pro Max and use smaller images.

You should be using images starting at 1x as of 23px x 23px or 25px x 25px, try it out and check which one best fit your visual requirements (I don't know which image processing software are you using but it should give you the ability to export your original image starting from your version (1x) to 2x, 3x). For example if you choosed to have your 1x icon as of 23x23px, your 2x should be 46x46px and your 3x 69x69px.

If you want to play with spaces, just play with the images padding, so have icons that have transparent padding on top/bottom for example.

For more about using custom icons in Tab Bar, check the Tab Bar Icon Size guidelines.

How to layout tabBar items?

1 Answers1