Tài liệu Lập trình iPhone part 6 ppt

For example, the iPhone“ iPod application uses a tab bar to switch between different methods of organizing your music and a navigation bar controller to allow you to browse your music b

Multiview

Applications

ntil this point, we’ve written applications with a single view controller

ile there certainly is a lot you can do with a single view, the real power of

the iPhone platform emerges when you can switch out views based on user

input Multiview applications come in several different flavors, but the under-

lying mechanism is the same, regardless of how it may appear on the screen

Strictly speaking, we have worked with multiple views in our previous appli-

cations, since buttons, labels, and other controls are all subclasses of UIVi ew

and can all go into the view hierarchy But when Apple uses the term “view” in

documentation, it is generally referring to a subclass of UIVi ew that has a cor-

responding view controller These types of views are also sometimes referred

to as content views, because they are the primary container for the content of

our application

The simplest example of a multiview application is a utility application A utility application focuses primarily on a single view but offers a second view that can be used to configure the application or to provide more detail than the primary view The Stocks application that ships with iPhone is a good example (see Figure 6-1) If you click the little jicon in the lower right corner, the view flips over to let you configure the list of stocks tracked by the application There are also several tab bar applications that ship with the iPhone, such as the Phone application (see Figure 6-2) and the Clock application A tab bar application is a multiview application that displays a row of buttons at the bottom of the screen Tapping one of the buttons causes a new view controller to become active and a new view to be shown In the Phone application, for example, tapping Contacts shows a different view than the one shown when you tap Keypad

OTE

Tab bars and toolbars can be confusing A tab bar is used for selecting one and only one option from

among two or more A toolbar can hold buttons and certain other controls, but those items are not

mutually exclusive In practical application, the tab bar is almost always used to select between two or more content views, while the tool bar is usually used to display buttons for doing common tasks

Stocks

© “DJi-DOW JONES INDU

