How To Customize The Tab Bar Using iOS 5 Appearance API

http://ios-blog.co.uk/tutorials/how-to-customize-the-tab-bar-using-ios-5-appearance-api/

Great App design is now a must-have when developing apps for the App Store. Especially, now that you have to contend with so many other pas for attention. If your apps are not selling as well as they should spice it up with a good design and you should see
an uplift.

In this post, I am going to show you how to design the tab bar you see in the screenshot below. The tab bar has a leather background with a black selection background. There are also four icons that are specific to a music app.

We shall use some sample iPhone App Design files and at the end of this tutorial, I will share a link to the sample project with the design images and icons so you can use them in your
apps for free.

In previous iOS SDK’s, it was a pain to totally customise the TabBar in this way. In iOS5, Apple has recognised the need to be able to customise the UI so they have added the Appearance API thankfully. This gives developers more control on the look and feel
of the app.

Starting with a simple user interface.

Well, to start with. Fire up Xcode, and create a new sample project. Give it any name you like and choose the single view project. We are going to code up our tab views manually. Just like the pros.

In the AppDelegate.m file, add the following code. In that piece of code, we are creating four views and adding them to a Tab Controller. These views are empty for now because we don’t need any content in them for the purposes of this project.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    
    UITabBarController *tabController = [[UITabBarController alloc] init];
    
    UIViewController *viewController1 = [[UIViewController alloc] init];
    
    UIViewController *viewController2 = [[UIViewController alloc] init];
    
    UIViewController *viewController3 = [[UIViewController alloc] init];
    
    UIViewController *viewController4 = [[UIViewController alloc] init];
    
    
    tabController.viewControllers = [NSArray arrayWithObjects:viewController1, 
                                     viewController2, 
                                     viewController3, 
                                     viewController4, nil];
    
    
    self.window.rootViewController = tabController;
    
    [self.window makeKeyAndVisible];
    return YES;
}

If you run the application in the simulator, you should see something similar to the image below. Kind of boring, I know but we will get there.

Adding Tabs to the Tab Controller

In the design resources folder, I have four icons. To add them to our tabs, we will need to add them to our project. When they are added, note down the names of the images. In our case, they are called artist-tab.png, music-tab.png, podcast-tab.png and clock-tab.png.

We will now create UITabBarItems using the following code.

UITabBarItem *tab1 = [[UITabBarItem alloc] initWithTitle:@"Artists" image:[UIImage imageNamed:@"artist-tab.png"] tag:1];

This will initialise a UITabBarItem with the image and title given. In this case, the image is the “artist-tab.png” and the title is called “Artists”.

The next step is to set this as the Tab Item for one of our ViewControllers.

[viewController1 setTabBarItem:tab1];

This is how our application:DidFinishLaunchingWithOptions method looks like.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    
    UITabBarController *tabController = [[UITabBarController alloc] init];
    
   
    
    UIViewController *viewController1 = [[UIViewController alloc] init];
    
    UITabBarItem *tab1 = [[UITabBarItem alloc] initWithTitle:@"Artists" image:[UIImage imageNamed:@"artist-tab.png"] tag:1];
    [viewController1 setTabBarItem:tab1];
    
    UIViewController *viewController2 = [[UIViewController alloc] init];
    
    UIViewController *viewController3 = [[UIViewController alloc] init];
    
    UIViewController *viewController4 = [[UIViewController alloc] init];
    
    
    tabController.viewControllers = [NSArray arrayWithObjects:viewController1, 
                                     viewController2, 
                                     viewController3, 
                                     viewController4, nil];
    
    
    self.window.rootViewController = tabController;
    
    [self.window makeKeyAndVisible];
    return YES;
}

If you run this in the simulator, you should see the something similar to the image below.

Our little app is taking some shape . The next step is to extrapolate the method and add tabs for all our views.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    
    UITabBarController *tabController = [[UITabBarController alloc] init];

    UIViewController *viewController1 = [[UIViewController alloc] init];
    
    UITabBarItem *tab1 = [[UITabBarItem alloc] initWithTitle:@"Artists" 
                                                       image:[UIImage imageNamed:@"artist-tab.png"] tag:1];
    [viewController1 setTabBarItem:tab1];
    
    
    UIViewController *viewController2 = [[UIViewController alloc] init];
    UITabBarItem *tab2 = [[UITabBarItem alloc] initWithTitle:@"Music" 
                                                       image:[UIImage imageNamed:@"music-tab.png"] tag:2];
    [viewController2 setTabBarItem:tab2];
    
    UIViewController *viewController3 = [[UIViewController alloc] init];
    UITabBarItem *tab3 = [[UITabBarItem alloc] initWithTitle:@"Podcast" 
                                                       image:[UIImage imageNamed:@"podcast-tab.png"] tag:3];
    [viewController3 setTabBarItem:tab3];
    
    UIViewController *viewController4 = [[UIViewController alloc] init];
    UITabBarItem *tab4 = [[UITabBarItem alloc] initWithTitle:@"Time" 
                                                       image:[UIImage imageNamed:@"clock-tab.png"] tag:4];
    [viewController4 setTabBarItem:tab4];    
    
    tabController.viewControllers = [NSArray arrayWithObjects:viewController1, 
                                     viewController2, 
                                     viewController3, 
                                     viewController4, nil];
    
    
    self.window.rootViewController = tabController;
    
    [self.window makeKeyAndVisible];
    return YES;
}

This will add the other tabs to our Tab Controller, using our four icon images. This is what you should see when running the app in the simulator

Styling the Tab Bar using the iOS 5 Appearance API

This is starting to look good. We just need to add our leather background. To do this, we will create a new method in the AppDelegate.m file and call it customiseAppearance.

In this method, we will add the background to the Tab Bar. . See the code below.

- (void)customizeInterface
{
    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];
}

And then make sure to call the method at the top of our application:DidFinishLaunchingWithOptions
method. This will customize all the Tab Bars in our app globally by adding an image
called tabbar.png. The image can be downloaded as part of the sample project of this post.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [self customizeInterface];

Run the application and you will see that our tab bar has a nice leather background to it.

The last thing to do it customise how the Tab Bar Item will look when the user taps on each Item.
We employ the appearance API again to make this happen.

- (void)customizeInterface
{
    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];
    
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"selection-tab.png"]];
}

In the code above, we have added the third line, which sets the Selection Indicator of our tabs.
This is the final step and you should see the following when you run the app.

There you have it. A fully customized Tab Controller with a leather background. Now you can go forth and modify your apps, make the look good and sell more.

Download the sample project here

Download the sample project here