Ancient Programming

What I encounter in my software part of life is in danger of being commented upon here

Extend UITabBarController with an arrow marker

Posted by Jacob von Eyben on September 18th, 2011

I have seen a couple of iPhone apps using an UITabBarController having an arrow showing just above the selected UITabBarItem as an extra visual pointer to the current visible view. At the same time the arrow moves animated between the items as the user selects them.

I decided to try implement the same effect and I have shared my solution here.

The solution is made generic enough to handle any number of UITabBarItems in the UITabBarController and basically what it does is:

  • In the viewDidAppear selector, the arrow is places above the first element. This is done by calculating the size and location (also known as the CGRect) of the first UITabBarItem. Then a new UIImageView is created and positioned centered and above the UITabBarItem. Again some math is used to find the offset to use for the newly created UIImageView
  • In the didSelectItem a transition is used to animate the movement of the arrow between the items as they are selected.

My CustomUITabBarController.h and CustomUITabBarController.m files looks like this:

@interface CustomUITabBarController : UITabBarController {
    UIImageView *_imageView;

The actual implementation looks like follows:

@interface CustomUITabBarController ()
@property(nonatomic, retain) UIImageView *imageView;

@implementation CustomUITabBarController

@synthesize imageView = _imageView;

- (CGRect) rectForItem:(UITabBarItem *)item {
    NSUInteger itemsInTabBar = [self.tabBar.items count];

    CGSize itemSize = CGSizeMake(self.tabBar.frame.size.width / itemsInTabBar, self.tabBar.frame.size.height);
    //find current selected item index
    int currentIndexSelected = 0;
    //if the item is nil, we keep the index at zero (selects the first element)
    if (item != nil) {
        for (int i = 0; i < itemsInTabBar; i++) {
            UITabBarItem *currentItem = [self.tabBar.items objectAtIndex:(NSUInteger) i];
            if (currentItem == item) {
                currentIndexSelected = i;
    //construct the rect that defines the current selected item
    return CGRectMake(lrint(currentIndexSelected * itemSize.width), itemSize.height, itemSize.width, itemSize.height);

- (CGRect)getRectForImage:(UIImage *)markerImage andTabPosition:(CGRect)itemRect {
    CGFloat windowHeight = [UIScreen mainScreen].bounds.size.height;
    CGRect markerImageRect = CGRectMake(itemRect.origin.x + lrint(itemRect.size.width / 2) - lrint(markerImage.size.width / 2), windowHeight - itemRect.size.height - markerImage.size.height, markerImage.size.width, markerImage.size.height);
    return markerImageRect;

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];  //To change the template use AppCode | Preferences | File Templates.
    UIImage * markerImage = [UIImage imageNamed:@"tabMarker.png"];
    CGRect firstItemRect = [self rectForItem:nil];
    CGRect markerImageRect = [self getRectForImage:markerImage andTabPosition:firstItemRect];
    _imageView = [[UIImageView alloc] initWithFrame:markerImageRect];
    _imageView.image = markerImage;
    [self.view addSubview:_imageView];

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item {
    CGRect selectedItemRect = [self rectForItem:item];

    [UIView beginAnimations:@"move tabMarker" context:nil];
    [UIView setAnimationDuration:0.3f];
    _imageView.transform = CGAffineTransformMakeTranslation(selectedItemRect.origin.x,0);
    [UIView commitAnimations];

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>