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.

Lukas Kukacka · Answer 1 · 2017-12-14T08:37:40.190

186

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)

edited Dec 14 '17 at 08:37

answered May 15 '13 at 15:15

Lukas Kukacka

7,404
2
21
47

This solved my problem. I made a subclass of UITabBarController and iterated self.tabBar.items. – Fogh Oct 14 '13 at 11:09
3

@Lukas: but this shrinks images. – Sourabh Bhardwaj Jan 10 '14 at 06:38
1

@Sourabh Doesn't shrink them for me – TigerCoding Mar 13 '14 at 16:03
@Javy I was doing it wrong earlier..its working fine now. appologies i didn't update the comment. – Sourabh Bhardwaj Mar 14 '14 at 05:30
8

The actual inset value is 5.5f if you need it to be pixel perfect. – user Aug 06 '14 at 05:00
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 Jun 21 '15 at 06:48
this works fine, is there a way to also move the badge? I currently have a floating badge – rr1g0 Sep 18 '15 at 00:34
1

@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 – Lukas Kukacka Sep 18 '15 at 07:10
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? – eiskaltereistee Nov 23 '17 at 08:40
1

@Sourabh you have to offset the bottom with a negative value to not shrink the image. – Rmalmoe Aug 24 '18 at 17:36

Neil Galiaskarov · Answer 2 · 2016-08-01T10:38:28.880

153

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)

edited Aug 01 '16 at 10:38

answered Mar 20 '16 at 07:44

Neil Galiaskarov

4,760
2
23
45

nice and clean! – ken Nov 24 '17 at 13:58
Best of all the answers...Thank you so much @Neil Galiaskarov – Venkatesh Chejarla Nov 23 '18 at 12:07

Brian · Answer 3 · 2017-01-16T13:35:40.893

52

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)
}

edited Jan 16 '17 at 13:35

answered Feb 14 '14 at 08:09

Brian

26,298
13
78
84

this worked for me. just that for swift the method enumerateObjectsUsingBlock is not available any more – Junchao Gu Jun 21 '15 at 06:54
don't subclass, instead put this in to your AppDelegate – Laszlo Apr 22 '16 at 14:13
1

putting this snippet in `AppDelegate` also works, but it's not obviously better than subclassing it. You can have your own preference though :) – Brian Apr 25 '16 at 03:26

score 11 · Answer 4 · answered Mar 31 '18 at 06:29

11

This worked for me

Swift 4

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

answered Mar 31 '18 at 06:29

Ahmadreza

5,262
2
36
55

score 10 · Answer 5 · answered Mar 15 '16 at 11:33

10

If you're using Xamarin, this works:

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

answered Mar 15 '16 at 11:33

Jelle

356
2
11

krish · Answer 6 · 2017-11-09T05:56:06.167

2

SWIFT 3.0

You can set image lnsets, set top,left,bottom and right according desing.

self.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: 0, right: 0)

edited Nov 09 '17 at 05:56

answered Nov 09 '17 at 05:10

krish

2,498
19
25

score 2 · Answer 7 · answered Dec 13 '17 at 10:13

2

For iOS 11 you need to override TraitCollection method apart from setting ImageInsets. Please add the method in your subclassed UITabBarController class

public override UITraitCollection TraitCollection {
 get {
  return UITraitCollection.FromHorizontalSizeClass(horizontalSizeClass: UIUserInterfaceSizeClass.Compact);
 }
}

answered Dec 13 '17 at 10:13

Prashant

224
2
14

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. – Emmanuel Paris Jan 09 '18 at 20:30

score 0 · Answer 8 · answered Dec 25 '18 at 17:55

In Swift 4.2, UIEdgeInsetsMake is depricated, instead we should use UIEdgeInsets,

let array = tabBarController?.customizableViewControllers
    for controller in array! {
        controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: -5, right: 0)
    }

score 0 · Answer 9 · answered Dec 09 '20 at 15:57

These didn't work for me, the only solution that worked was setting the alignmentRectInsets when adding the image. Here's what mine looked like:

let newsView = NewsViewController()
let newsIcon = UITabBarItem(title: nil, image: UIImage(systemName: "newspaper")?.withAlignmentRectInsets(UIEdgeInsets(top: 8.5, left: 0, bottom: -8.5, right: 0)), tag: 0)
newsView.tabBarItem = newsIcon
let viewControllers = [newsNavController]
self.viewControllers = viewControllers

Moving UITabBarItem Image down?

9 Answers9

Linked