This is the second post in the App Design Customization series. You can read the first post here where we designed a custom UITableViewCell.
In this post, I will walk you through how you can design the Tab bar in the screenshot below. The Buttons in the Tab bar have icons which you can customize and one of the icons has a red badge on it. We shall also go into detail on how to create the badge
We shall use some iPhone App Design files to implement the look and feel of the app. At the end of this post I will include a sample project and a link to where you can also get design files for your app.
Apple has released some new methods in iOS 5 that makes it so much easier to customize the UIKit controls. Up until now it was a pain to do that.
So let’s get right to it.
Implementing the User Interface
Run Xcode and create a new sample project. Select the Single View Project and give it any name you want.
Add the following piece of code in the AppDelegate.m file. This gives us a shell to start customizing our tab bar.
- (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;
}
The code adds 4 empty views and adds them to a Tab Controller. Run the application and you will get an empty app that looks like the sample below. Kind of boring, right? Have some patience…. 
Adding New Tabs To the Controller
In the sample project, there is a design resources folder with four icons included. These icons are called chats.png, settings.png, send-email.png and friends.png.
So let’s create UITabBarItems for all the four icons.
UITabBarItem *tab1 = [[UITabBarItem alloc] initWithTitle:@"Chats" image:[UIImage imageNamed:@"chats.png"] tag:1];
This will create a new UITabBarItem with the image chats.png and the title Chats. Now we will set the UITabBarItem as the item for the first View Controller..
[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:@"Chats" image:[UIImage imageNamed:@"chats.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.
That looks better now doesn’t it? Let’s repeat the same structure for all the tabs.
- (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:@"Chats"
image:[UIImage imageNamed:@"chats.png"] tag:1];
[viewController1 setTabBarItem:tab1];
UIViewController *viewController2 = [[UIViewController alloc] init];
UITabBarItem *tab2 = [[UITabBarItem alloc] initWithTitle:@"Settings"
image:[UIImage imageNamed:@settings.png"] tag:2];
[viewController2 setTabBarItem:tab2];
UIViewController *viewController3 = [[UIViewController alloc] init];
UITabBarItem *tab3 = [[UITabBarItem alloc] initWithTitle:@"Email"
image:[UIImage imageNamed:@"send-email.png"] tag:3];
[viewController3 setTabBarItem:tab3];
UIViewController *viewController4 = [[UIViewController alloc] init];
UITabBarItem *tab4 = [[UITabBarItem alloc] initWithTitle:@"Friends"
image:[UIImage imageNamed:@"friends.png"] tag:4];
[viewController4 setTabBarItem:tab4];
tabController.viewControllers = [NSArray arrayWithObjects:viewController1,
viewController2,
viewController3,
viewController4, nil];
self.window.rootViewController = tabController;
[self.window makeKeyAndVisible];
return YES;
}
When you run the app in the simulator, you should get four icons like below.
Adding A Badge
In the initial screenshot we had a red badge on one of the icons. Here is how to add the badge.
[tab1 setBadge:@"25"];
Easy right, the code above adds the value 25 in a red view above the the icon like below. This can be used to set status updates for example.
Where To Get Design Files For Your App
That’s all folks, here is the link to download the sample project. If you would like to have get design files for your app, head over to App Design Vault.
As a special bonus for Matt’s readers, I am giving away a bonus theme for you if you buy one theme from the Vault.
Click here to get two themes for the price of one.
[box type="info"]
This is a guest post by Tope who is the Vault Overseer at App Design Vault where you get great iPhone App Design that will help make your app a Top-seller without blowing your budget on expensive designers. When he is not tending to the Vault 5km below a bank in Switzerland, he can teach you how to design an app in 1 hour.[/box]