Tab bar app style introduction

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.

This post was most recently updated in September 2011.

.

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, create three view controllers (right-click, New File, UIViewController subclass, etc.). Each will manage a view. We 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 (the nib file), do the following:

  • Open it
  • 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. Add a tab bar controller 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 = _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, placed before [self.window makeKeyAndVisible];:

[self.window addSubview:self.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. If you (sigh) are looking at other code samples on the web, or in old books, you will likely not see this explicit configuration.

Save your work.

There is an optional configuration action that can be done. We do not need it for this app, but you may be interested in the future. It is described next.

You can set a delegate for the UITabBarController. If you do, the delegate can respond to tab bar taps with additional behaviour.

Open the app delegate’s .h interface. We need to tell it to become the tab bar controller delegate. Do the following:

The application delegate already implements the UIApplicationDelegate protocol. Add theUITabBarControllerDelegate 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> {

Then, in the app delegate’s .m implementation, implement the methods you want. They are documented in the UITabBarControllerDelegate protocol reference.

.

Step 5 – Configure the MainWindow nib document

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

.

In the nib document, 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 simply to select one of the existing View Controller objects, and then copy-paste it.

Next, edit the tab 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, set the Class to the right view controller (e.g. RedVC) on the Identity Inspector. At this point in time, your dock should look like this:

.

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

If you performed the optional configuration action, to add a UITabBarController delegate, then you must do one more task. In the dock, select the Tab Bar Controller. Show the Connections Inspector. Connect the delegate property to the App Delegate.

.

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

.


.

.

.

Advertisements
  1. Dan
    April 20, 2011 at 1:46 pm

    Peter, just went this tutorial – and it worked just as explained. Being a novice iOS developer I like how you left the fine details out like “in this window click this button then do this or that”… if left me to figure it out and think more about what I was doing.

    Is it a common practice or industry standard to always create Tab Bar apps using the “Window-Based Application” instead of the “Tab Bar Application” ?

    I’ve got an App (tab bar type) in mind that I am slowly working on – it consists of Map (save points), Table View (list of data user has created), and a screen to Enter Data. I’ve broken the App down by functionality and trying to learn those segments of the functionality (maps, tabular data, etc…). Do you have any advice for me?

    Great tut!

    • petermcintyre
      May 4, 2011 at 1:43 pm

      Yes, it is a best practice to start with a “Window-based Application”. (I would further suggest that the Core Data option be checked/selected.) This approach enables you to decide what view your app starts with, while enabling you to change it later if your needs evolve.

      You’ll find that adding the first view to a Window-based Application is easy, consistent, and straightforward, whether it is a launcher-type view, a tab bar based view, or a navigation based view. Doing it this way also enables you to clearly learn the role and configuration of each kind of view.

      Advice? Implement viewDidAppear to refresh a view with data that may have been updated/edited on another view in a tab bar app. Alternatively, you could use a delegate pattern to push the updates.

      Good luck!

  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: