264
Creating advanced
view controllers
When we started our look at view controllers in chapter 13, we promised that
we’d return to the more advanced view controllers that manage several pages of
content at once. That’s the purpose of this chapter: to introduce you to the final
fundamental building block of the iPhone
OS
that allows you to build complex
multipage applications.
In this chapter we’ll take an in-depth look at two view controllers: the tab bar
controller and the navigation controller. We’ll also take a briefer look at the flipside
controller that appears in one of Xcode’s templates and talk about some modal
controllers that we’ll see in part 4 of this book.
As in our previous chapter on view controllers, we’ll offer some more skeletal
examples since our main purpose is to provide you with the reusable programming
frameworks that will allow you to use these controllers in your own programs. Let’s
kick off our discussion with the tab bar view controller.
This chapter covers
■
Tab-based interfaces
■
Navigation-based interfaces
■
The flipside controller
265The tab bar view controller
15.1 The tab bar view controller
Of the multipage view controllers, the tab bar is the easiest to use because it supports
simple navigation between several views. As with all of the advanced view controllers, it
has a complex underlying structure incorporating several objects that work in tandem.
15.1.1 The anatomy of a tab bar controller

delegate
property
that is hooked up to the controller, which must respond to the
UITabBar-
Delegate
protocol.
The tab bar controller can also designate a
delegate
. The controller’s delegate
must follow the
UITabBarControllerDelegate
protocol. This protocol requires
response to two types of high-level events: when the tab bar is rearranged and when a
view controller is selected.
UITabBarController
UIViewControllerUIViewController
UITabBar
UITabBarItemUITabBarItem
Figure 15.1 A collection of six
objects (at minimum) is required
to create a functioning tab bar
controller.
266
C
HAPTER
15
Creating advanced view controllers
15.1.2 Creating a tab bar controller
Each of the advanced view controllers has its own Xcode template that you can use to
immediately instantiate the controller. Since this is our first advanced view controller,

UITabBarItem
. Click in the middle of the strip
(between the buttons) to access the
UITabBar
. By
selecting these items, you can set their attributes, con-
nections, size, and identity.
We took this slight diversion into the “harder”
side of tab bar controller design to show what all the objects look like in Interface
Builder. If you’ve been following on a computer, we suggest clicking around for a
while to see how everything works. Once you’ve seen all of the fundamental objects
that are created as part of an advanced view controller, we’ve played the Window-
Based Application template’s last trick. In the future we’re just going to jump straight
to the appropriate template for each sort of view controller—starting with the tab bar
controller template.
Figure 15.2 Just dragging a tab bar
controller to the nib display window
creates the whole tab bar interface.
267The tab bar view controller
CREATING YOUR TAB BAR THROUGH A TEMPLATE
It’s even easier to create a tab bar controller using the existing tab bar template. Just
select Tab Bar Application when you create a new project. This template will set you
up with a tab bar controller much like the one you just created by hand, except it does
three additional things:
■
The template defines the tab bar controller as an
IBOutlet
, giving the app del-
egate access to the object
IBOutlet

UIKit
supports two very similar interfaces, the
UITabBar
and the
UIToolBar
.
They each include a strip of icons that goes along the bottom of the screen. Their
main difference is in functionality.
The
UITabBar
is intended as a modal interface that changes the selections when
they’re tapped (usually with a permanent highlight). The purpose of the
UIToolBar
is
to provide a menu of possible actions that don’t change the appearance of the se-
lection when tapped (except with a temporary highlight).
Despite their similar appearance, the two items share no inheritance other than a
common ancestor in
UIView
. Consider it convergent evolution.
We’ll present a fully functional example of a
UIToolBar
in chapter 18, section 18.4.
268
C
HAPTER
15
Creating advanced view controllers
bar item and related view controller will be added to the right-hand side of your bar.
Go ahead and create a third tab by clicking the +.

use the tab bar controller.
Although you don’t have outlets for the controllers themselves, you can link to
them straight from the tab bar controller object, which you do have access to, thanks
to that
IBOutlet
that we’re already seen. This relates to a concept that we discussed
when talking about basic view controllers in chapter 13; since view controllers have to
do MVC management, they should give you easy access to related objects. Within the
tab bar controller is a
viewControllers
property, which is an
NSArray
list of the view
controllers that a tab bar controller contains.
Listing 15.1 shows how to access this information and programmatically build a
couple of views for the second and third controller within tabexAppDelegate.m. This
is the skeleton of a simple program that would let you edit a text view in the first win-
dow, keep a count of what you’ve written in the second, and search in the third.
- (void)applicationDidFinishLaunching:(UIApplication *)application {
UIViewController *secondController =
[tabBarController.viewControllers objectAtIndex:1];
UIViewController *thirdController =
[tabBarController.viewControllers objectAtIndex:2];
UITextView *secondView = [[UITextView alloc]
initWithFrame:[[UIScreen mainScreen] bounds]];
secondView.text = @"A word count would appear here.";
secondView.editable = NO;
Listing 15.1 A tab bar controller setup
Retrieves
view

Although we have views associated with each button, the
buttons just say First, Second, and Third, rather than
providing any useful clue as to a button’s purpose. You
can change three things on each button to improve their
usability: the icon, the title, and the badge. Figure 15.3
shows the goal, which is to fill out some or all of this
information for each of our tab buttons.
The icon is the image that appears on the tab bar
item. This image can only be set when you create a tab
bar item. If you were creating the tab bar programmat-
ically, you’d use the
initWithTitle:image:tag:
meth-
od when creating the tab bar item. More likely, you’ll just
go into Interface Builder and load a small
PNG
graphic
that you want to use.
This process is similar to incorporating the image
into your project in chapter 12. You should create a
transparent
PNG
that’s approximately 30 x 30. If your
image is too big, the
SDK
will resize it, but it’s better to
start off at the right size. After you drag the image into
your project, you’ll be able to load it up in Interface
Builder. We used a Wingdings font to create the simple
images that appeared in figure 15.3.

time. It’s badges, for example, that tell you when you have new mail or new voicemail.
Getting to the badge property is a two-step process. You’ll start with your view con-
troller. From there you access
tabBarItem
, which is a property of the controller that
links you to its connected tab bar item, and then
badgeValue
, which is a property of
the tab bar item. Fortunately, this can all be done as one nested line:
secondController.tabBarItem.badgeValue = @"16";
The
16
, as it happens, is the initial character count of the main text view. If you were
building a live program, you could change this count over the course of your program’s
runtime.
Table 15.1 summarizes the three main elements of the tab bar and how to custom-
ize them.
There’s one more way to change both the icon and the title of a tab bar item simulta-
neously: by creating a tab bar item with the
initWithTabBarSystemItem:tag:
method. This creates a tab bar using one of the constants defined under
UITabBar-
SystemItem
, each of which relates to a standard iPhone function and correlates a
name and a picture with that function.
You’ll probably be doing this in Interface Builder, where you select a specific
“Identifier” instead of entering a title and a picture. Since your third tab allows
searches, you can initialize it as a
UITabBarSystemItemSearch
button, which gives it