Only image as UITabBarItem

Question

I would only like to have an icon as the UITabBarItem and not the text underneath and I was wondering if this was possible, if so, how? TIA

Answer 1

If you use story board, maybe you can use Image Inset from size inspector of bar item and set title to empty at the same time:

Answer 2

Setting the item's title to nil is often insufficient, because if you set the view controller's title it will set the title of the tabbar item also.

Instead, do this:

tabbarItem.titlePositionAdjustment = UIOffsetMake(0.f, 50.f);

Answer 3

You can use this Swift extension to define a new method tabBarItemShowingOnlyImage(), which will return any UITabBarItem modified to show only the image:

// helper for creating an image-only UITabBarItem
extension UITabBarItem {
    func tabBarItemShowingOnlyImage() -> UITabBarItem {
        // offset to center
        self.imageInsets = UIEdgeInsets(top:6,left:0,bottom:-6,right:0)
        // displace to hide
        self.setTitlePositionAdjustment(UIOffset(horizontal:0,vertical:30000))
        return self
    }
}

This extension builds from the advice offered in other comments.

It hides the title by displacing it, rather than setting it to nil, because sometimes other objects like the view controller itself will set the title to some value after the tab bar item is initialized. It centers the image by using the imageInsets to offset it by 6pt, a value I get just from eyeballing it on an iPhone 6 running iOS8.3.

I imagine that other devices and layout configurations might require a different offset correction, so a general solution would probably have to be more complex.

Answer 4

like this

UITabBarItem * personalBarItem = [[UITabBarItem alloc] init];
[personalBarItem setFinishedSelectedImage:[UIImage imageNamed:@"personal_click"] withFinishedUnselectedImage:[UIImage imageNamed:@"personal"]];

Answer 5

I know its been quite some time. But I might have a solution for this problem.

@ThiagoPires answer is useful only if the image is big enough to cover the title. In case if it isn't, then the title will be visible under the image.

I think that the easiest way to accomplish this, is by setting the title of the tabBarItem to "" in your view controllers code.

It is important to know that every time you change your view controllers title, the tabbaritem's title will be updated too. You could go fancy using KVO to observe the title's change and set "" to the tabbaritem title accordingly. But if you don't change it in many places in your code, you could just set it right in the place you change the ViewController's title.

Here is an example in swift:

override func viewDidLoad() {

    super.viewDidLoad()

    self.title = "View controller's Title"

    self.tabBarItem.title = ""
}

That's it. I hope that this could help.

Answer 6

Relevant docs (highlighting mine):

initWithTitle:image:tag: Creates and returns a new item using the specified properties.

- (id)initWithTitle:(NSString *)title image:(UIImage *)image tag:(NSInteger)tag

Parameters

title: The item’s title. If nil, a title is not displayed.

image: The item’s image. If nil, an image is not displayed. The images displayed on the tab bar are derived from this image. If this image is too large to fit on the tab bar, it is clipped to fit. The size of a tab bar image is typically 30 x 30 points. The alpha values in the source image are used to create the unselected and selected images—opaque values are ignored.

tag: The receiver’s tag, an integer that you can use to identify bar item objects in your application.

Return Value: Newly initialized item with the specified properties.