Tab Bar icons too small despite being correct size

2
votes

My tab bar controller is using custom image icons at 75x75 but they are appearing to small.

They look like they are not using the full height of the tab bar and I can't figure out why. If I go up in size to 150x150 the icon doesn't utilize the space below, but instead overlaps the top border and encroaches on the rest of the view.

How can I tell the icons to full center and use all the tab bar height available to them?

enter image description here

The Asset Catalog for the home tab image looks like so:

enter image description here

2
iosswiftuitabbarcontrollertabbarswift5
Can you show how the images look in the asset catalogue? – Andrew
Sure @Andrew I'll update the OP – Dan James Palmer
The image has white spaces around it. You need to crop the image – Manav
You might want to run this in a simulator for iPhone 8 (or any other square screen device) so you can see everything without the safe area interfering. – Barnyard
@Manav thanks, I'll give this a go! – Dan James Palmer

2 Answers

4
votes

Image icons of 75x75 px should be fine for @3x devices. If the title is nil, image will not expand on itself.

However you can shift the image using offset property.

Go to Size Inspector in storyBoard, and change image inset's Bottom offset.

Refer to this link for more info

Moving UITabBarItem Image down?

2
votes

The image you posted actually looks correct. The tab bar respects the Safe Area of the screen, and the tab bar buttons have the default distance to the home indicator on the bottom.

As a comparison, here is the tab bar of the App Store app:

enter image description here

When overlaid with your screenshot, you can see that the icon positions are the same:

enter image description here

You could improve the visual design by providing titles to your tabs.

If you wish to keep the tab bar buttons without titles, you could adjust the image insets as described here: Remove tab bar item text, show only image.

Make sure to test your solution on devices with different safe areas (e.g. iPhone 8) and with different device orientations, if supported.

Note that with this approach you are working against the intended design of UITabBarController. A more robust and flexible solution for this would probably to replace the UITabBarController by a custom UIViewController subclass.