Implementing a Tab Bar in an iPhone App
UITabBarController class allows users to rotate between different modes of an application. The tab bar is located at the bottom of the screen and each individual tab in the control conforms a view controller (like UIViewController or its any of its subclasses including UINavigationController) for representing the views for that mode. All you need to do is to create a collection of these individual custom view controllers and then add it to UITabBarController.
Under XCode, you can quickly create an tab bar Phone app by using the Tab Bar project template. However, this resultant code solely rely on NIB files for embedding the tab bar to the application. If you are thinking of creating the tab bar programmatically, then this tutorial is for you. It demonstrates how you can implement a skeletal tab bar application on XCode including tips on persistence and how you can integrate free, cool iPhone tab bar icons to the app.
| 1. Launch XCode, create a new project using the Window-based Application project template (select the simplest project type), and name the project TabBarDemo.
|
| 2. You get “free” UIViewController called TabBarDemoViewController created for you in the project. Create another UIViewController and name it SettingsViewController. On the menu select File > New File… On the file dialog, select UIViewController subclass as the file type. You can optionally check options With XIB for user interface and UITableViewController subclass depending on your needs.
|
3. Open TabBarDemoViewController.m and override instance method init.
- (id) init {
if (self = [super init]) {
self.title = @"Search";
[self.tabBarItem initWithTitle:self.title image:nil tag:0];
}
return self;
}
And for SettingsViewController.m, make the following change. - (id) init {
if (self = [super init]) {
self.title = @"Settings";
[self.tabBarItem initWithTitle:self.title image:nil tag:0];
}
return self;
}
|
4. Open TabBarDemoAppDelegate.h and replace the interface definition with the following.
#import <UIKit/UIKit.h>
@classTabBarDemoViewController;
@interface TabBarDemoAppDelegate : NSObject {
UIWindow *window;
UITabBarController *tbarController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tbarController;
@end
And for TabBarDemoAppDelegate.m, make the following change. #import "TabBarDemoAppDelegate.h"
#import "TabBarDemoViewController.h"
#import "SettingsViewController.h"
@implementation TabBarDemoAppDelegate
@synthesize window;
@synthesize tbarController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Need an array to pass a collection of view controllers to the
// tab bar.
NSMutableArray *controllers = [NSMutableArrayarray];
// Create the first view controller.
UIViewController *vc = [[TabBarDemoViewControlleralloc] init];
UINavigationController *nav = [[UINavigationControlleralloc]
initWithRootViewController:vc];
[controllers addObject:nav]; // Add navigation controller here.
[vc release];
[nav release];
// Create the second view controller.
vc = [[SettingsViewControlleralloc] init];
nav = [[UINavigationControlleralloc]
initWithRootViewController:vc];
[controllers addObject:nav]; // Add navigation controller here.
[vc release];
[nav release];
// Set up the toolbar.
tbarController = [[UITabBarControlleralloc] init];
// Assign the list of view conrollers to the tab bar.
tbarController.viewControllers = controllers;
tbarController.delegate = self;
// Set up the window.
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen]
bounds]];
[window addSubview:tbarController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[tbarControllerrelease];
[windowrelease];
[superdealloc];
}
@end
|
| 5. Since we don’t want the NIB file, we should get rid of it by delete the key Main nib file base name in TabBarDemo-info.plist. |
6. We need reflect the lack of NIB file in the application in the main.m. Open main.m and edit the following line.
int retVal = UIApplicationMain(argc, argv, nil,
@"TabBarDemoAppDelegate");
|
| 7. Build and run the application by selecting menu Run > Run.
|
8. So far so good. We now have a functional tab bar application. But let us make it better with icons. There are plenty of tutorials on creating UITabBar icons.
Also, a must-read official guidelines from Apple on creating icons for toolbars and tab bars. Good news! Joseph Wain has created 130 iPhone tab bar/toolbar icons that you can download and use them for free under a Create Commons Attribution. So let’s go ahead and download this icon set and add icons to the project.
|
| 9. After you have unpack the icon set, select the Resources folder in XCode, right-click and select Add > Existing Files… On the dialog, select 06-magnifying-glass.png and 19-gear.png under the icons subdirectory from the folder where you had unarchived the icon set and then click Add. Make sure Copy items into destination group’s folder (if needed) is checked.
|
10. Open TabBarDemoViewController.m and override instance method init (this time include the images).
- (id) init { if (self = [super init]) {
self.title = @"Search";
NSString *filePath = [[NSBundlemainBundle]
pathForResource:@"06-magnifying-glass" ofType:@"png"];
UIImage *image = [UIImage imageWithContentsOfFile:filePath];
[self.tabBarItem initWithTitle: self.titleimage:image tag:0];
}
return self;
}
And for SettingsViewController.m, make the following change. - (id) init { if (self = [super init]) {
self.title = @"Settings";
NSString *filePath = [[NSBundlemainBundle]
pathForResource:@"19-gear" ofType:@"png"];
UIImage *image = [UIImage imageWithContentsOfFile:filePath];
[self.tabBarItem initWithTitle:self.title image:image tag:0];
}
return self;
}
|
| 11. Build and run the application by selecting menu Run > Run. Sweet, the app now has the icons.
|
12. Finally, let’s add persistence to the application since we want the application to resume from a the state from where it was terminated. To do this, we rely on the delegate method didSelectViewController in UITabBarController. So on TabBarDemoAppDelegate.m, we add a new method didSelectViewController and modify applicationDidFinishLaunching.
- (void)tabBarController:(UITabBarController *)tabBarController
didSelectViewController:(UIViewController *)viewController {
// Save the selected tab when a new one is selected.
NSNumber *tabNumber = [NSNumbernumberWithInt:[tabBarController selectedIndex]];
[[NSUserDefaults standardUserDefaults] setObject:tabNumber forKey:@"selectTab"];
[[NSUserDefaults standardUserDefaults] synchronize];
}
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Need an array to pass a collection of view controllers to the
// tab bar.
NSMutableArray *controllers = [NSMutableArrayarray];
// Create the first view controller.
UIViewController *vc = [[TabBarDemoViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc]
initWithRootViewController:vc];
[controllers addObject:nav]; // Add navigation controller here.
[vc release];
[nav release];
// Create the second view controller.
vc = [[SettingsViewController alloc] init];
nav = [[UINavigationControlleralloc]
initWithRootViewController:vc];
[controllers addObject:nav]; // Add navigation controller here.
[vc release];
[nav release];
// Set up the toolbar.
tbarController = [[UITabBarController alloc] init];
// Assign the list of view conrollers to the tab bar.
tbarController.viewControllers = controllers;
tbarController.delegate = self;
// Retreive persisted value from system defaults.
NSNumber *tabNumber = [[NSUserDefaults standardUserDefaults]
objectForKey:@"selectTab"];
if (tabNumber) {
tbarController.selectedIndex = [tabNumber intValue];
}
// Set up the window.
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[window addSubview:tbarController.view];
[window makeKeyAndVisible];
}
|
Posted: February 23rd, 2010 under Apple, Mac.
Tags: Cocoa, iPhone, Software Development, XCode
Comments: none
meaning ice
meaning soldier
meaning biscuit