iPhone SDK Programming A Beginner’s Guide phần 5 ppt

Chapter 9: UINavigationBar and UINavigationController 177 Listing 9-10 SecondViewController.m #import "SecondViewController.h" @implementation SecondViewController - (IBAction) popSecondView{ [self dismissModalViewControllerAnimated:YES]; } - (void)dealloc { [super dealloc]; } @end 10. Open FirstViewController.xib and connect the button to the showDetails action. 11. Open SecondViewController.xib and add a navigation bar to the view’s canvas just below the view’s status bar. Also add a bar button item to the newly added navigation bar. 12. Change the navigation bar’s style to Black Translucent (Figure 9-18). Save and close the nib. Figure 9-18 Changing to Black Translucent (continued) 178 iPhone SDK Programming: A Beginner’s Guide 13. Connect the newly added bar button item to the File’s Owner popSecondView Action. 14. Save and exit Interface Builder. 15. Build and run the application. Refer to FirstViewController in Listing 9-8. The first problem with trying to duplicate the Utility Application template’s results is how to make the navigation bar invisible on the first view but visible on the second view. Adding the following line to the viewWillAppear: method in FirstViewController accomplishes the invisible/visible requirement and ensures the navigation bar is hidden on the first view. [self.navigationController setNavigationBarHidden:YES animated: NO]; The showDetails: method is the action connected to the First View’s info button. When you click the info button, it invokes showDetails:. Note that when the navigation controller pops the second view from the stack, the first view’s viewWillAppear: is invoked, ensuring the navigation bar is again hidden. More on the UINavigationController You are not limited to pushing items onto a stack. You can also pop items off the stack. You can also modify the navigation bar, hiding elements, adding new ones, and making other modifications. Pushing and Popping You pop view controllers from a stack using the method popViewControllerAnimated:. This method pops the top view controller off the navigation controller’s stack and updates the displayed view to the stack’s next view controller’s view. (UIViewController *) popViewControllerAnimated: (BOOL) animated The method takes one parameter, which indicates if the transition should be animated. The method also returns the popped view controller, should you wish to retain it for future use. Other methods you might use include popToRootViewControllerAnimated: and popToViewController:animated:. Refer to Apple’s online reference, “UINavigationController Class Reference,” for more information. Configuring the Navigation Bar In the previous example, you hid the navigation bar by calling the navigation controller’s setNavigationBarHidden: method. - (void)setNavigationBarHidden:(BOOL)hidden animated:(BOOL)animated Chapter 9: UINavigationBar and UINavigationController 179 Try This This method hides or displays the navigation bar, depending upon if you passed YES or NO as the initial parameter. You also specify if the navigation bar should slide in from the top by specifying YES for the animated parameter. You might also change a navigation bar’s style by changing its style property. You can use code to change the navigation bar’s style, but the easiest way to do this is through Interface Builder. You can also change a navigation bar’s color. You change the color using the tintColor property. Using a Navigation Controller in a Tab Applications usually use a navigation bar with other navigation views, such as a tab bar or table view. You haven’t learned about table views yet—you won’t learn about using a table view with a navigation bar until Chapter 10. However, you learned about the tab bar in Chapter 8. A navigation bar might be placed within a tab bar. For instance, returning to the App Store application, notice the navigation screens are steps within the Categories tab (see Figure 9-1). The Featured, Categories, Top 25, and Updates tabs are different views on the same data. The Search tab is a subtask. Within the Categories tab, there is a navigation bar combined with a table view. This combination provides a way to drill down hierarchically to a specific application. Although you don’t learn about tables until Chapter 10, consider a navigation bar in a tab. 1. Create a new Window-based Application. Name the application NavInTab. 2. Create two new UIViewController classes. Name the first FirstTabViewController and the second StepTwoViewController; be certain to create nibs for both. 3. Open both newly created nibs and change the background color for each view. 4. Open MainWindow.xib and add a UITabBarController to the document. 5. Delete the first tab bar view controller. Drag a navigation controller to the document and drop it so it is the first item below the tab bar (Figure 9-19). 6. Change the navigation controller’s root view controller to FirstTabViewController by changing its class and nib name in the Inspector. The canvas should indicate the view is from FirstTabViewController.nib (Figure 9-20). 7. Change the navigation item’s title from “Root View Controller” to “step one.” 8. Drag a bar button item from the library to the navigation item in the Document window (Figure 9-21). Change the button’s title to “Next.” The button should automatically be set as the navigation item’s rightBarButtonItem. If not, connect the navigation item’s rightBarButton outlet to the newly added bar button item. 9. Save and exit Interface Builder. (continued) 180 iPhone SDK Programming: A Beginner’s Guide Figure 9-19 Adding a navigation controller Figure 9-20 Canvas indicates view is from a different nib Chapter 9: UINavigationBar and UINavigationController 181 10. Open NavInTabAppDelegate.h and NavInTabAppDelate.m and adopt the UITabBarController Delegate protocol. Also add a UITabBarController property and a UINavigationController property. Modify applicationDidFinishLaunching so it loads the tabBarController property’s root view. The files should match Listings 9-11 and 9-12. Save and build. Listing 9-11 NavInTabAppDelegate.h #import<UIKit/UIKit.h> @interface NavInTabAppDelegate : NSObject<UIApplicationDelegate, UITabBarControllerDelegate> { UIWindow *window; UITabBarController *tabBarController; UINavigationController *navBarController; } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; @property (nonatomic, retain) IBOutlet UINavigationController * navBarController; @end Figure 9-21 Bar button added to document window (continued) 182 iPhone SDK Programming: A Beginner’s Guide Listing 9-12 NavInTabAppDelegate.m #import "NavInTabAppDelegate.h" @implementation NavInTabAppDelegate @synthesize window; @synthesize tabBarController; @synthesize navBarController; - (void)applicationDidFinishLaunching:(UIApplication *)application { [window addSubview:tabBarController.view]; [window makeKeyAndVisible]; } - (void)dealloc { [window release]; [tabBarController release]; [navBarController release]; [super dealloc]; } @end 11. Open MainWindow.xib in Interface Builder and connect the NavInTabAppDelegate’s navBarController to the newly added navigation controller (Figure 9-22). Connect the tabBarController to the newly added tab bar controller. 12. Save and exit Interface Builder. 13. Open StepTwoViewController.h and implement the viewDidLoad method so that it sets the navigationItem’s title to “step two” (Listing 9-13). Figure 9-22 Connecting the navBarController Chapter 9: UINavigationBar and UINavigationController 183 Listing 9-13 SecondViewController’sviewDidLoad method - (void)viewDidLoad { [super viewDidLoad]; self.navigationItem.title = @"step two"; } 14. Open FirstTabViewController.h and import StepTwoViewController.h and NavInTabAppDelegate.h. Also add the method signature, takeNextStep (Listing 9-14). Listing 9-14 FirstTabViewController.h #import<UIKit/UIKit.h> #import "StepTwoViewController.h" #import "NavInTabAppDelegate.h" @interface FirstTabViewController : UIViewController { } - (IBAction) takeNextStep: (id) sender; @end 15. Open FirstTabViewController.m and implement the newly added action. The file should match Listing 9-15. Listing 9-15 FirstTabViewController.m #import "FirstTabViewController.h" @implementation FirstTabViewController - (IBAction) takeNextStep : (id) sender{ StepTwoViewController *varSecondViewController = [[StepTwoViewController alloc] initWithNibName:@"StepTwoViewController" bundle:nil]; [self.navigationController pushViewController:varSecondViewController animated: YES]; } - (void)dealloc { [super dealloc]; } @end 16. Open MainWindow.xib and connect the bar button item to the FirstViewController’s takeNextStep method. 17. Save and exit Interface Builder. 18. Build and run the application in the iPhone Simulator. You should have a two-tab application, where the first tab has an embedded navigation control (Figure 9-23). (continued) 184 iPhone SDK Programming: A Beginner’s Guide Summary Creating an application with a navigation bar is straightforward. In the application’s MainWindow.xib, add a UINavigationController. Set the navigation controller’s root view controller, and create one or more other view controllers. Then add code that pushes the view controllers onto the navigation controller’s stack. When a view controller is pushed onto the stack, it becomes the topmost view controller, and so the application displays the view controller’s view. Popping a view controller off the stack is provided by default if you do not make the navigation bar’s Back button invisible. If you do make the Back button invisible, or somehow disable the button, you must use one of the navigation controller’s methods for popping view controllers. In this chapter, you learned how to create an application containing a navigation controller with three views. You then used a navigation controller to duplicate the Utility Application template’s results. Finally, you embedded a navigation controller within a tab in a tab bar. But this chapter did omit the most common navigation controller use: a table combined with a navigation controller. In the next chapter, after learning about tables, I correct this omission by presenting a navigation controller combined with a table controller. After learning about this combination, you will have a good enough knowledge of view controllers that you should be able to tackle most iPhone application navigation strategies. Figure 9-23 The finished application in iPhone Simulator 185 Chapter 10 Tables Using UITableView and UITableViewController 186 iPhone SDK Programming: A Beginner’s Guide Key Skills & Concepts ● Understanding table views ● Understanding table view delegates ● Understanding table view data sources ● Grouping and indexing table rows ● Selecting table rows ● Modifying a table’s appearance ● Using a table in a navigation controller ● Editing a table’s rows T able views display content in a list. Tables have a single column and multiple rows. They can scroll vertically and display large data sets. For example, the Notes application is a good example of an application containing a table. Note’s first screen is a list comprised of zero or more notes. In Figure 10-1, the list contains three notes. Each row presents the note’s text, transcription time, and a disclosure arrow. Figure 10-1 The Notes application consists of a UITableView and UINavigationBar. [...]... delegate and a data source Moreover, the data source must actually provide data for the table In the next few steps, you create a delegate and data source for the table Adding a Delegate and Data Source 1 Create a new NSObject named TableHandler Change TableHandler so it adopts the UITableViewDelegate and UITableViewDataSource protocols (Listings 10-3 and 10-4) 2 Add an NSArray property and a method named... headers and footers, and manage cells The UITableViewDataSource is also a protocol you adopt in a custom class This protocol allows you to manage a table’s data source UITableViewDelegate and UITableViewDataSource The UITableViewDelegate and UITableViewDataSource are protocols at least one class in your application must adopt if your application contains a UITableView You can create your own custom classes... UITableViewDelegate and UITableViewDataSource In this first task, you create a UIViewController and have it manage the table view You also implement a custom class that adopts the UITableViewDelegate and UITableViewDataSource Creating an Empty Table 1 Create a new Window-based application Name the application TableProjectOne 2 Create a new UIViewController subclass Name the class MyViewController 3 Create a new... autorelease]; NSArray * tempArrayE = [[[NSArray alloc] initWithObjects:@"EItem Nine", @"EItem Ten", nil] autorelease]; NSArray * tempArray = [[[NSArray alloc] initWithObjects:tempArrayA, tempArrayB, tempArrayC, tempArrayD, tempArrayE, nil] autorelease]; self.tableDataList = tempArray; } Chapter 10: Listing 10-11 Tables Using UITableView and UITableViewController Modifications to TableHandler.m to support... Commits a cell’s editing tableView:canEditRowAtIndexPath: Returns a Boolean value, informing a table view if a row can be edited tableView:canMoveRowAtIndexPath: Returns a Boolean value, informing a table view if a row can be moved tableView:moveRowAtIndexPath:toIndexPath: Allows a table cell to be moved Table 10-2 UITableViewDataSource Methods in this Chapter Chapter 10: Tables Using UITableView and UITableViewController... break; case 1: image = [UIImage imageNamed:@"Icon.png"]; break; Chapter 10: Tables Using UITableView and UITableViewController case 2: image = [UIImage imageNamed:@"package_graphics.png"]; break; case 3: image = [UIImage imageNamed:@"colorize.png"]; break; case 4: image = [UIImage imageNamed:@"web.png"]; break; } cell.imageView.image = image; return cell; } 4 Scale the images in Preview Make the images... NSObject { NSArray * tableDataList; } @property (nonatomic, retain) NSArray * tableDataList; - (void) fillList; @end Listing 10-4 TableHandler.m #import "TableHandler.h" @implementation TableHandler @synthesize tableDataList; - (void) fillList { Chapter 10: Tables Using UITableView and UITableViewController NSArray * tempArray = [[[NSArray alloc] initWithObjects:@"Item... images and custom cells UITableView classes have an associated UITableViewController, a UITableViewDelegate, and a UITableViewDataSource The UITableViewController is the controller class for a table view You create an instance of this class to manage the UITableView The UITableViewDelegate is a protocol you adopt in a custom class you write This protocol allows you to manage selections, configure headers... can scroll vertically to navigate through a table’s rows Each row contains a cell You can customize that cell’s appearance considerably You can index tables and create tables with zero or more sections When you create a table, you have a choice of two styles: UITableViewStylePlain or UITableViewStyleGrouped A plain table style presents a table like that in Figure 10-3 A grouped table presents a table... UITableViewController The UITableViewController manages a table view The UITableView can use objects defined in a table’s nib to define a table’s delegate and data source, or it can use itself as the delegate and data source For instance, in the previous example, you set the table’s delegate and data source properties to the TableHandler class You could have added a UITableViewController, set it as . 9-23). (continued) 184 iPhone SDK Programming: A Beginner’s Guide Summary Creating an application with a navigation bar is straightforward. In the application’s MainWindow.xib, add a UINavigationController create a delegate and data source for the table. Adding a Delegate and Data Source 1. Create a new NSObject named TableHandler. Change TableHandler so it adopts the UITableViewDelegate and. class. This protocol allows you to manage a table’s data source. UITableViewDelegate and UITableViewDataSource The UITableViewDelegate and UITableViewDataSource are protocols at least one class