The first project that we’ll be building in this article will create and manage multiple views from scratch. This will
serve as an exercise to familiarize you with an approach to dealing with
multiple views and introduce you to some new methods and properties, as
well as the toolbar interface element.
Implementation Overview
Much as a single-view
application uses a view controller to direct the interactions of its
interface elements, a multi-view application needs a controller to help
it switch between different views. In this implementation, we’ll be
creating a typical view-based application but will be using the default
view controller (UIViewController) to
swap in and out three additional views—each with its own controller. The
default controller will need to implement methods for clearing the
current view and loading any of the other views—in any order, at any
time.
In addition, our default view
will be setting up a toolbar. We’ll use the toolbar to provide quick
access to view switching via a row of buttons at the bottom of the
screen, as shown in Figure 1.
By the Way
One interesting challenge
that we need to overcome with this implementation is that while our main
view will include the toolbar, it must be visible in all of the other
views as well. We’ll need to display the views “under” the toolbar so
that it isn’t hidden as new views are shown or removed.
Setting Up the Project
To begin, start Xcode and create a new application called MultipleViews
using the View-Based Application template. The layout of this template
should be getting very familiar by now. The MainWindow.xib includes a
view controller that loads its view from a second XIB file,
MultipleViewsViewController.xib. This XIB file will hold the toolbar
that serves as our interface for switching between views, as well as
instances of three new view controllers that will ultimately manage
three new views.
Adding Views and View Controllers
Each of the views that we will be switching between needs its own view controller and XIB file. Create three new UIViewController subclasses (File, New File, Cocoa Touch Class, UIViewController subclass) and name them as follows:
FirstViewController
SecondViewController
ThirdViewController
Be sure to check the With XIB
for User Interface checkbox for each of the new classes that you create.
After you’ve created the files, drag the XIB files to the Resources
group. Your Xcode Classes and Resources groups should resemble Figure 2.
By the Way
The goal of this project
is to create a simple application that switches between independently
controlled views. It is certainly possible that each of the views could
share a view controller, but structurally it is a good practice to use
separate controllers for views that do not serve the same function.
Prepping the View Content
To make sure that we know
(visually) which view is which, open each of the three XIB files that
correspond to the view controller classes in Interface Builder. For each
view, drag a text label (UILabel) from
the Library (Tools, Library) into the view. Change the text of the label
to 1 in FirstViewController.xib, 2 in SecondViewController.xib, and 3
in the ThirdViewController.xib file. In the sample files, for this
project, we’ve also set the font size to 288 points for each label by
using the Attributes Inspector (Command+1), as shown in Figure 3.
Remember that we’re going to be
overlaying a toolbar on each of these views, so you don’t have the
entire screen real estate to work with. Although we can’t see the
toolbar just yet, we can simulate it for the purposes of laying out the
view. To add a simulated toolbar to the view, select the view itself
within the Interface Builder Document window and then press Command+1 to
open the View Attributes Inspector. Choose Toolbar from the Bottom Bar
Simulated User Interface Elements pop-up menu, demonstrated in Figure 4.
