CODEWITHSUNDEEP
iosswiftuitabbarcontrollertabbarswift5
Dan
Dan

Reputation: 2344

Tab Bar icons too small despite being correct size

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

Upvotes: 2

Views: 2738

Answers (2)

Theo
Theo

Reputation: 3995

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.

Upvotes: 2

Amyth
Amyth

Reputation: 383

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?

Upvotes: 4

Related Questions