Lập trình ứng dụng cho iPhone part 15

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 To function, a tab bar view controller requires a hierarchy of at least six objects: ■ One UITabBarController ■ A minimum of two UIViewController s ■ One UITabBar ■ A minimum of two UITabBarItem s This hierarchy of objects is depicted in figure 15.1. The tab bar controller and its associated view controllers are the heart of this setup. Essentially the tab bar controller switches off between different pages, each of which uses a view controller to manage its events. In Xcode you’d have to create and hook up these view controllers by hand, while in Interface Builder (which is what we’ll be using) it’s automated. In either case, you’ll need to fill in the controllers’ views once your controllers are ready to go. The tab bar itself is created automatically when you instantiate a tab bar controller. It displays a set of radio buttons that go at the bottom of the page. Each of those but- tons is a tab bar item (which Interface Builder also creates automatically). Each tab bar item then links to an individual view controller. Usually you shouldn’t have to mess with the tab bar at all; you can do all the modifications you require through either the tab bar controller or the view controllers. The connection between the tab bar controller and its tab bar is a simple delega- tion, as we’ve seen in use in previous chapters. The tab bar has a 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, though, we’ll look at how you’d create it by hand before we move over to simpler, tem- plate-driven object creation. CREATING YOUR TAB BAR CONTROLLER BY HAND To create a tab bar controller manually, begin with the Window-Based Application template. Use it to create a project imaginatively called “tabex.” Once you’ve created your project, you should pop straight over to Interface Builder by clicking on the MainWindow.xib file. To create a tab bar controller: 1 Drag the Tab Bar Controller object from the Library window (where you’ll find it under Controllers) to the nib display window. 2 Drop the Controller down next to your win- dow object. When you do that, a tab bar con- troller Main display window should appear. 3 Dismiss your old Main display; you won’t need it anymore. Instead you’ll create new objects as subviews of your tab bar controller. The results are shown in figure 15.2. Believe it or not, that’s it. All six objects of note have been created. The tab bar controller is accessible from the nib display window. The other five objects are accessible from the black bar at the bottom of the Main display window. Click a button once to get its UIViewController and a second time to get its 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 UITabBarController *tabBarController; ■ The template creates the view controller for the first window as part of a special FirstViewController class. You’ll probably want to have an individual view controller class for each tab to take care of events on a per-page basis, but that is easy enough to change by adding class files and adjusting the Identity tab for the view controllers. For now, leave things as they are so that we can examine how to work with the default template setup. ■ The template associates a second .xib file with the second view. It does this in a way we’ve seen before, by defining a nib Name for the view controller inside Interface Builder. For the rest of this section, we’re going to assume that you’re working with this pre- built tab bar controller template as your “tabex” project. With a working tab bar controller in hand, we can now start programming multi- ple pages of screens. 15.1.3 Building a tab bar interface At this point you’ve got a tab bar controller that contains two tabs, each of which has relatively empty content. You’ve also got tabs on your tab bar without pictures and without meaningful names. To build your tab bar interface, you’ll want to adjust all of these things. ADDING MORE TABS Inside Interface Builder you add tabs to the tab bar by going to the Attributes tab of the tab bar controller and clicking the plus sign (+) in its view controller area. A tab Tab bars and toolbars The 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 +. To allow for easy access to this new controller’s view, you’ll probably want to create a new .xib file and connect the view controller to that .xib file. Both of these proce- dures were described at the end of chapter 12. CONNECTING VIEWS Once you have the right number of tabs, you can then connect views to each of the tab bar’s view controllers. This can be done in three major ways: ■ You can input views through .xib files, as noted earlier. ■ If a view controller has its own class file, you can add views through the load- View or viewDidLoad method for that class. ■ If a view controller doesn’t have its own class file, you can load views elsewhere, such as in the app delegate’s applicationDidFinishLaunching: . We’ve already offered several examples for the first two ways to load views (including plenty of Interface Builder examples in chapter 12 and viewDidLoad: examples in chapter 13), so we’re not going to repeat those methods here. Instead, since the latter two view controllers don’t have their own class files, you’ll see how you can create their views using applicationDidFinishLaunching: . Honestly, it’d probably be simpler to create their views in Interface Builder, but this example will demonstrate how you can 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 controllers B 269The tab bar view controller secondController.view = secondView; UITextView *thirdView = [[UITextView alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; thirdView.text = @"A search function would go here."; thirdView.editable = NO; thirdController.view = thirdView; [window addSubview:tabBarController.view]; [secondView release]; [thirdView release]; } To access the view controllers, you just pull elements out of an array using the appro- priate NSArray calls B . You then associate views with each view controller, as you’ve done in the past C . Finally you link the tab bar controller to the window, using a call that was already sitting in your file when you loaded it D . You now have three modal pages (including that first controller’s page, which we assume was taken care of in its class files, provided by default by the template). Each does what you want, and navigation between them is easy. But you can still do some work to make your tab bar look better. MODIFYING THE BUTTONS 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. Sets views C Displays tab bar controller D Figure 15.3 You can customize tab bars to make navigation clear and simple. 270 C HAPTER 15 Creating advanced view controllers The title is the word that appears on the tab bar. You’ll probably set that in Inter- face Builder too, which just involves going to the tab in question and changing the text there. If you want to later change the title during runtime, it is accessible in Xcode. The catch is that these titles aren’t found in the tab bar controller. Instead, they follow the overarching idea of MVC : since a view controller is responsible for an individual view, it’s the controller that actually sets the title of the page. This is done with the view con- troller’s title property, which we’ve mentioned before and which we’ll meet again: secondController.title = @"Word Count"; The badge is the little red circle that appears above the title and over the icon on the tab bar. As always, you could change this in Interface Builder, but Xcode is where you’ll gen- erally want to do this work. That’s because the information in a badge is meant to be dynamic, changing as the view changes and alerting a user to new content during run- 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 the title of “Search” and the picture of a magnifying glass, as shown in figure 15.3. Once you’ve got the tab bar all set up, you’re ready to start using the controller. Table 15.1 From your view controllers, it’s easy to customize the associated tab bar items. Property Summary Interface builder Xcode badge Tab bar info Yes viewcontroller.tabBarItem.badgeValue icon Tab bar picture Yes only at init title Tab bar words Yes viewcontroller.title 271The navigation controller 15.1.4 Using your tab bar controller The main function of a tab bar is to allow navigation between multiple pages in your application. This is an implicit function of the object and you don’t need to do any- thing more to enable it. The rest of the tab bar controller’s functionality goes beyond our basic overview of the topic, but we’ll mention it briefly. There are two main ele- ments you want to consider: customization and delegation. TAB BAR CUSTOMIZATION One of the neat things about a tab bar is that users can customize them to contain exactly the tab bar items that interest them. You can allow this by setting the customi- zableViewControllers property to include a list of view controllers that can be changed by the user: tabBarController.customizableViewControllers = tabBarController.viewControllers; The UITabBar reference contains all the information you’ll need on managing cus- tomization itself. TAB BAR CONTROLLER DELEGATION As we noted, you can set a delegate for your tab bar controller to hand off the scant amount of event management that it requires. The delegate object must follow the UITabBarControllerDelegate protocol, which is a fancy way of saying that it’ll respond to two specific events: one when a view controller is selected and another when the tab bar controller is customized. There’s a protocol reference that covers the specifics of this. Two methods are associated with these protocols. tabBarController:didEndCus- tomizingViewControllers:changed: reports the end of tab bar customization and tabBarController:didSelectViewController: reports when the user switches be- tween controllers. The latter is probably more generally useful. For example, you might use it in your word count example to recalculate the word count totals when- ever a user jumps to the word count page. But now that you’ve got a basic example of how to navigate with a tab bar, you’re ready for the next advanced controller: the navigation controller. 15.2 The navigation controller The navigation controller is probably the most-seen user-interface item on the iPhone. Whenever you have a hierarchical set of pages where you can move up or down through the hierarchy, that’s the navigation controller at work. It appears in the Text, Calendar, Photos, and Notes iPhone utilities, just to name a few. Working with the navigation controller is a bit harder than working with the tab bar controller, because you have to manage your hierarchy of views live as the user interacts with your program, but the SDK still keeps it simple. As with our previous view controllers, we’ll look at an overview of the class, and then examine how to create, build, and use a navigation controller. Let’s get started with an overview of its hierarchy. 272 C HAPTER 15 Creating advanced view controllers 15.2.1 The anatomy of a navigation controller As with the tab bar controller, the navigation controller involves a whole hierarchy of items. The UINavigationController sits atop a stack of UIViewController s that can be pushed or popped as a user moves up and down through it. Each of these controllers also has an associated UINavigationItem , which will sit in the UINavigationBar when it’s active. Each UINavigationItem may also contain one or more UIBarButtonItem s, which allow for additional action items to sit on the navi- gation bar. To tie things back together, the UINavigationBar is also linked to the UINaviga- tionController so that navigation items and view controllers stay in sync over the course of a program’s runtime. Whenever a UIViewController loads into the UINavi- gationController , its UINavigationItem also loads into the UINavigationBar . A minimalistic navigation controller has just four objects in it: the UINavigation- Controller , the UINavigationBar , a stack containing a single UIViewController , and a UINavigationItem (which is placed into the UINavigationBar ). Presumably more view controllers and associated navigation items will be added to the stack as the program runs. This is all illustrated in figure 15.4. You’ll note how similar this diagram of navigation controller parts looks to figure 15.1, our diagram of tab bar controller parts. This is not an accident in our drawing, nor do we expect that it was an accident in Apple’s design. The navigation controller works quite a bit like the tab bar controller, and thus we’ll see familiar elements, such as the title of the view controller creating the title within the navigator itself. The biggest difference is that where the tab bar controller presented a modal par- adigm, entirely organized by the controller itself, the navigation controller instead creates a hierarchical paradigm. The navigation controller doesn’t have any particular sense of the organization of the entire structure. Instead, a linked list is created, with each navigation item only knowing about the pages on either side of it. A NOTE ON TABLE VIEWS The standard iPhone paradigm is to do hierarchical navigation through table views, each of which contains lists of many different subpages that you can go to. As a result, UINavigationController UIViewControllerUIViewController UINavigationBar UINavigationItemUINavigationItem UIBarButtonItemUIBarButtonItem (optional) (optional) Figure 15.4 The navigation controller will contain at least four objects, and may be built into a complex web of interconnections. 273The navigation controller despite the fact that any UIViewController could sit beneath a UINavigation- Controller , it’ll usually be a UITableViewController . This is exactly the setup we’ll see in the navigation-based template. 15.2.2 Creating a navigation controller To create a navigation controller, create a new project (which we’re calling “navex”) using the Navigation-Based Application template. You can page through the .xib file and the Xcode listing to see what you’ve been given. Let’s start with the .xib files, whose content you can see in figure 15.5. Figure 15.5 The navigation controller template contains two .xib files, one for the main view (left) and one for what appears inside the controller (right). [...]... the stack, without any work on your part OTHER TYPES OF NAVIGATION Navigation doesn’t have to be just forward and backward You can also do some slightly more complex things, either during setup or at runtime At setup you can choose to create a navigational hierarchy and push a user into it before he or she takes any actions You can see this in action in various iPhone programs Mail always returns you... framework The template instead creates a subclass of ViewController within your program 15. 3 Using the flipside controller MainWindow.xib To create a flipside controller, choose the Utility Application template when you start a new projRootViewController ect It will create a small hierarchy of objects, as shown in figure 15. 7 MainViewController The flipside controller contains three view MainView.xib FlipsideViewController... chapter 15. ) Although we’ve completed our introduction to the iPhone SDK, we’re not done yet We’re going to finish this book by looking at some of the neat tools that are available inside the SDK, including a look at internet-related tools, bringing us full circle to the web techniques that opened this book Our first stop, however, is an in-depth look at the many ways to input data into an iPhone program... The navigation controller controller’s stack, which will then cause that new view controller’s view to become the visible view in your program This is shown in listing 15. 3, which continues to expand upon RootViewController.m Listing 15. 3 Activating a navigation controller - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { B UIViewController *colorController... sends your user over to it 278 CHAPTER 15 Creating advanced view controllers NAVIGATING BACKWARD Once you’ve loaded a new page onto a navigation controller’s stack, it appears with all the peripherals you’d expect, including a titled navigation bar with a titled back button (each based on the title property of the appropriate controller) This is all shown in figure 15. 6 You also don’t have to worry about... CHAPTER 15 Creating advanced view controllers Mainwindow.xib contains a UINavigationController in the nib window with a UINavigationBar hidden under it The main display window contains a UINavigationItem and a RootViewController The latter is a subclass of UITableViewController created through Xcode, just as when you designed your own table controller in chapter 13 Note that this sets up the standard iPhone. .. accessory view of type UITableViewCellAccessoryDisclosureIndicator That’s the standard chevron used to indicate hierarchical navigation Listing 15. 2 includes all of the major elements required to define this navigation table inside RootViewController.m Listing 15. 2 A table for a navigator - (id)initWithCoder:(NSCoder *)decoder { self = [super initWithCoder:decoder]; The navigation controller 275 if (self)... creates a special toggleView method for when the info button at the bottom of the page is pushed When this happens, the FlipsideViewController also loads Listing 15. 4 shows this standard method, which you shouldn’t have to modify at all Listing 15. 4 The flipside toggler - (IBAction)toggleView { if (flipsideViewController == nil) { [self loadFlipsideViewController]; } UIView *mainView = mainViewController.view;... more advanced work you’re going to do yourself For example, take a look at the MainWindow.xib file You’ll note there that connections are made to two different files, as Figure 15. 8 Objects in Interface Builder can shown in figure 15. 8 The app delegate file connect to a variety of different files contains a link to the root view controller object, while the root view controller file contains links to the... specific tasks: the modal view controller Summary 281 15. 4 Modal view controllers Technically, a modal view refers to a temporary view that’s placed on top of all of the elements of an existing view and then later dismissed A modal view controller is a view controller that manages such a modal view Practically, the modal views already available in the iPhone OS are all “helper” programs, which allow you . in figure 15. 4. You’ll note how similar this diagram of navigation controller parts looks to figure 15. 1, our diagram of tab bar controller parts. This. figure 15. 3. Sets views C Displays tab bar controller D Figure 15. 3 You can customize tab bars to make navigation clear and simple. 270 C HAPTER 15 Creating