© AAPL - APPLE INC (Nasd

© GOOG - GOOGLE (Nasda

© YHOO - YAHOO INC (Nas

© T-AT&T

id iw im 3m 6m ty GD

14165 Dy)

11881

N rs Dec A'07 Aug Dec A'08

Ly li Markets closeđ eo YAHOO! FINANCE

Figure 6-1 The Stocks application that ships with iPhone Figure 6-2 The Phone

has two views, one to display the data and another to application is an example

configure the stock list of a multiview application

using a tab bar

Another common kind of multiview iPhone application is the navigation-based application,

which uses a navigation bar controller to present hierarchical information to the user The

Mail application is a good example (see Figure 6-3) In Mail, the first view you get is a list

of your mail accounts Touching one of those takes you into a list of your folders Touching

a folder shows you the e-mail messages in that folder, and touching the e-mail message shows you the content of the message A navigation-based application is useful when you want to present a hierarchy of views

Because views are themselves hierarchical in nature, it’s even possible to combine different mechanisms for swapping views within a single application For example, the iPhone“ iPod

application uses a tab bar to switch between different methods of organizing your music

and a navigation bar controller to allow you to browse your music based on that selection (see Figure 6-4)

Each of these types of multiview application uses a specific controller class from the UIKit

Tab bar interfaces are implemented using the class UITabBarControl ler and navigation

interfaces using UINavigationController.In this chapter, we’re going to focus on the

structure of multiview applications and the basics of swapping content views by building

our own multiview application from scratch We will write our own custom multiview con- troller, which will give you a strong foundation for taking advantage of the various multiview controllers that Apple provides

Figure 6-3 The iPhone Mail Figure 6-4 The iPod applica-

application is an example of tion uses both a navigation

a multiview application using bar and a tab bar

a navigation bar

The View Switcher Application

The application we're going to build in this chapter, View Switcher, is fairly simple in appear- ance, but in terms of the code we're going to write, it’s by far the most complex application we've tackled View Switcher will consist of three different controllers, three nibs, and an application delegate

When first launched, View Switcher will look like Figure 6-5, with a toolbar at the bottom

containing a single button The rest of the view will contain a blue background and a button

Although we could achieve this same functionality by writing a single-view application,

we're taking this more complex approach to demonstrate the mechanics of a multiview application There are actually three view controllers interacting in this simple application, one that controls the blue view, one that controls the yellow view, and a third special con- troller that swaps the other two in and out when the Switch Views button is pressed

|_ Blue View Button Pressed

Press Me, Too

You pressed the button on the blue

Figure 6-5 View Switcher Figure 6-6 After pressing Figure 6-7 Pressing the

at launch the Switch Views button center button shows an alert

The Architecture of a Multiview Application Before we start building our application, let’s talk a little bit about the way iPhone multiview applications are put together Nearly all multiview applications use the same basic pattern The nib file is a key player here Once you create your project, you'll find MainWindow.xib in your project window's Resources folder Inside the file, along with the application delegate and the application’s main window, there will be an instance of a controller class that is responsible for managing which other view is currently being shown to the user This root controller is often an instance of UINavigationController or UITabBarControl ler,

though it can also be a custom subclass of UIViewControl ler The job of the root control-

ler is to take two or more other views and present them to the user as appropriate, based

on the user's input A tab bar controller, for example, will swap in different views and view controllers based on which tab bar item was last tapped A navigation controller will do the

same thing as the user drills down and back up through hierarchical data

Multiview Controllers Are View Controllers

It's important to understand that each of these multiview controllers is a view controller Even the provided multiview classes UITabBarControl ler and UINavigationController

are subclasses of UIViewControl ler and can do anything other view controllers can do The

root controller is the primary view controller for the application and, as such, is the view that specifies whether it is OK to automatically rotate to a new orientation

In multiview applications, most of the screen will be taken up by a content view, and each content view will have its own controller with its own outlets and actions In a tab bar appli- cation, for example, the events generated by touching the tab bar will go to the tab bar

controller, but events anywhere else on the screen will go to the controller that corresponds

to the content view currently being displayed

Anatomy of a Content View

Each view controller, besides the multiview controller, controls a content view, and these content views are where the bulk of your application’s user interface gets built Each content

view is generally made up of two or three pieces: the view controller, the nib and, option-

ally, a subclass of UIView When you create a new Xcode project using a multiview template,

you will always be provided with files for all three of these components The controller and

nib are generally required Although you can create your interface in code rather than using

a nib file, few people choose that route because it is more time consuming and more diffi- cult to maintain

You also will get a UIVi ew subclass for each content view, but you won't always need it

In fact, you usually won't need the UIVi ew subclass, but it’s provided in case you need to

change the appearance or behavior of your content view beyond what's possible using

the attributes inspector in Interface Builder In this chapter, we'll only be creating a nib and

a controller class for each content view

A content view is created indirectly by instantiating its controller class and specifying a nib

name Nibs are typically named using the same name as the controller class So the class

called MyControl ler would typically load a nib file called MyController.xib

The root controller gets created when the application loads MainWindow.xib

Building View Switcher

We know you've been patiently waiting for us to use an Xcode template other than a view-based application Well, your patience is about to be rewarded! Select New Project from the File menu or press 88<+N When the assistant opens up, select Window-Based Application (see Figure 6-8), and type in a project name of View Switcher

Choose a template for your new project:

i iPhone OS ms

ay Mac OS X Navigation-Based OpenGL ES Tab Bar

Application Application Application Application

Audio Units

a

Automator Action oe = x

Bundle

Command Line Utility Utility Application View-Based Window-Based

Dynamic Library Application Application

Figure 6-8 Selecting a new project template

The template we just selected is actually even simpler than the one we ve been using up to now This template will give us a window, an application delegate, and nothing else—no views, no controllers, no nothing You won't use this template very often when you're

creating applications, but by starting from nothing, you'll really get a feel for the way

multiview applications are architected

Take a second to expand the Resources and Classes folders in the Groups & Files pane and look at what's there You'll find a single nib file, MainWindow.xib, the Info.plist file, and the two files in the class folder that implement the application delegate Everything else we need for our application, we will have to have to create

Creating Our View Controller and Nib Files

One of the more daunting aspects of creating a multiview application from scratch is that

we have to create several interconnected objects We're going to create all the files that will make up our application before we do anything in Interface Builder and before we write any code By creating all the files first, we'll be able to use Xcode’s Code Sense to write our code faster If a class hasn't been declared, Code Sense has no way to know about it, so we would have to type it in full every time, which takes longer and is more error prone

Fortunately, in addition to project templates, Xcode also provides file templates for many standard file types, which makes creating the basic skeleton of our application fairly easy Single-click the Classes folder in the Groups & Files pane, and then type 36N or select New File from the File menu Take a look at the window that opens up (see Figure 6-9)

[xoo New File |

Choose a template for your new file:

Code Signing NSObject subclass UITableViewCell UITableViewContr

Settings subclass oller subclass

Pure Java Description An Objective-C class which is a subclass of

Pure Python UlViewController, with an optional header file which

Risby includes the <UIKit/UIKit.h> header

If you select Cocoa Touch Classes from the left-hand pane, you will be given templates for a num- ber of common Cocoa Touch classes Select U/ViewController subclass, and click Next Type in the name SwitchViewController.m, and make sure that Also create “SwitchViewController.h” is checked

before clicking the Finish button Xcode should add two files to your Classes folder; the

Swi tchVi ewControl er class will be your root controller Repeat the same steps two more times to create BlueViewController.m and YellowViewController.m, making sure to also create the corresponding header files for both These are the two content views that will get swapped in and out by SwitchViewControl ler

We also need two more nib files, one for each of the two content views we just created To create these, single-click the Resources folder in the Groups & Files pane so that we create them in the correct place, and then press 88N or select New File from the File menu again This time, when the assistant window comes up, select User Interfaces under the iPhone OS

heading in the left pane (see Figure 6-10)

Choose a template for your new file:

= 7

| iPhone OS m | v

Code Signing Application XIB Empty XIB View XIB

Cocoa Description An Interface Builder document for creating a Cocoa Touch

Interface Builder SDK view

P

een To customize this document, drag controls from the

Pure Python Library onto the view and use the Inspector to set

Ruby properties Consider adding a view controller, or custom

Sync Services controller class with outlets and actions connected to your

views to customize their behavior

Other

Previous)

Z

Figure 6-10 Creating nib files for the content views

Select the icon for the View X/B template, which will create a nib with a content view, and then click the Next button When prompted for a filename, type BlueView.xib Repeat the steps to create a second nib file called YellowView.xib Once you've done that, you have all the files you need It’s time to start hooking everything together

Modifying the App Delegate

Our first stop on the multiview express is the application delegate Single-click the file View_ SwitcherAppDelegate.h in the Groups & Files pane, and make the following changes

TBOutlet SwitchViewController *switchViewController;

@property Cnonatomic, retain) UIWindow *window;

@property (nonatomic, retain) SwitchViewController *switchViewController;

@end

The IBOut let declaration you just typed is an outlet that will point to our application's root controller We need this outlet because we are about to write code that will add the root con- troller’s view to our application’s main window By doing that, when we go to Interface Builder and add an instance of the SwitchViewControl ler class to MainWindow.xib, we'll already have an outlet to connect it to

Now, we need to add the root controller’s view to our application’s main window Click View_ SwitcherAppDelegate.m, and add the following code:

- (void)applicationDidFinishLaunching: CUIApplication *)application {

// Override point for customization after app launch

[window addSubview: switchViewController.view];

[window makeKeyAndVisible] ;

We'll need one action method to toggle between the two views We won't need any outlets, but we will need two other pointers, one to each of the view controllers that we're going to

be swapping in and out These don’t need to be outlets, because we're going to create them

in code rather than in a nib Add the following code to SwitchViewController.h:

@property (retain, nonatomic) YellowViewController *yellowViewController;

@property (retain, nonatomic) BlueViewController *blueViewController; -CIBAction) switchViews: (id) sender;

