Search code examples
iphoneiosuitabbarcontrollerdivider

How can I add a custom divider image to the UITabBar?


I have a UITabBar that I am trying to style after the new iOS 6 App Store look. I have some pretty good looking gradients, but I am wondering how to set the divider image.

Aside from manually adding the line to each image, is there anything I can do to reproduce the divider look?

enter image description here

enter image description here

enter image description here


Solution

  • You can add an image for each item , for the selected and unselected states. Like this:

        UIImage *selectedImage0     = [UIImage imageNamed:@"image1.png"];
        UIImage *unselectedImage0   = [UIImage imageNamed:@"image1_unselected.png"];
    
        UIImage *selectedImage1     = [UIImage imageNamed:@"image2.png"];
        UIImage *unselectedImage1   = [UIImage imageNamed:@"image2_unselected.png"];
    
        UIImage *selectedImage2     = [UIImage imageNamed:@"image3.png"];
        UIImage *unselectedImage2   = [UIImage imageNamed:@"image3_unselected.png"];
    
        UIImage *selectedImage3     = [UIImage imageNamed:@"image4.png"];
        UIImage *unselectedImage3   = [UIImage imageNamed:@"image4_unselected.png"];
    
        UIImage *selectedImage4     = [UIImage imageNamed:@"image5.png"];
        UIImage *unselectedImage4   = [UIImage imageNamed:@"image5_unselected.png"];
    
        UITabBar     *tabBar = self.tabBarController.tabBar;
        UITabBarItem *item0  = [tabBar.items objectAtIndex:0];
        UITabBarItem *item1  = [tabBar.items objectAtIndex:1];
        UITabBarItem *item2  = [tabBar.items objectAtIndex:2];
        UITabBarItem *item3  = [tabBar.items objectAtIndex:3];
        UITabBarItem *item4  = [tabBar.items objectAtIndex:4];
    
        [item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
        [item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
        [item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
        [item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
        [item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];
    

    You can place this code in the viewDidLoad method of any of your controllers. Hope this helps.

    Cheers!