Adding a Detail View

In the previous article I introduced a simple example on how to use the TableView control.       

In this article I will extend the TableView control example by introducing a Detail view.  On selection of a row a detail view will be displayed containing all the information about the book selected.  This article will illustrate the handling of row selection by implementing didSelectRowAtIndexPath method.

First open XCode create a new subclass of UIViewController and make sure the the Option “with XIB for user interface” is checked.  Click Next, Name it DetailsViewController and click Finish .  Open DetailsViewController.XIB by double clicking on it.  In Interface Builder drag and drop seven UILabel controls and one UITextView control.  The following figure displays the final design.

 

Go back to XCode and Open DetailsViewController.h file and add the following code.

#import <UIKit/UIKit.h>

@class Book;

@interface DetailsViewController : UIViewController {

UILabel* bookTitle;

UILabel* author;

UILabel* price;

UITextView *desc;

Book *book;

}

@property(retain, nonatomic) IBOutlet UILabel* bookTitle;

@property(retain, nonatomic) IBOutlet UILabel* author;

@property(retain, nonatomic) IBOutlet UILabel* price;

@property(retain, nonatomic) IBOutlet UITextView *desc;

@property(retain, nonatomic) Book* book;

@end

Open DetailsViewController.m and add the following code.

@implementation DetailsViewController

@synthesize bookTitle;

@synthesize desc;

@synthesize author;

@synthesize price;

@synthesize book;

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.

- (void)viewDidLoad {

    [super viewDidLoad];

self.title = book.title;

self.bookTitle.text = book.title;

self.author.text = book.author;

self.desc.text = book.description;

self.price.text = [book.price stringValue];

}

In the header file I declare three UILabels as IBOutlets and a UITextView as a IBOutlet also.  The labels will display the bookTitle, author, price and the UITextView will display the description of the book.  The book instance variable will hold the book info for the selected book.  When the View is loaded the respective UI controls will be assigned with the selected row data.

// Override to support row selection in the table view.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    // Navigation logic may go here -- for example, create and push another view controller.

DetailsViewController *detailsViewController = [[DetailsViewController alloc] initWithNibName:@"Details" bundle:nil];

detailsViewController.book = [books objectAtIndex:indexPath.row];

[self.navigationController pushViewController:detailsViewController animated:YES];

[detailsViewController release];

}

Almost done.  Now implement the didSelectRowAtIndexPath delegate method as shown below.

// Override to support row selection in the table view.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    // Navigation logic may go here -- for example, create and push another view controller.

DetailsViewController *detailsViewController = [[DetailsViewController alloc] initWithNibName:@"DetailsViewController" bundle:nil];

detailsViewController.book = [books objectAtIndex:indexPath.row];

[self.navigationController pushViewController:detailsViewController animated:YES];

[detailsViewController release];

}

In the above code a DetailsViewController is instantiated and the book property is assigned with the selected book info. Navigation to the details view is accomplished by pushing the detailsViewController into the navigationController.

 

Download the xcode source code here.