Blog

How to Create a Custom UITabBarController for the iPhone with different background, images and icons - Part 1

Tutorial Details

  • Part1: Integrating GTabBar into your iPhone Project
  • Technology: iPhone SDK 3.x - 4.x
  • Difficulty: Easy
  • Completion Time: 10 - 15 Minutes

Download Source Files

This tutorial will teach you how to create a custom UITabBarController for the iPhone from scratch. I’ve spent alot of time trying to find something similar on the internet but didn’t find any good resource so I’ve decided to create one my self.

Part 1 of the tutorial will show you how to integrate the GTabBar into your projects and Part 2 I will be dissecting and teaching you how I’ve built it.

This is the first release of the of the GTabBar and it’s the Beta version, so by no means think of this a fully tested class, if anyone have any problems please report back so we can tweak it.

I will be developing the GTabBar further with time, so bookmark this url :)

The Idea Behind GTabBar

I love customizing pretty much everything I can, so when I coudn’t customize the iPhone UITabBar it go me thinking and I decided to create a very simple class that can be plugged in your iPhone project using your own images for the UITabBarItems.

What will you need?

  • GTabBar.h
  • GTabBar.m
  • GTabTabItem.h
  • GTabTabItem.m
  • 5 Images for the Tab Items (64px, 49px)
  • 5 Images for the Tab Items in it’s Selected State(64px, 49px)
  • I’ve created 2 sets of icon images, (64px, 49px) / (128px, 98px) so it would work nicely in the iPhone 4.0 (retina display)

Installation

1 - Start by creating a View Based Application and give it a name of CustomTabBarScratch

2 - Create a group called GTabBar inside Classes and import both class files and it’s corresponding header files into your Project (GTabBar.h,GTabBar.m,GTabTabItem.h,GTabTabItem.m) and also add the images into your Resources folder.

I tend to create 2 groups, x1 (for the normal iPhone) and x2 for the iPhone 4

3 - In your CustomTabBarScratchAppDelegate.h file add the following code

#import "GTabBar.h"
@class CustomTabBarScratchViewController;

@interface CustomTabBarScratchAppDelegate : NSObject  {
    UIWindow *window;
    CustomTabBarScratchViewController *viewController;
	GTabBar *tabView;

}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet CustomTabBarScratchViewController *viewController;

@end

4 - In your CustomTabBarScratchAppDelegate.m file add the following code that is in bold

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    

	/*///////////
          tabbar*.png and tabbar*_h are the state for the icons
      */
	GTabTabItem *tabItem1 = [[GTabTabItem alloc] initWithFrame:CGRectMake(0, 0, 64, 49) normalState:@”tabbar1.png” toggledState:@”tabbar1_h.png”];
	GTabTabItem *tabItem2 = [[GTabTabItem alloc] initWithFrame:CGRectMake(64, 0, 64, 49) normalState:@”tabbar2.png” toggledState:@”tabbar2_h.png”];
	GTabTabItem *tabItem3 = [[GTabTabItem alloc] initWithFrame:CGRectMake(128, 0, 64, 49) normalState:@”tabbar3.png” toggledState:@”tabbar3_h.png”];
	GTabTabItem *tabItem4 = [[GTabTabItem alloc] initWithFrame:CGRectMake(192, 0, 64, 49) normalState:@”tabbar4.png” toggledState:@”tabbar4_h.png”];
	GTabTabItem *tabItem5 = [[GTabTabItem alloc] initWithFrame:CGRectMake(256, 0, 64, 49) normalState:@”tabbar5.png” toggledState:@”tabbar5_h.png”];

	/*///////////
          Here I am creating a standard UIViewController and setting the Nib to the one created by the ViewBased template. I have duplicated the CustomTabBarScratchViewController and renamed it to CustomTabBarScratchViewController2. I also changed the background colour of the UIView so we could tell that does change when the UITabItems are clicked
      */
	UIViewController *tabViewController1 = [[UIViewController alloc] initWithNibName:@”CustomTabBarScratchViewController” bundle:nil];
	UIViewController *tabViewController2 = [[UIViewController alloc] initWithNibName:@”CustomTabBarScratchViewController2″ bundle:nil];
	UIViewController *tabViewController3 = [[UIViewController alloc] initWithNibName:@”CustomTabBarScratchViewController” bundle:nil];
	UIViewController *tabViewController4 = [[UIViewController alloc] initWithNibName:@”CustomTabBarScratchViewController2″ bundle:nil];
	UIViewController *tabViewController5 = [[UIViewController alloc] initWithNibName:@”CustomTabBarScratchViewController” bundle:nil];

	NSMutableArray *viewControllersArray = [[NSMutableArray alloc] init];
	[viewControllersArray addObject:tabViewController1];
	[viewControllersArray addObject:tabViewController2];
	[viewControllersArray addObject:tabViewController3];
	[viewControllersArray addObject:tabViewController4];
	[viewControllersArray addObject:tabViewController5];

	NSMutableArray *tabItemsArray = [[NSMutableArray alloc] init];
	[tabItemsArray addObject:tabItem1];
	[tabItemsArray addObject:tabItem2];
	[tabItemsArray addObject:tabItem3];
	[tabItemsArray addObject:tabItem4];
	[tabItemsArray addObject:tabItem5];

	tabView = [[GTabBar alloc] initWithTabViewControllers:viewControllersArray tabItems:tabItemsArray initialTab:0];
	[window addSubview:tabView.view];
	/*///////////*/

    //[window addSubview:viewController.view];
    [window makeKeyAndVisible];

    return YES;
}

5 - Double click in the MainWindow.xib and delete the CustomTabBarScratchViewController from the Nib Window

6 - Build and Run, and you should see the following

Conclusion

In this Part 1 tutorial I’ve shown you how to integrate GTabBar with your project, Part 2 will explain how I’ve developed GTabBar. (Coming soon)

If anybody have any questions, feedback or code improvements please send us a comment

September 30th, 2010 at 8:33 am

One Response to “How to Create a Custom UITabBarController for the iPhone with different background, images and icons - Part 1”

  1. Hi -
    I have another question. I tried to add the tabView to a viewController (tried to set it as the view, also tries to add it as a subview of the the view), but ran into various issues. Mainly, it just didn’t show up! Is there a requirement that this needs to be added as a subview of a window?
    Thanks,
    Chris

Leave a Reply

You must be logged in to post a comment.

« Vital Radio iPhone App Development Mopar VIN Decoder iPhone App on iStore »

Follow Us

Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon Stumbleupon