Episode #22

Customizing UITabBar

12 minutes
Published on June 28, 2012

This video is only available to subscribers. Get access to this video and 507 others.

In this episode, I continue deconstructing Foursquare's custom UI. This time I focus on how to customize the UITabBar with the iOS 5 customization APIs.

Episode Links

Customizing the Tab Bar Background

UIImage *tabbarBg = [UIImage imageNamed:@"tabbar-background.png"];
[self setBackgroundImage:tabbarBg];

Customizing the selected tab background

UIImage *tabBarSelected = [UIImage imageNamed:@"tabbar-background-pressed.png"];
[self setSelectionIndicatorImage:tabBarSelected];

Customizing the Tab Bar Item Appearance

// MasterViewController.m
- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        self.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Friends"
                                                        image:nil
                                                          tag:0];
        [self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tabbar-activity-selected.png"]
                      withFinishedUnselectedImage:[UIImage imageNamed:@"tabbar-activity.png"]];
    }
    return self;
}