iPhone Tutorial: {Part 2} Navigatation in UITableView

I am going to write series of UITableView tutorials (Video Tutorials as well). My target is to make the customized UITableView using UITableViewCell which is requested on “Request Tutorial” page. Following are the list of tutorials, which I will be posting on this blog:

1. Create a Simple UITableView [Populate UITableView With Array]
2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
3. Grouped UITableView [Using Interface builder]
4. Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
5. Add, Delete & Re-order UITableView rows
6. Creating UITableView using UITableViewCell
7. Adding Pictures into your UITableView using Interface builder
8. UITableView & UITableViewCell examples and tips

[Note: If you want more tutorials on UITableView or UITableViewCell, then add a comment on "Request Tutorial" Page]

So, this tutorial is about navigating from UITableView to a UIViewController. Just like user select one row and that row text will be set as product text in next view. Out put of this tutorial will look like this
Picture 11 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 12 iPhone Tutorial: {Part 2} Navigatation in UITableView

1. You have to add NavigationController in your application to move from one screen to other. Its really an easy way to navigate from one view to other. So in this tutorial I am going to use UINavigationController. Open ‘SimpleTableAppDelegate.m’ file and change the function ‘applicationDidFinishLaunching’ so that it looks like this:

- (void)applicationDidFinishLaunching:(UIApplication *)application {
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:viewController];
// Override point for customization after app launch
[window addSubview:navController.view];
[window makeKeyAndVisible];
}

2. Open the SimpleTable code(you can grab it from here). Right click on classes folder in Xcode and select ‘Add > New File…’.
Picture 1 iPhone Tutorial: {Part 2} Navigatation in UITableView

3. Select UIViewController and click Next. Name is ‘NextViewController.m” and press ‘Finish’ button.
Picture 2 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 3 iPhone Tutorial: {Part 2} Navigatation in UITableView

4. Open ‘NextViewController.h’ file and write this code after Import and before @end

@interface NextViewController : UIViewController {
IBOutlet UILabel *lblProductTxt;
}

- (IBAction) changeProductText:(NSString *)str;

5. Open NextViewController.m file and write this code before @end

- (IBAction) changeProductText:(NSString *)str{
lblProductTxt.text = str;
}

6. Now last step from xcode is to open ‘SimpleTableViewController.m’ file. Add #import “NextViewController.h” after first import. Write the following code in this method ‘didSelectRowAtIndexPath’ (which was empty)

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NextViewController *nextController = [[NextViewController alloc] initWithNibName:@"NextView" bundle:nil];
[self.navigationController pushViewController:nextController animated:YES];
[nextController changeProductText:[arryData objectAtIndex:indexPath.row]];
}

7. Now open Interface builder and click on ‘File > New..’ and then click again on ‘File > Save’. Name it ‘NextView’ and save this file inside your SimpleTable Project which is in my case in Desktop. It will prompt you to add this file to your project. Click on check box and clicked ‘Add’ button
Picture 4 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 5 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 6 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 7 iPhone Tutorial: {Part 2} Navigatation in UITableView

8. You can see NextView.xib file inside your Xcode project “Group & Files panel under ‘Nib Files’
Picture 8 iPhone Tutorial: {Part 2} Navigatation in UITableView

9. Select File’s Owner in NextView.xib file and press Cmd + 4 to open “Identity Inspector”( Please make sure you select the File’s owner before openning the “Indentity Inspect”). In class write ‘NextViewController’ (Name of the classs). Place two labels on ‘NextView.xib’ file like the picture and map lblProductTxt with ‘txt’ label and map ‘view’ with ‘View’.
Picture 13 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 9 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 10 iPhone Tutorial: {Part 2} Navigatation in UITableView

10 To set the title of any view you have to write one line code inside your ‘viewDidLoad’ method (it will be commented in your ViewController classes). So in SimpleTableViewController.m file write (or uncomment viewDidLoad method) following line:

self.title = @"Simple Table Exmaple";

11. Save this project and click on “Build & Go” inside Xcode. You will see a table. Click on any row and you will navigate to another View.

Final output will look like this:
Picture 11 iPhone Tutorial: {Part 2} Navigatation in UITableView
Picture 12 iPhone Tutorial: {Part 2} Navigatation in UITableView

You can grab this code from here.

You can watch the screen cast here.

[update: 23 May 2009- Thank Andi Stancu for pointing out few things which I forget. So thank you Andi Stancu]

Popularity: 29% [?]

My name is Adeem M Basraa. I am a software engineer from Lahore, PK. I’ve been involved in software development for nearly 4 years, with the last 1 year focused on application development for mobile devices (iPhone & Android).

18 Comments on "iPhone Tutorial: {Part 2} Navigatation in UITableView"

  1. Billy says:

    Hi,

    Thank you so much for you tutorials. I actually feel like I am beginning to see how things work. Do you recommend any books or websites with more info on Objective C and iPhone programming?

    My real question is now that I have made a iPhone app that as 2 views, how can I change the “Product Text” to be different for each product, such as if I clicked on iPhone, the second page would say stuff about the iPhone.

    Any easy way to make a splash page?

    Billy

  2. tnathos says:

    ooh man this good tuto, but i need help.. i can combine this example whit a tabbar control.. do you know who do that?

  3. Corey says:

    Good tut. An easy way to build a splash page is to over right the ‘default’ png in the app resources. Put the image you want in there and it should show on launch.

  4. Yara says:

    Great tutorial!

  5. Christian Nuesa says:

    I followed your step and it does not navigate to the next screen. There seems to be a missing step here. Aren’t we suppose to map the changeProductText action?

  6. Martijn says:

    Hi Adeem,

    Another great tut!

    One remark: I can only compile the app when I import “NextViewController.h” in “SimpleTabViewController.h”.

    Cheers,
    Martijn

  7. Abdurrahman says:

    there is a mistake in your steps but not in your downloadable code given,

    at SimpleTableAppDelegate.m, line

    [window addSubview:viewController.view];

    should be replaced with

    [window addSubview:navController.view];

    otherwise navigation doesn’t work.

    regards

  8. Abdurrahman says:

    edit: my last comment was for Christian Nuesa.

  9. sunil says:

    Its really nice..very much of helpful in building applications from scratch.

    thanx a lot…

Trackbacks for this post

  1. iPhone SDK Tutorial + Video Tutorial - {Part 1} UITableView using NSArray | iPhone Diary
  2. Complete List of UITableView UITableViewCell Tutorials + Video Tutorials | iPhone Diary
  3. iPhone SDK Tutorial + Video Tutorial - {Part 3} Grouped UITableView | iPhone Diary | Tutorial
  4. iPhone SDK Tutorial or Video Tutorial - {Part 4} Tips for UITableView Design [Add Header, Footer, background images & change design] | iPhone Diary | Tips
  5. iPhone SDK Tutorial or Video Tutorial - {Part 5}: Add, Delete & Reorder UITableView Rows | iPhone Diary | Cydia
  6. iPhone SDK Tutorial - {Part 6}: Creating custom UITableViewCell Using Interface Builder [UITableView] | iPhone Diary | Tutorial
  7. Knowledge Base
  8. iPhone Tutorial – {Part 7}: Adding Pictures into your table’s using Interface builder | iPhone SDK Tutorial for Beginners | Tips
  9. Probleem: Tut UIWebView combineren met Tab Bar App-project - iPhone Forum - alles over de Apple iPhone, iPhone 3G en iPhone 3GS

Got something to say? Go for it!