creating uitabbarcontroller based app using interface builder — amateur in motion (r552)

amateur in motion » articles archive

January 24, 2009by ampatspell

in Code

» Creating UITabBarController Based App UsingInterface BuilderIʼll try to describe the process of creating UITabBarController based appmainly using Interface Builder. The UITabBarController will manages twoUIViewControllers with views stored in Nibs.

Window-Based Application

We will start with creating a Window-Based Application. Click on File → NewProject and select iPhone OS → Applications → Window-Based Application:

Iʼll Name it TabBarExample.

The initial project layout should look like this:

← Back to articles

Creating UITabBarController Based App Using Interface Build... http://www.amateurinmotion.com/articles/2009/01/24/creating-u...

1 of 12 5/18/10 4:01 AM

Before we start with Interface Builder, letʼs add outlet for UITabBarControllerin TabBarExampleAppDelegate:

// TabBarExampleAppDelegate.h

#import <UIKit/UIKit.h>

@interface TabBarExampleAppDelegate : NSObject <UIApplicationDelegate>{ UIWindow *window; UITabBarController *tabBarController;}@property (nonatomic, retain) IBOutlet UIWindow *window;@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

@end

// TabBarExampleAppDelegate.m

@implementation TabBarExampleAppDelegate@synthesize window;@synthesize tabBarController;

- (void)applicationDidFinishLaunching:(UIApplication *)application{ [window makeKeyAndVisible];}

- (void)dealloc{ self.window = nil; self.tabBarController = nil; [super dealloc];}

@end

Notice @property and @synthesize for tabBarController property.

We will use this property to connect UITabBarController in Interface Builderbecause we need to add Tab Bar Controllerʼs view to window as subview.

Interface Builder

Next, create Tab Bar Controller.

Open MainWindow.xib.


2 of 12 5/18/10 4:01 AM

Notice that Tab Bar Example App Delegate has two outlets: window andtabBarController.

Create UITabBarController by draging it from Library → Controllers →TabBarController to MainWindow.xib.

Now we have new a window in Interface Builder named Tab Bar Controller:

Connect Tab Bar Controller to Tab Bar Example App Delegate by right clicking onApp Delegate and dragging the line from tabBarController outlet to actualTab Bar Controller instance.


3 of 12 5/18/10 4:01 AM

Back to Xcode

Altrough we havenʼt created any UIViewController instances for Tab BarController to manage, we can still add blank Tab Bar to window and ensure itʼsvisible and weʼre still on right track this far.

To do so, open TabBarExampleAppDelegate.m and in-applicationDidFinishLaunching: method add tabBarControllerʼsview as a subview to the window:

- (void)applicationDidFinishLaunching:(UIApplication *)application{ [window addSubview:[tabBarController view]]; [window makeKeyAndVisible];}

Finally now itʼs time to run this thing:

As you can see, thereʼs UITabBar view with two tabs but above it — just whitebackground. Itʼs windowʼs background without anything on top of it. Next we willadd views what (by using UITabBarController) will be shown there.

UIViewControllers


4 of 12 5/18/10 4:01 AM

So we need to create two UIViewController subclasses. Iʼll call themWelcomeViewController and AboutViewController.

To create them, select:File → New File → Cocoa Touch Classes → UIViewController subclass:

Set the file name to WelcomeViewController.m and click Finish. Then insame manner create AboutViewController class.

Creating XIBs

Now we need views for those two view controllers. For this example theyʼll beXIBʼs.

Create two XIBʼs named after controllers what will manage them by selecting:File → New File → User Interfaces → View XIB


5 of 12 5/18/10 4:01 AM

Back to Interface Builder

In Interface Builder close MainWindow.xib and (from Xcode) openWelcomeViewController.xib.

Set Fileʼs Owner class to be WelcomeViewController and add some labelwhat will let us to make distinction between both controller views.

By the way, that black bottom bar what is visible over view is simulated. Toshow/simulate it, select View and in Inspectorʼs View Attributes select Tab Bar asBottom Bar value.

The last thing we need to do here is connect XIBʼs UIView instance to controllerʼsview outlet otherwise controller wonʼt be able to add it as a parentʼs(UITabBarControllerʼs view) subview.

