It’s been a while I haven’t written anything about iPhone :) Anyways, today I added a fancy UITabBar (like in #Tweetie 2) to one of my applications. I thought I would share the code since I saw lots of iPhone Dev folks are looking for this :)

Initially I started googling, then I ended up a StackOverflow entry says you have to Roll it :) Since my need was just placing an indicator on top of the UITabItem, I didn’t go for that way.

Here is how I did:

First, I created an UIImageView which has the indicator icon. Then I added this view to my UITabBar as subview.

UIImage *upArrow = [UIImage imageNamed:@"up-arrow.png"];
UIImageView *imageView=[[UIImageView alloc] initWithImage:upArrow];
imageView.tag = ICON_TAG;
[upArrow release];
[self.tabBarController.tabBar addSubview:imageView];

This wasn’t quite enough for my need since I needed indicator to be centered. So I did some math :)

int itemCount = [self.tabBarController.tabBar.items count];
CGFloat cellWidth = tabBarController.view.frame.size.width/itemCount;
CGFloat center = (cellWidth / 2) - (INDICATOR_WIDTH / 2);

Now I could easily use this center as my indicator center. However I noticed that this wasn’t enough either since I want it to move every time after I tap to the next UITabBarItem. So I did some refactoring and:

#define INDICATOR_WIDTH 10 //u can define st like this
-(void) addIndicatorTo:(int) index {
    int itemCount = [self.tabBarController.tabBar.items count];
    CGFloat cellWidth=tabBarController.view.frame.size.width/itemCount;
    CGFloat center = (index * cellWidth) + (cellWidth / 2) 
                            - (INDICATOR_WIDTH / 2);
    UIImage *upArrow = [UIImage imageNamed:@"up-arrow.png"];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:upArrow];
    imageView.tag = ICON_TAG;
    [upArrow release];
    [self.tabBarController.tabBar addSubview:imageView];
}
// just listen the item index change
- (void)tabBarController:(UITabBarController *)tbController 
        didSelectViewController:(UIViewController *)viewController {
    [self addIndicatorTo:tbController.selectedIndex];
}

So far so good. Wait a second, this adds new images every time I tap to the next UITabBarItem :S Anyways, so I refactored my code a little more:

#define INDICATOR_WIDTH 10, u can define st like this
#define INDICATOR_WIDTH 9, u can define st like this
#define ICON_TAG 11, u can define st like this
-(UIImageView *) createNewIndicator {
    UIImage *upArrow = [UIImage imageNamed:@"up-arrow.png"];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:upArrow];
    imageView.tag = ICON_TAG;
    [upArrow release];
    return imageView;
}
-(UIImageView *) findIndicator {
    // return existing one
    for (UIView *view in self.tabBarController.tabBar.subviews) {
        if (view.tag == ICON_TAG) {
            return (UIImageView *) view;
        }
    }
    // if not return a new one
    return [self createNewIndicator];
}
-(void) addIndicatorTo:(int) index {
    int itemCount = [self.tabBarController.tabBar.items count];
    CGFloat cellWidth = tabBarController.view.frame.size.width / itemCount;
    CGFloat center = (index * cellWidth) 
                + (cellWidth / 2) - (INDICATOR_WIDTH / 2);
    UIImageView *imageView = [self findIndicator];
    imageView.frame = CGRectMake(
                        indicatorPositionX, 
                        3 - INDICATOR_HEIGHT, 
                        INDICATOR_WIDTH, 
                        INDICATOR_HEIGHT
                      );
    [self.tabBarController.tabBar addSubview:imageView];
}

This is basically it. So I did some animation too, here is the result:

If you guys need, I can upload the working source code to somewhere.. Hope this guides a bit.