How to Prepare Customized Tab Bar in iOS

                                                                   According to reviews from the apple store, 60% of the business app’s in the Appstore is a tabbar based application. So it is really hard to provide a good user experience to the app costumers. You can refer the successful apps in the Appstore, they have a great user interface which makes more users to download. To ensure a good user interface, the developer who developed the app is done a good effort in the user experience. So they have to customized the tabbar to provide the better user experience. If your app is still using the default UITabbar style, then it is really hard to success the app in the Appstore and also hard to attract the users to download the application. After the introduction of Appearance API in iOS 5 it is really easy to customize the user interface fo tabbar. So let’s take a look at how to customize the tabbar in iOS applications.

                                  As usual it is a step by step application tutorial, which will help you to understand how you can customize the user interface of UITabbar.  So initially we will prepare a sample tabbar based application with out any  features of application. so you can easily understand what you need to done. This tutorial will describe in details how to optimize the Appearance API of UITabbar.So this will be the final out put of the tabbar based application.

Custom Tab Bar Final

Custom Tab Bar Final out put.

Understanding Basics of UITabBar and UITabBarItem

Understanding the basics of UITabBar and UITabBarItem Appearance

Understanding the basics of UITabBar and UITabBarItem Appearance

I think the above pictorial representation will help you to understand the layer’s of UITabbar in a clear way. So now you know that what are the things you need to create a customized tabbar for iPhone. so now we can create a sample tabbar based application.

Create a Sample Tab Bar App

First, you have to create a xcode project using ” Tabbed Application ” Template. Now i am going to name the project as “CustomTabbarApp” . Please take a look at the screenshot so you can understand it with out any difficulty.

selecting tabbar template

selecting tabbar template

 

naming the tabbar appCheck the parameter.

Next you need to finish up the xcode project.

Add More Tabs to Tab Bar Controller

Now we need to add more tabs to the tabbar controller. I don’t think that i need to explain how we can add new view controllers to the tabbar application in storyboard. if you need help please take a look at the previous post about the storyboard.

It is really simple, just add two view controllers to the story board and wire it up with the tabbar. So it is simple as that. Please take a look at the screen so you will get a clear cut idea about it.

Adding New tabs to the tabbar.

Adding New tabs to the tabbar.

 

Setting up the Title of the Tab Bar Items

Next, we need to setting up the title of tabbar item. it is really simple ! we need to got to CustomTabbarApp’s AppDelegate implementation file and edit “didFinishLaunchingWithOptions”  method as below.

 

 // Assign tab bar item with titles
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
    UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
    UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
    UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

    tabBarItem1.title = @"Playback";
    tabBarItem2.title = @"Playlists";
    tabBarItem3.title = @"Albums";
    tabBarItem4.title = @"More";

    // Override point for customization after application launch.
    return YES;

The above code is self explanatory, i don’t think that you will not get stucked anywhere.

Setting up the Icon of the Tab Bar Items

you can setting up the selection and un-selected icon in a easy way. for the current theme we can use same icon for the selected and unselected icon. we need to again edit the “didFinishLaunchingWithOptions”

    [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"playback.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"playback.png"]];
    [tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"playlist.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"playlist.png"]];
    [tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"albums.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"albums.png"]];
    [tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:@"more.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"more.png"]];

Now the tabbar will look like this.

Custom Tabbar with Icons

Custom Tabbar with Icons

Setting up the Title Color of the Tab Bar Items

 

  // Change the title color of tab bar items
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       [UIColor whiteColor], UITextAttributeTextColor,
                                                       nil] forState:UIControlStateNormal];
    UIColor *titleHighlightedColor = [UIColor colorWithRed:153/255.0 green:192/255.0 blue:48/255.0 alpha:1.0];
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       titleHighlightedColor, UITextAttributeTextColor,
                                                       nil] forState:UIControlStateHighlighted];

Screen Shot 2013-07-03 at 11.25.34 AM

part 2 is on the way!

One Comment

  1. frank December 7, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *