Displaying images in UITabBarController - UPDATED

Question

I am trying to put an image in my UI. the Controllers present as the UITabBarItem are UINavigationControllers. When i am trying to put images, on them, the result is not looking good. I am getting only half images, and the images show no color.

enter image description here

the 3 images that i have used are .png images having dimensions 50X50.

here is the code that i have used

self.custCareVC = [[CustomerCareViewController alloc] initWithNibName:@"CustomerCareViewController_iPhone" bundle:NULL];
        self.POController = [[PurchaeOrderViewController alloc] initWithNibName:@"PurchaeOrderViewController_iPhone" bundle:NULL];
        self.accAndContactsController = [[AccountsAndContactsViewController alloc] initWithNibName:@"AccountsAndContactsViewController_iPhone" bundle:NULL];

self.customerCareNavController = [[UINavigationController alloc] initWithRootViewController:self.custCareVC];
    self.customerCareNavController.title = @"Customer Service";

    self.purchaseOrderNavController = [[UINavigationController alloc] initWithRootViewController:self.POController];
    self.purchaseOrderNavController.title = @"PO";

    self.accAndContactsNavController = [[UINavigationController alloc] initWithRootViewController:self.accAndContactsController];
    self.accAndContactsNavController.title = @"Accounts And Contacts";

    self.tabBarController = [[UITabBarController alloc] init];
    self.tabBarController.viewControllers = [NSArray arrayWithObjects:self.customerCareNavController, self.accAndContactsNavController, self.purchaseOrderNavController, nil];

    UIImage *selectedImage0     = [UIImage imageNamed:@"cust_serv_bw_selected.png"];
    UIImage *unselectedImage0   = [UIImage imageNamed:@"cust_serv_bw.png"];

    UIImage *selectedImage1     = [UIImage imageNamed:@"contacts_bw_selected.png"];
    UIImage *unselectedImage1   = [UIImage imageNamed:@"contacts_bw.png"];

    UIImage *selectedImage2     = [UIImage imageNamed:@"po_bw_selected.png"];
    UIImage *unselectedImage2   = [UIImage imageNamed:@"po_bw.png"];

    UITabBar     *tabBar = self.tabBarController.tabBar;
    UITabBarItem *item0  = [tabBar.items objectAtIndex:0];
    UITabBarItem *item1  = [tabBar.items objectAtIndex:1];
    UITabBarItem *item2  = [tabBar.items objectAtIndex:2];

    item0.image = unselectedImage0;
    item0.selectedImage = selectedImage0;

    item1.image = unselectedImage1;
    item1.selectedImage = selectedImage1;

    item2.image = unselectedImage2;
    item2.selectedImage = selectedImage2;

    self.tabBarController.selectedViewController = self.customerCareNavController;

How can i correct this. Why is this happening?

i used @2x now and tried with both 30x30 and 50x50 images.. but still not working — Shradha, Dec 09 '13 at 13:56

Pull · Accepted Answer · 2013-12-09T14:19:03.157

1

I will answer with more precision here.

The documentation says that the tab bar image is usually 30x30, but I've found that the best size to setup the images is 48x32 pixels. This size still renders and gives you a bit more space.

The image is a PNG with transparency, only the mask is used. The UI renders the mask gray when unselected or blue/chrome when selected.

If you are working with retina display, you need to add image with twice the size and with the name : myimage@2x.png.

If you want to change the color of item, there is some sample code : Cocoa control TabBarController

edited Dec 09 '13 at 14:19

answered Dec 09 '13 at 13:01

Pull

2,236
2
16
32

No.. i did not use @2x.. will try this and let you know – Shradha Dec 09 '13 at 13:05
i added @2x, and the result i got has been updated in my question.. still did not get what i need.. – Shradha Dec 09 '13 at 13:25
In the tabbar, the selected image is blue, the other are gray even if they had color. Cocoa put a mask on it to make it gray, and you will have to custom the tabbarcontroller to change that behaviour. Your image will have to be 30x30, png and without text in it. – Pull Dec 09 '13 at 13:55
Yes.. exactly.. custom the tab bar controller?? does that mean i will have to make a custom tab bar controller now?? isn't there any way to stop my image from masking?? – Shradha Dec 09 '13 at 13:59
You will be able to change the background color but not the item color. I never saw a way to do it easily, I think the only way is searching how to customise the tabbarcontroler. Good luck it is not gonna be easy : this will maybe help you : https://www.cocoacontrols.com/search?utf8=%E2%9C%93&q=tabbarcontroller ! – Pull Dec 09 '13 at 14:17
i don't want to change the item color, but just want the tabbarcontroller to show the image as-it-is.. will try out the link you have posted – Shradha Dec 09 '13 at 14:24
I understood what you want, but the behavior is like that, there is a mask and you can't change that. Maybe you will find a tabBarController in cocoa control like you want. – Pull Dec 09 '13 at 14:29
If it help you don't forget to validate and up-vote, thanks you. – Pull Dec 10 '13 at 08:41

score 0 · Answer 2 · edited Dec 09 '13 at 13:30

0

UINavigationController *lNavigationProgressController=[[UINavigationController alloc] initWithRootViewController:yourViewController];                                                       

[lNavigationProgressController.tabBarItem setImage:[UIImage imageNamed:@"yourImage.png"]];

edited Dec 09 '13 at 13:30

Adrian P

6,479
4
38
55

answered Dec 09 '13 at 13:23

Jyothi

384
1
3
10

score 0 · Answer 3 · answered Dec 09 '13 at 13:32

Have a look to get right sized images: iOS Human Interface Guidelines: Icon and Image Sizes

And if you want to use larger sized images, use the code

    [item0 setImageInsets:UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)];

for each tabBarItem. This just like using padding in HTML.

And to give color to the images and text, use the code snippet and change as you needed:

    NSDictionary *attributeDictionary = [NSDictionary dictionaryWithObject:[UIColor darkGrayColor] forKey:UITextAttributeTextColor];
    [[UITabBarItem appearance] setTitleTextAttributes:attributeDictionary forState:UIControlStateNormal];
    UIColor *titleHighlightedColor = UIColorFromRGBAlphaOne(0xBD1550);
    attributeDictionary = [NSDictionary dictionaryWithObject:titleHighlightedColor forKey:UITextAttributeTextColor];
    [[UITabBarItem appearance] setTitleTextAttributes:attributeDictionary forState:UIControlStateSelected];

The methods are easily understandable by name.

But using 'setImageInset' is not a good approach, as the images will be pixelated in non-ratina devices. Using well sized images, as described in link, is the good & standard approach. — Ravi Sisodia, Dec 09 '13 at 13:34

Displaying images in UITabBarController - UPDATED

3 Answers3