How to make an iPhone App – Part 4 of 5: Navigation Controller

Now that we know how to create a table views, we are going to use that knowledge to create a new project using a navigation controller to see a more detailed view of the tittle in the cell of the table view.
Ok, i hope you haven’t deleted the example we did in the previous part, because we are going to need it.

Creating the Project

Open up Xcode and select File->New Project… then select iPhone Os->Application and double click “Navigation-based Application”.

Give your project a name. Mine is “NavigationTut”.
You’ll get a project with two classes. One is RootViewController and the AppDelegate. If you open RootViewController.xib in interface builder you’ll notice that it is a table view. Nothing exciting yet. To this table view, we are going to load the same things we did to the previous project. How?. Well, first we need to drag TPL.plist from the old project to the resources folder of the new one. Don’t forget to check the option to copy the file to the project folder in the upper part of the popup window.
Then we need to replace the following methods in t0he RootViewController with the ones at tableTutViewController.m at the old project:
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
-(void)viewDidLoad
Now if you build and run the project you should see an app identical to the one we did in the previous part, just with the difference that this one has a navigation bar above the view.

Setting up the Details View

Fine. Now are going to create a new view, the one that is going to appear when you select a row in the table. This view is going to be a child of the current.
Right click on the “Classes” folder and select Add->New File. Then in the “iPhone OS”  section, select Cocoa Touch Class and in the right double click the icon for UIViewController Subclass. Make sure the option “With Xib for user interface” is checked and click next.

Then you have to give your file a name, mine is going to be called “ReadMore”.
This is going to give you three files, ReadMore.h, ReadMore.m and ReadMore.xib. The Xib file is the graphic user interface for the class. Click and drag it to the resources folder.

Open up this xib file and let’s customize it to make it do what we want. Click the view in the View window from insterdace builder, then go to the Inspector window, find the “Top Bar”  property and change it to Navigation Bar.

Now in the library find a label and drag it to the view. Here we are going to display the title of the tutorial. Make it big enough to leave chance for the title to appear complete and add a few lines in the inspector (remember to have selected the label) to give even more chance.


Now save and let’s go back to Xcode. In the Classes folder click ReadMore.h. We need to declare the label we just added in Interface Builder and the attribute that is going to receive the text from the cell we selected. I’m going to call them content and rowText respectively:

IBOutlet UILabel * content;
NSString * rowText;

And don’t forget to add the properties after the curly brace:

@property(nonatomic, retain) UILabel *content;
@property(nonatomic, retain) NSString *rowText;

Now ReadMore.h should look like this:

#import 

@interface ReadMore : UIViewController {
 IBOutlet UILabel * content;
 NSString * rowText;
}
@property(nonatomic, retain) UILabel *content;
@property(nonatomic, retain) NSString *rowText;
@end

Ok, now let’s work the implementation, click ReadMore.m, don’t forget to prepare the getters and setters after the @implementation line:

@synthesize content, rowText;

And find and uncomment the viewDidLoad method. Remember that this method is built in and we are just going to override it. This is called every time the view is loaded.
What we do here?, we assign the text to display to the label and give the view a title. I called it “Details”. Why we need to give a name to the view?. Because that way our application identifies the views and knows who called who and where to go back to. You’ll understand this better later.

- (void)viewDidLoad {
    content.text = rowText;
 self.title = @"Details";
 [super viewDidLoad];
}

Right now “ReadMore” has a title, the app would know where to go when you tab a cell, but it won’t know where to go back. Go to RootViewController.m and in the viewDidLoad method add the following right after the opening curly brace to give the view a title, mine in “Welcome”:

self.title = @"Welcome";

Now it should look like this:

- (void)viewDidLoad {

 self.title = @"Welcome";

 NSString * theFile = [[NSBundle mainBundle]
     pathForResource:@"TPL" ofType:@"plist"];
 tutorials = [[NSArray alloc] initWithContentsOfFile:theFile];
    [super viewDidLoad];
}

Final Touches

There is just one thing missing, the call to the ReadMore view. Import ReadMore.h to RootViewController.m before the @implementation line:

#import "ReadMore.h"

Now find and uncomment the method TableView DidSelectRowAtIndexPath and create a UITableViewCell inside, this is to receive the selected cell, then create a ReadMore object and initiate it with the ReadMore view, assign the text from the cell to the label of ReadMore and make the transition to the new view. And don’t forget to release the objects:

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

 UITableViewCell *c = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];

 ReadMore *readmore =
 [[ReadMore alloc] initWithNibName:@"ReadMore" bundle:nil];

 readmore.rowText = c.textLabel.text;

 [self.navigationController pushViewController:readmore animated:YES];
 [readmore release];
}

We are ready with the code. Open ReadMore.xib in Interface Builder and connect the label with the content attribute of the ReadMore class.

Save and we are ready to build and run.
The app should look like this:

Conclusion

Now you know how to work with a navigation controller. Of course there are more kinds of multi-view applications but sadly i’m not going to touch them in this series, maybe in a not so far future i will.
Next stop is the accelerometer!.