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.

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?

Answer 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

Answer 2

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

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

Answer 3

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.