Displaying the Item Selected
So far, you've seen how to populate the Table View with items. Now you'll see how to let users make selections in a Table View.
Implement the tableView:didSelectRowAtIndexPath: method in the RootViewController.m file as follows:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:
(NSIndexPath *)indexPath {
NSString *stateSelected =
[listOfStates objectAtIndex:[indexPath row]];
NSString *msg = [[NSString alloc] initWithFormat:
@"You have selected %@", stateSelected];
UIAlertView *alert =
[[UIAlertView alloc] initWithTitle:@"State selected"
message:msg
delegate:self
cancelButtonTitle:@"OK"
otherButtonTitles:nil];
[alert show];
[alert release];
[stateSelected release];
[msg release];
}
The didSelectRowAtIndexPath: method gets called whenever the user selects a row in the Table View. One of the even parameters is of type NSIndexPath, which represents the path of a specific item in a nested array collection.
To know which row has been selected, you simply call the row property of the NSIndexPath object (indexPath) and then use the row number as an index into the listOfStates array:
NSString *stateSelected = [listOfStates objectAtIndex:[indexPath row]];
Author's Note: The NSIndexPath class's row property is one of the additions made by the UIKit framework to enable the identification of rows and sections in a Table View. Hence, be aware that the original NSIndexPath class definition does not contain the row property. |
Press Command-R to test the application on the iPhone Simulator. When you select a row by tapping on it, you'll see an alert view showing the selected row (see Figure 9).
Navigating to Another View When a Row Is Selected
One very common operation with a Table View when a user selects a row is to display details of the selected row in another View window. To do that, add a new XIB file and its corresponding view controller to your project. Right-click on the Classes folder in Xcode and select Add → New File….
Under the Cocoa Touch Class category, select the UIViewController subclass template, ensure the “With XIB for user interface” option is selected (see Figure 10), and click Next.
Name the new class DetailsViewController.m, and click Finish. Xcode should now have three additional files as shown in Figure 11.
Double-click the DetailsViewController.xib file to edit it in Interface Builder. Drag and drop a Label view onto the View window (see Figure 12).
Type the following statements in the DetailsViewController.h file:
#import <UIKit/UIKit.h>
@interface DetailsViewController : UIViewController {
IBOutlet UILabel *label;
NSString *textSelected;
}
@property (nonatomic, retain) UILabel *label;
@property (nonatomic, retain) NSString *textSelected;
-(id) initWithTextSelected:(NSString *) text;
@end
Next, enter the following statements in the DetailsViewController.m file:
#import "DetailsViewController.h"
@implementation DetailsViewController
@synthesize label;
@synthesize textSelected;
-(id) initWithTextSelected:(NSString *) text {
self.textSelected = text;
[label setText:[self textSelected]];
return self;
}
- (void)viewDidLoad {
[label setText:[self textSelected]];
self.title = @"Movie Details";
[super viewDidLoad];
}
- (void)dealloc {
[textSelected release];
[label release];
[super dealloc];
}
@end
Save the project in Xcode. Back in Interface Builder, control-click and drag the File's Owner item onto the Label view (see Figure 13). Select the label.
Back in Xcode, add the following statements to the RootViewController.h file:
#import "DetailsViewController.h"
@interface RootViewController : UITableViewController {
DetailsViewController *detailsViewController;
}
@property (nonatomic, retain)
DetailsViewController *detailsViewController;
@end
Finally, add the code in Listing 2 to the RootViewController.m file.
Press Command-R to test the application. Now, selecting a row redirects you to another View window that displays the selected state (see Figure 14).