Right click on Fileʼs Owner and drag the line from view outlet to the View.


6 of 12 5/18/10 4:01 AM

Repeat the same steps with AboutViewController controller-view pair.

MainWindow.xib

The last thing we need to do is to connect UITabBarItems with our newlycreated view controllers.

Open MainWindow.xib from Xcode. Open Tab Bar Controller, select first item(named “Item 1”), in Inspector (ensure the selected item is “View Controller” not“Tab Bar Item”).

Set view controllerʼs NIB name to WelcomeViewController andAboutViewController for other UITabBarItem. Set the class (in Identitytab) to WelcomeViewController for the first one andAboutViewController for other one.

Now the view placeholder should show “Loaded from” message:

…and Inspector palettes should contain:


7 of 12 5/18/10 4:01 AM

Select UITabBarItem, set icon and/or title for both of them (or just leave “Item 1”and “Item 2”).

And weʼre done.

UITabBarController switches UIViewController instances whatmanages the loading of XIBs.

Run and try to click/tap on both tabs, the view should change.


8 of 12 5/18/10 4:01 AM

Extra — Adding a click counter badge

Just a simple example accessing UITabBarItem directly from code. Usingdelegate, we will be counting clicks on the tab bar and updating badge for one ofthe tab bar items.

Add UITabBarItem outlet for TabBarExampleAppDelegate, setTabBarExampleAppDelegate to adopt UITabBarControllerDelegateprotocol and implement optional-tabBarController:didSelectViewController delegate method:

// TabBarExampleAppDelegate.h

#import <UIKit/UIKit.h>

@interface TabBarExampleAppDelegate : NSObject <UIApplicationDelegate, ↩ UITabBarControllerDelegate> { UIWindow *window; UITabBarController *tabBarController; UITabBarItem *tabBarItem;}@property (nonatomic, retain) IBOutlet UIWindow *window;@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;@property (nonatomic, retain) IBOutlet UITabBarItem *tabBarItem;

@end

// TabBarExampleAppDelegate.m

#import "TabBarExampleAppDelegate.h"

@implementation TabBarExampleAppDelegate@synthesize window;@synthesize tabBarController;@synthesize tabBarItem;

- (void)applicationDidFinishLaunching:(UIApplication *)application{


9 of 12 5/18/10 4:01 AM

[window addSubview:[tabBarController view]]; [window makeKeyAndVisible];}

- (void)dealloc{ self.window = nil; self.tabBarController = nil; self.tabBarItem = nil; [super dealloc];}

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{ NSLog(@"-didSelectViewController:%@", viewController);}

@end

Open MainWindow.xib and connect Tab Bar Example App DelegateʼstabBarItem outlet to one of the UITabBarItems:

Set Tab Bar Example App Delegate to be Tab Bar Controllerʼs delegate:

Run the app and ensure delegate callback is called:

[Session started at 2009-01-24 17:24:47 +0200.]-didSelectViewController:<WelcomeViewController: 0x526000>-didSelectViewController:<AboutViewController: 0x5262c0>Terminating in response to SpringBoard's termination.

Next, add NSUInteger instance variable named count and set it to zero in-applicationDidFinishLaunching:

- (void)applicationDidFinishLaunching:(UIApplication *)application{ self.count = 0; [window addSubview:[tabBarController view]]; [window makeKeyAndVisible];}

Then in -tabBarController:didSelectViewController set currentcount to tabBarItem.text property and increment the count:


10 of 12 5/18/10 4:01 AM

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{ NSLog(@"-didSelectViewController:%@", viewController); tabBarItem.badgeValue = [NSString stringWithFormat:@"%i", self.count]; self.count = self.count + 1;}

Run the app and ensure badge is updated:

Download “TabBarExample.zip” (28Kb)

Note about items in Nibs

In this example I used existing UITabBarItems but they can be kept in eachviewʼs Nib to improve encapsulation. To do so, just create Tab Bar Item in viewʼsXIB:


11 of 12 5/18/10 4:01 AM

…and connect it to Fileʼs Owner tabBarItem outlet:


12 of 12 5/18/10 4:01 AM

creating uitabbarcontroller based app using interface builder — amateur in motion (r552)

Documents