@end

Now that we've declared the action we need, we can add an instance of this class to

MainWindow.xib

Modifying MainWindow.xib

Save your source code, and double-click MainWindow.xib to open it in Interface Builder Four icons should appear in the nib’s main window: File’s Owner, First Responder, View_ SwitcherAppDelegate, and Window (see Figure 6-11) We need to add one more icon that will represent an instance of our root controller Since Interface Builder's library doesn’t have a SwitchVi ewControl ler, we'll have to add a view controller and change its class to

SwitchVi ewControl ler

Since the class we need to add is a subclass of UIViewControl ler, look in the library for

View Controller (see Figure 6-12), and drag one to the nib’s main window

Library - Cocoa Touch Plugin ~ Controllers ˆ

“View Controller - A controller that ⁄

L3 supports the fundamental view~

=—== ` management model in iPhone OS

views

Tab Bar Controller - A controller that

manages a set of view controllers that

Navigation Controller - A controller that

manages navigation through a hierarchy of

represent tab bar items

Table View Controller - A controller that

manages a table view

‘a

Figure 6-12 View Controller in the library

Once you do this, your nibs main window will now have five icons, and a new window con- taining a dashed, grey, rounded rectangle labeled View should appear (see Figure 6-13)

We just added an instance of UIViewController, but we actually need an

instance of SwitchViewControl ler, so let's change our view controller's class to

SwitchViewControl ler Single-click the View Controller icon in the nib’s main window, and press 364 to open the identity inspector (see Figure 6-14)

The identity inspector allows you to specify the class of the currently selected object Our

view controller is currently specified as a UIViewControl ler, and it has no actions defined

Click inside the combo box labeled Class, the one at the top of the inspector that currently reads U/ViewController Change the Class to SwitchViewController Once you make that change, the switchViews: action method should appear in the section labeled Class Actions (see Figure 6-15) You should also notice that in the nib’s main window, the name of that new icon has switched from View Controller to Switch View Controller

We now need to build our root controller's view Remember that new window that appeared when we dragged the generic view controller onto the main nib window (see Figure 6-13)? We'll build the view for SwitchViewController in that window

Lock | Nothing (Inherited) -$3 >

i v

Figure 6-13 The window representing Figure 6-14 The Identity Inspector

your view controller in Interface Builder

As a reminder, Swi tchVi ewControl ler’s job is to switch between the blue view and the yellow view To do that, it will need a way for the user to change the views, and for that, we're going to use a toolbar with a button Let’s build the toolbar view now

Drag a View from the library onto the window shown in Figure 6-13 Hint: it’s the one

with a grey background that says View The grey background should be replaced by this new view

Now grab a toolbar from the library, drag it onto your view, and place it at the bottom, so that it looks like Figure 6-16

The toolbar features a single button Let’s use that button to let the user switch between the different content views Double-click the button, and change its title to Switch Views Press the return key to commit your change

Now, we can link the toolbar button to our action method Before we do that, though,

we should warn you: toolbar buttons aren't like other iPhone controls They only support

a single target action, and they trigger that action only at one well-defined moment, the equivalent of a touch up inside event on other iPhone controls

Lock Nothing (Inherited)

Figure 6-15 The identity inspector Figure 6-16 Adding a toolbar to the view

after changing the class to controller“s view

SwitchViewController