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

Change the navigation controller’s root view controller to FirstTabViewController by changing its class and nib name in the Inspector.. Drag a bar button item from the library to the nav

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)

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

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 TabApplications 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)

Figure 9-19 Adding a navigation controller

Figure 9-20 Canvas indicates view is from a different nib

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

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UITabBarController

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

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)

- (IBAction) takeNextStep : (id) sender{

StepTwoViewController *varSecondViewController = [[StepTwoViewController alloc] initWithNibName:@"StepTwoViewController" bundle:nil];

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)

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

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

Table 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

Figure 10-2 Creating a new note using the Notes application

The disclosure arrow indicates that details are on the next screen Upon tapping a row, the

application takes the user to the detail view for that particular row’s note (Figure 10-2)

Tables can be grouped and indexed For instance, the Music application on an iPod touch

uses an index (Figure 10-3) The Settings application’s rows are grouped (Figure 10-4)

Table rows might also contain a picture and other customizations, as the YouTube and App

Store applications illustrate (Figure 10-5)

As the applications in the first five figures illustrate, the table view is a powerful control

for listing items You can modify rows, add images, select rows, and edit them In this chapter,

you learn how to use tables You learn how to build a table, change its style to grouped, add an

index to it, and accessorize it You also learn how to place a table in a navigation controller and how to edit a table’s rows It is a long chapter, but the table view is a powerful control

UITableView

The UITableView class represents a table view This class is for displaying and editing

information lists It consists of a single column of multiple rows Users 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 like that in

Figure 10-4 You see examples implementing both styles later in this chapter

Figure 10-3 The Music application on an iPod touch uses a UITableView with an index.

Figure 10-4 The Settings application uses a grouped UITableView

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 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 to adopt these protocols, or create a UITableViewController that

automatically adopts these protocols If you choose to use a UITableViewController rather

than custom classes, you simply connect the table view’s dataSource and delegate outlets

to the UITableViewController You can then implement both protocols’ methods in the

UITableViewController

UITableViewDelegate

A UITable’s delegate adopts the UITableViewDelegate protocol This protocol manages

selections, headers, footers, and other tasks Table 10-1 lists the methods covered in this chapter

Figure 10-5 The YouTube and App Store applications use images and custom cells

A UITable’s data source adopts the UITableViewDataSource protocol A table’s data source provides the table with its data Table 10-2 lists the UITableViewDataSource protocol methods covered in this chapter

tableView:numberOfRowsInSection: and tableView:cellForRowAtIndexPath:

Required methods that every table’s data source must implement are the tableView:

numberOfRowsInSection and tableView:cellForRowAtIndexPath methods

tableView:heightForRowAtIndexPath: Provides height to use in displaying a row tableView:accessoryButtonTappedForRowWithIndexPath: Handles a row’s detail disclosure button

after it is tapped.

tableView:willSelectRowAtIndexPath: Handles a row about to be selected.

tableView:didSelectRowAtIndexPath: Handles a row once it is selected

tableView:editingStyleForRowAtIndexPath: Returns the editing style of a row This

determines if a cell displays an insertion accessory, deletion accessory, or no accessory.

Table 10-1 UITableViewDelegate Methods in this Chapter

Table 10-2 UITableViewDataSource Methods in this Chapter

tableView:numberOfRowsInSection: Provides the number of rows in a section.

tableView:cellForRowAtIndexPath: Obtains cell from a data source to place at a

forRowAtIndexPath: 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.

Try This

- (NSInteger)tableView:(UITableView *) tableView

numberOfRowsInSection: (NSInteger) section

- (UITableViewCell *)tableView:(UITableView *) tableView

cellForRowAtIndexPath: (NSIndexPath *) indexPath

The tableView:numberOfRowsInSection: method informs the data source how many rows

a section contains The tableView:cellForRowAtIndexPath: method provides a table view with

its cells

Adopting the 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 empty xib named MyViewController

4. Open MyViewController.xib

5. Add a view to the document window and add a table view to the view (Figure 10-6) Be

certain to resize the table view to completely fill the view

6. Change the File’s Owner to MyViewController Connect the File’s Owner view to the view

in the document window

7. Save and exit Interface Builder

8. Add a MyViewController as an IBOutlet to TableProjectOneAppDelegate (Listings 10-1

and 10-2)

9. Modify applicationDidFinishLaunching so it adds the viewController property’s view

Build the application

10. Open MainWindow.xib and drag a View Controller to the document window Change its

class and Nib Name to MyViewController

