If my tutorial help you then please donate, so that i continue writing free tutorials for every developer/programmer/freelancer
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
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…’.
3. Select UIViewController and click Next. Name is ‘NextViewController.m” and press ‘Finish’ button.
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
8. You can see NextView.xib file inside your Xcode project “Group & Files panel under ‘Nib Files’
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’.
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:
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: 35% [?]
Related posts:
- iPhone Programming Tutorial: Complete List of UITableView Tutorials + Videos Complete List of UITableView tutorials plus few video tutorials as...
- iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView] This tutorial will help you to create custom rows in...
- iPhone Programming Tutorial: {Part 3} Grouped UITableView I am going to write series of UITableView tutorials (Video...
- iPhone Programming Tutorial – {Part 1} UITableView using NSArray Creating iPhone Tutorial Introduction: I am going to write series...
- iPhone SDK Tutorial – {Part 5}: Add, Delete & Reorder UITableView Rows This tutorial will explain, how you can change the UITableView...
[...] iPhone SDK Tutorial – {Part 2} Navigatation in UITableViewiPhone SDK Tutorial – {Part 1} UITableView using NSArrayiPhone SDK Tutorial – Complete List of UITableView Tutorials + VideosVideo Tutorial: Bypassing Code Signature in Xcode & Installing jail-break application to iPhoneTutorial (Part 2): Localizing your iPhone applicationRequest iPhone Tutorial 19 May [...]
[...] SDK Tutorial – {Part 3} Grouped UITableViewiPhone SDK Tutorial – {Part 2} Navigatation in UITableViewiPhone SDK Tutorial – {Part 1} UITableView using NSArrayiPhone SDK Tutorial – Complete List of [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
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
ooh man this good tuto, but i need help.. i can combine this example whit a tabbar control.. do you know who do that?
[...] SDK Tutorial – {Part 2} Navigatation in UITableView – http://adeem.me/blog/2009/05/19/iphone-sdk-tutorial-part-2-navigation-in-uitableview/ [...]
[...] a Simple UITableView [Populate UITableView With Array] iPhone Tutorial -UITable View- Part 2: Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath] iPhone Tutorial — Part 3: Grouped UITableView [Using Interface builder] iPhone Tutorial — Part 4: [...]
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.
[...] ik heb weer een probleem wat ook eigenlijk speelde bij het webview probleem (denk ik). Ik probeer deze tut toe te passen, deel 1 is goed gegaan, en dan werkte. Nu probeerde ik dit te doen, en dat gaat [...]
Great tutorial!
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?
Hi Adeem,
Another great tut!
One remark: I can only compile the app when I import “NextViewController.h” in “SimpleTabViewController.h”.
Cheers,
Martijn