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

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 3

if you just set the image and pass nil to title, the image will be displayed at the top level of the UITabBar item. You have to set the position also.

int offset = 7;
UIEdgeInsets imageInset = UIEdgeInsetsMake(offset, 0, -offset, 0);

After you set icon image for TabBarItem, you set the property value to change the image position, doing:

uiViewController.tabBarItem.imageInsets = imageInset;

Answer 4

like this

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

Answer 5

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 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.