11. Connect the TableProjectOneAppDelegate’s viewController outlet to the

MyViewController added to the document window

12. Save and exit Interface Builder

13. Build and run the application The application loads an empty table into the iPhone

Simulator (Figure 10-7)

(continued)

In steps 1–13, you added the table view as a subview to the view in the

MyViewController Nib If you preferred, you could omit the extra view and just add the table view directly as the nib’s view But note, you would also change MyViewController from a UIViewController, to a UITableViewController Point is, you don’t have to put the UITableView inside a UIView in order to use it A UITableView can be added directly to the XIB and connected to a table view controller’s view outlet, and it will work the same way The next Try This example illustrates.

Figure 10-6 Adding a UITableView to an Interface Builder project

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 fillList for filling the array

3. Implement the fillArray method so the application has data to load into the table’s cells

4. Implement the tableView:numberOfRowsInSection: and tableView:

cellForRowAtIndexPath: methods

5. Modify MyViewController to have a TableHandler property (Listings 10-5 and 10-6) Ensure the property is an IBOutlet

6. Implement the viewDidLoad method in MyViewController so that it calls its

TableHandler’s fillList method

7. Save and compile

8. Open MyViewController.xib and drag an object to the document window Change the object’s class to TableHandler (Figure 10-8)

9. Connect the File’s Owner myHandler outlet to the newly added TableHandler

(Figure 10-9)

10. Connect the table view’s dataSource and delegate outlets to the newly added TableHandler.

11. Save and exit Interface Builder

12. Click Build And Go The application displays 20 rows (Figure 10-10)

Figure 10-8 Adding a TableHandler reference to Interface Builder

(continued)

Figure 10-9 Connecting the controller to TableHandler

NSArray * tempArray = [[[NSArray alloc] initWithObjects:@"Item One",

@"Item Two", @"Item Three", @"Item Four", @"Item Five", @"Item Six",

@"Item Seven", @"Item Eight", @"Item Nine", @"Item Ten", @"Item Eleven", @"Item Twelve", @"Item Thirteen", @"Item Fourteen", @"Item Fifteen",

@"Item Sixteen", @"Item Seventeen", @"Item Eighteen", @"Item Nineteen", @"Item Twenty", nil] autorelease];

-(UITableViewCell *) tableView : (UITableView *) tableView

cellForRowAtIndexPath: (NSIndexPath *) indexPath {

UITableViewCell *cell = [tableView

dequeueReusableCellWithIdentifier:@"acell"];

if(cell == nil) {

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyle

Default reuseIdentifier:@"acell"] autorelease];

@interface MyViewController : UIViewController {

IBOutlet TableHandler * myHandler;

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 the table’s File’s Owner, and then set its outlets to TableHandler

If you do not provide a delegate and data source in a table’s nib, a UITableViewController sets its data source and delegate to itself By doing this, the UITableViewController saves you the work of having to create your own classes so they adopt the delegate and data source You still must implement any data source and delegate methods desired However, rather than implementing these methods in separate custom classes, you implement them in a

UITableViewController subclass The UITableViewController then functions as the table’s controller, delegate, and data source

1. Create a new Window-based application Name the application TableProjectTwo

2. Create a new UITableViewController subclass Name the class MyTableViewController (Listings 10-9 and 10-10)

3. Create a new empty xib named MyTableViewController

4. Open MyTableViewController.xib

5. Add a table view to the document window (Figure 10-11)

6. Change the File’s Owner to MyTableViewController if it is not already Connect the File’s Owner view to the table view in the document window

7. Connect the newly added table view’s dataSource and delegate outlets to the File’s Owner.

8. Save and exit Interface Builder

9. Add a MyTableViewController as an IBOutlet to TableProjectTwoAppDelegate

(Listings 10-7 and 10-8) Do not forget to import MyTableViewController

10. Modify applicationDidFinishLaunching so it adds the viewController property’s view

Build the application

11. Open MainWindow.xib and drag a Table View Controller to the document window Change its class and Nib Name to MyTableViewController

12. Connect the TableProjectTwoAppDelegate’s viewController outlet to the

MyTableViewController added to the document window

13. Save and exit Interface Builder

14. Implement the table delegate and datasource methods the same as you did in TableHandler

in this chapter’s first Try This task

15. Modify MyTableViewController so that it has an NSArray called tableDataList and have it

populated in the viewDidLoad method

16. Build and run the application The application loads an empty table into the iPhone

Simulator The results should match the previous task’s results (Figure 10-10)

(continued)

Figure 10-11 Adding a UITableView to an Interface Builder project