Moving UITabBarItem Image down?

Question

Normally on each tab of a UITabBar you have a small image and a title naming the tab. The image is positioned/centred towards the top of the tab to accommodate the title underneath. My question is: if you want to have a tabBar with just an image and no title is there a way to move the image down so it centers better within the tab?

I am using (see below) currently:

[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];

but would prefer to use to larger image with no title, at the moment if I make the image bigger than about 70pixels@2x it starts edging off the top of the UITabBar whilst leaving a lot of unused space at the bottom.

Solution 1

Try adjusting tabBarItem's imageInsets (for moving the icon image) and setting the controllers title to nil (so no title is displayed). Put something like this to -init or -viewDidLoad method in view controller:

Objective-C

self.tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
self.title = nil;

Swift

self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
self.title = nil

UITabBarItem is a subclass of UIBarItem which has UIEdgeInsets imageInsets property. Play a little with the insets until it looks good (depending on your tabbar icon images)

iPad specific adjustments

Tab Bar items on iPad are distributed horizontally (icon and label next to each other).

To adjust space between icon and label, adjust horizontal imageInsets instead of vertical ones.

Solution 2

You can do it via storyboard too. Select your tabbaritem, go to size inspector and assign the appropriate insets.

*Demonstrated on Xcode, Version 7.3.1 (7D1014)

Solution 3

Make a subclass of UITabBarController, and in its viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.viewControllers enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL *stop) {
        vc.tabBarItem.title = nil;
        vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);
    }];
}

Swift 3:

for vc in self.viewControllers! {
    vc.tabBarItem.title = nil
    vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

Solution 4

This worked for me

Swift 4

let array = tabBarController?.customizableViewControllers
for controller in array! {
    controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

Solution 5

If you're using Xamarin, this works:

screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";

View more solutions

Comments

[Fogh]

This solved my problem. I made a subclass of UITabBarController and iterated self.tabBar.items.

[Sourabh Bhardwaj]

@Lukas: but this shrinks images.

[TigerCoding]

@Sourabh Doesn't shrink them for me

[Sourabh Bhardwaj]

@Javy I was doing it wrong earlier..its working fine now. appologies i didn't update the comment.

[user]

The actual inset value is 5.5f if you need it to be pixel perfect.

[Junchao Gu]

where should this method be placed at? I mean I need to customise 3 tabbaritems but I can only customise one item in one viewDidLoad of the entry of tabs right?

[Junchao Gu]

this worked for me. just that for swift the method enumerateObjectsUsingBlock is not available any more

[rr1g0]

this works fine, is there a way to also move the badge? I currently have a floating badge

[Lukas Kukacka]

@rr1g0 Moving the badge to custom position is not possible. If you need custom position of a badge or custom badge appearance, you must implement it yourself

[Laszlo]

don't subclass, instead put this in to your AppDelegate

[Brian]

putting this snippet in AppDelegate also works, but it's not obviously better than subclassing it. You can have your own preference though :)

[jonahbohlmann]

I used this too. Worked fine for iOS 9, 10 and 11 (iPhone 8). But with iPhone X it has no effect. Noting changed. Any Idea about that?

[ken]

nice and clean!

[Emmanuel Paris]

Good tip that helped me solve an issue related to the image position for tab bar item on iPad and iOS 11. But it's too harsh to override the trait collection at the view controller level, it's better to subclass the UITabBar class and override the traitCollection property there. Also returning a trait collection with only the horizontal class, will drop other trait collection properties. return UITraitCollection(traitsFrom: [ super.traitCollection, UITraitCollection(horizontalSizeClass: .compact)]) did the trick for me.

[Rmalmoe]

@Sourabh you have to offset the bottom with a negative value to not shrink the image.

[Venkatesh Chejarla]

Best of all the answers...Thank you so much @Neil Galiaskarov

[dreampowder]

thanks a lot, i've been searching for hours and trying to figure out why it didn't worked for me because i was using sf symbols