Use TabBar and Navigation Controller at the same time

Interface Builder is a great tool to minimize your typing and make you see the output before you compile it. But, sometimes, it blocks you to implement your thought clearly.

Combining TabBar and NavigationBar is one of those cases. If you want to use TabBar, you easily can make it using Interface Builder, but Interface Builder does not provide a way to combine this with NavigationController.

In the case of this, we need to dig into our precious Xcode editor. You need to put some code similar to following:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.    

	daysViewController = [[DaysViewController alloc] init];
	UINavigationController *daysNavController = [[[UINavigationController alloc] initWithRootViewController:daysViewController] autorelease];
	[daysViewController release];
	daysNavController.tabBarItem.image = [UIImage imageNamed:@"11-clock.png"];
	
	calendarViewController = [[CalendarViewController alloc] init];
	UINavigationController *calendarNavController = [[[UINavigationController alloc] initWithRootViewController:calendarViewController] autorelease];
	[calendarViewController release];
	calendarNavController.tabBarItem.image = [UIImage imageNamed:@"83-calendar.png"];
	
	tagsViewController = [[TagsViewController alloc] init];
	UINavigationController *tagsNavController = [[[UINavigationController alloc] initWithRootViewController:tagsViewController] autorelease];
	tagsViewController.tabBarItem.image = [UIImage imageNamed:@"15-tags.png"];
	
	feedsViewController = [[FeedsViewController alloc] init];
	UINavigationController *feedsNavController = [[[UINavigationController alloc] initWithRootViewController:feedsViewController] autorelease];
	feedsViewController.tabBarItem.image = [UIImage imageNamed:@"23-bird.png"];
			
	
	tabBarController = [[UITabBarController alloc] init];
	tabBarController.viewControllers = [NSArray arrayWithObjects: daysNavController, 
										calendarNavController, tagsNavController,
										feedsNavController, nil];

	[self.window addSubview:tabBarController.view];
    [self.window makeKeyAndVisible];
    
    return YES;
}

Following is the output with the above code – of course, you need to put another lines of code in other places as well.

tabbar.png

I made this as for personal practice. For your information, this one is a fake implementation of my favorite App – Momento – with my own ugly interface :P.

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.