Customizing UITabBar

Episode #22 | 12 minutes | published on June 28, 2012

Subscribers Only

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;
}

View on Github

Download