Home > 2010 Fall DPS913 > Tab bar app style introduction

Tab bar app style introduction

September 30, 2010 Leave a comment Go to comments

Here, we introduce the new iOS 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 iOS 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 iOS view controller classes.

An app that uses a tab bar offers the user different modes or tasks. 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 features a Tab Bar Controller object. 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 iOS

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 application:didFinishLaunchingWithOptions: method, we need to add the tab bar controller’s selected view to the window object. We do this with this line of code:

[window addSubview:tabBarController.view];

Note: There was a behaviour change in iOS 4. The main window must be explicitly configured to become visible when the app launches. See this Apple technical note for details.

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 Fall DPS913
  1. New App dep
    December 15, 2010 at 1:16 am

    dude, Thanks a lot.
    This pretty simply and esy to use

  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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: