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

Question

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?

Swafford

Answer 1

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!

Parallelogram

So you're suggesting just adding the divider image to the main image? – Swafford

I guess...I'm suggesting that you have 2 images for each tab. Selected and Unselected. The divider can be included in the image as well. This way you can create any effect that you desire. Animations included. – Parallelogram

It can be included in the images of the tabs. – Parallelogram

@Parallelogram what width and height of image? – Declarative

in this case, which will be the size of icons? I have 30x30 for icon.png and 60x60 for [email protected] – Telstar

I don't know why this poor answer is adopted – Lemuelah

Answer 2

i put my tab bar image like :-

and i set it on tap bar like:-

  CGRect frame = CGRectMake(0.0, 0.0, 320, 48);
        NSLog(@"%f",frame.size.width);
        UIView *v = [[UIView alloc] initWithFrame:frame];
        // [v setBackgroundColor:DARK_BACKGROUNDTabBar];
        UIImageView *imgView =[[UIImageView alloc]initWithFrame:frame];
        UIImage *img1 = [UIImage imageNamed:@"tabbar.png"];
        [imgView setImage:img1];
        [v addSubview:imgView];

        [v setAlpha:1];
        [[self.tabBarController tabBar] insertSubview:v atIndex:1];
        [v release];

hope its use-full for you

you can create your own image with 4 or 5 tab and set like above

Codling

You should use a divider image between tab items. – Welby

Answer 3

If all you want is to give the tabs a "selected" and a "normal" background image (which include one half of the divider left and right) you could subclass UITabBarController and during viewDidLoad replace the UITabBar with UIButtons. It's pretty straight forward. The images are set as the background of the buttons. They contain 4px of the divider on the left and the right side.

I am using this with a storyboard so the self.tabBar.items array is already populated when viewDidLoad is called.

@interface MyTabBarController()
@property (nonatomic,strong) UIImage *selectedImage;
@property (nonatomic,strong) UIImage *normalImage;
@end

@implementation MyTabBarController
@synthesize selectedImage, normalImage;

- (void) viewDidLoad
{
    [super viewDidLoad];

    // set whichever view you want to start with
    self.selectedIndex = 1;

    self.tabBar.hidden=YES;

    // those are the images used for the selected and not selected tabs
    self.selectedImage = [[UIImage imageNamed:@"tabBarBackground_down.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
    self.normalImage = [[UIImage imageNamed:@"tabBarBackground.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];

    CGFloat width = self.view.frame.size.width/[self.tabBar.items count];
    for( int itemIndex=0; itemIndex<[self.tabBar.items count]; itemIndex++ )
    {
        UITabBarItem *item = [self.tabBar.items objectAtIndex:itemIndex];

        // create a button
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;

        // configure the button to act as a tab
        button.adjustsImageWhenHighlighted = NO;
        [button setImage:item.image forState:UIControlStateNormal];
        [button setBackgroundImage:self.selectedIndex==itemIndex?self.selectedImage:self.normalImage forState:UIControlStateNormal];

        // this is used later to set the selectedIndex of the UITabBarController
        button.tag = itemIndex;

        // position the button in place of tab
        CGFloat nextXStart = itemIndex+1==[self.tabBar.items count]?self.view.frame.size.width:rint(width*(itemIndex+1));
        button.frame = CGRectMake(rint(width*itemIndex), self.view.frame.size.height-49, nextXStart-rint(width*itemIndex) , 49);

        [self.view addSubview:button];

        // add event to the button
        [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchDown];
    }
}

- (void) buttonClicked:(id)sender
{
    UIButton *button = sender;
    if( self.selectedIndex!=button.tag )
    {
        // select the tab and change the visible viewcontroller
        self.selectedIndex = button.tag;

        // reset all but the active buttons to have the normal image
        for( UIView *subview in self.view.subviews )
        {
            if( subview!=sender && [subview isKindOfClass:[UIButton class]])
                [((UIButton *)subview) setBackgroundImage:self.normalImage  forState:UIControlStateNormal];
        }

        // set the selectedImage as background of the clicked button
        [button setBackgroundImage:self.selectedImage  forState:UIControlStateNormal];
    }
}
@end

Cacomistle