Blog

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?

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