Home > 2010 Winter DPS913 > Tab bar app style introduction

Tab bar app style introduction

February 3, 2010 Leave a comment Go to comments

Here, we introduce the new iPhone OS programmer to the Tab Bar Application style. This is used when you want to offer the user a choice among different modes or tasks in your app.

This is a very important topic. You will learn one of the key foundational ways to build an iPhone OS app.

Tab Bar Application style

Prof. Peter McIntyre with Apple's Evan Doll. Evan is the lead developer for the view controller classes.

Prof. Peter McIntyre with Apple's Evan Doll. Evan is the lead developer for the iPhone OS view controller classes.

An app that uses a tab bar offers the user different modes or tasks for the application. A tab bar, which works like a multi-segment button, is located at the bottom of the screen. The user taps a tab to bring that view + view controller (hierarchy) on to the screen.

A tab bar style app uses a “tab bar controller”. The tab bar controller manages an array of view controllers; the array is exposed as a tab bar controller property called viewControllers.

See the UITabBarController reference documentation

See the View Controller Programming Guide for iPhone OS

For each screenful of content, we create a view and a view controller to manage it. Using Interface Builder, we configure the Tab Bar Controller object in the MainWindow nib document to refer to these view controllers.


Creating a tab bar style app

Xcode offers a “Tab Bar Application” template. Although it makes it really easy to create a two-tab app, we suggest that you avoid using it. If you decide to can create your own example using the template, you can use this example to learn how the components are organized, and how they relate to each other.

When we create our tab bar style apps, we will begin with Xcode’s “Window-based Application” template. The steps below will enable you to reliably and predictably create this style of app. You should consider these steps to be a “best practice” for creating tab bar style apps.

In the lecture, we will create a simple three-tab app, which will be discarded before we move on to today’s downloadable example apps. Here are the steps that we will follow in this section:

  1. Create a new Tab Bar Application
  2. Add three view controllers, one for each view
  3. Configure the user interface for each view
  4. Configure the application delegate
  5. Configure the MainWindow nib document


Step 1 – Create a new Tab Bar Application

In Xcode, create a new project. Select the Window-Based Application template.

If you run the application, you will notice that it works. It simply displays a white screen, which is the background colour of the MainWindow nib document’s Window object.

If you really want to make sure you understand this, open MainWindow in Interface Builder. Select the Window object, change its background colour, and then save your changes. Then, run the application, and you will see the effect of your change.


Step 2 – Add three view controllers, one for each view

In your project’s Classes folder/container, create three view controllers. Each will manage a view. I suggest that you use the names RedVC, GreenVC, and BlueVC (VC means “view controller”). Make sure you ask Xcode to create a nib file for each view controller.


Step 3 – Configure the user interface for each new view

For each view, do the following:

  • Open it (in Interface Builder)
  • Set the view’s background colour to match the view’s name

Save your work.


Step 4 – Configure the application delegate

Open the application delegate’s interface (.h) in Xcode. We need to tell it to become the tab bar controller delegate, and we also need to add the tab bar controller property. Do the following:

The application delegate already implements the UIApplicationDelegate protocol. Add the UITabBarControllerDelegate declaration to the list. It’s a comma-separated list. Your interface declaration should look like this after you add the declaration:

@interface <appname>AppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> {

Now, add a tab bar controller instance variable, and then expose it as a property. Inside the braces, declare the name:

UITabBarController *tabBarController;

Expose it as a property, and make sure it’s available to Interface Builder:

@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

Save your work. In the implementation (.m), finish off your property work. Synthesize the property:

@synthesize tabBarController;

In the dealloc method, release it:

[tabBarController release];

In the applicationDidFinishLaunching: method, we need to change the default behaviour. As you can see in the template-provided code, the “window” object is set to become the key window (receives the key/input focus) and the visible view, with this line of code:

[window makeKeyAndVisible];

We do not want that behaviour. Instead, we want to see our own view – the “first” view managed by the “first” view controller in the tab bar controller’s array of view controllers. Therefore, comment out, or delete, the above line of code.

Just above, we created the tabBarController property. It has a “view” property. So, to replace the above line of code, we will add the tabBarController’s view to the window with this line of code:

[window addSubview:tabBarController.view];

Save your work.


Step 5 – Configure the MainWindow nib document

Open the MainWindow nib document in Interface Builder. From the object library, add a Tab Bar Controller to the MainWindow nib document. Notice that it it creates a hierarchy of objects, including a Tab Bar and two View Controllers. This is what your MainWindow nib document should look like at this point:

MainWindow.xib with Tab Bar Controller

Select the App Delegate. On the Connections Inspector, connect the tabBarController outlet to the nib document’s Tab Bar Controller.

In the nib document, select the Tab Bar Controller, and then expand its object hierarchy. Show the attributes inspector. Notice that – by default – it has two “View Controllers” listed.

Add a third view controller to the tab bar controller. There are several ways to do this. One way is to click the plus sign to add an item to the list. While you’re there, edit all the item titles. I suggest using “Red”, “Green”, and “Blue” as the item text. This text will appear as the tab button text.

Now, configure all the tab bar controller’s view controllers in the MainWindow nib. For each view controller you select:

On the Identity Inspector, set the class to the right view controller (e.g. RedVC)

Save your work. Run the application, and it should work properly.


Summary of this pattern

You should practice this pattern several times, until you can do it quickly and correctly, and until you understand why the pattern works. Here is a summary of the pattern:

  1. Create a Window-Based Application from the template
  2. Add view controllers and views
  3. Configure the views
  4. Configure the application delegate to work with a tab bar controller, by implementing a protocol and a property, and by setting the view that should appear when the application launches
  5. Configure the MainWindow nib document to organize the array of view controllers, and set the user interface


Categories: 2010 Winter DPS913
  1. May 21, 2010 at 4:40 pm

    Thanks so much for this tutorial! It helped me understand the concepts quickly and clearly. I really appreciate it!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

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

%d bloggers like this: