CODEWITHSUNDEEP
iphoneobjective-cuitabbar
user437038
user437038

Reputation:

Only image as UITabBarItem

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

Upvotes: 23

Views: 14270

Answers (9)

OscarVGG
OscarVGG

Reputation: 2670

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.

Upvotes: 3

Armanoide
Armanoide

Reputation: 1344

REMOVE THE TITLE

The easy way with inspector

  • Select your TabbarItem
  • In Title Position change to Custom Offset
  • Set vertical to 100
  • Done

enter image description here

Fix IMAGE

Adjuste the image

  • Select your TabbarItem
  • define your Top and Bottom

enter image description here

Upvotes: 26

algal
algal

Reputation: 28104

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.

Upvotes: 8

Guangming Mao
Guangming Mao

Reputation: 775

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:

enter image description here

Upvotes: 25

Bart Whiteley
Bart Whiteley

Reputation: 1426

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

Upvotes: 14

Dracuuula
Dracuuula

Reputation: 313

like this

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

Upvotes: 0

Pradhyuman sinh
Pradhyuman sinh

Reputation: 3928

Try with below code:

UIViewController *viewController1=[[RootViewController alloc]initWithNibName:@"RootViewController" bundle:nil];
UIViewController *viewController2=[[SecondViewCtr alloc]initWithNibName:@"SecondViewCtr" bundle:nil];
UIViewController *viewController3=[[ThirdViewCtr alloc]initWithNibName:@"ThirdViewCtr" bundle:nil];
UIViewController *viewController4=[[FourthVIewCtr alloc]initWithNibName:@"FourthVIewCtr" bundle:nil];
UIViewController *viewController5=[[FIfthViewCtr alloc]initWithNibName:@"FIfthViewCtr" bundle:nil];


UINavigationController *nav1 = [[UINavigationController alloc] initWithRootViewController:viewController1];
UINavigationController *nav2 = [[UINavigationController alloc] initWithRootViewController:viewController2];
UINavigationController *nav3 = [[UINavigationController alloc] initWithRootViewController:viewController3];
UINavigationController *nav4 = [[UINavigationController alloc] initWithRootViewController:viewController4];
UINavigationController *nav5 = [[UINavigationController alloc] initWithRootViewController:viewController5];
peekArray = [[NSMutableArray alloc] init];

self.tabBarController = [[UITabBarController alloc] init];
self.tabBarController.viewControllers = [NSArray arrayWithObjects:nav1, nav2,nav3,nav4,nav5, nil];

UITabBar *tabBar = _tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];
UITabBarItem *tabBarItem5 = [tabBar.items objectAtIndex:4];

[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"home123.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"home_112.png"]];
[tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"gift123.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"gift_112.png"]];
[tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"cam12.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cam_112.png"]];
[tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:@"message12.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"message_112.png"]];
[tabBarItem5 setFinishedSelectedImage:[UIImage imageNamed:@"people12.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"people_112.png"]];

[self.tabBarController setSelectedIndex:0];
self.window.rootViewController = self.tabBarController;

Upvotes: 0

Thiago Pires
Thiago Pires

Reputation: 621

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;

Upvotes: 18

user529758
user529758

Reputation:

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.

Upvotes: 1

Related Questions