1. The Problem: iPhone UI Navigation I want to have a TableView that works INSIDE a TabView

2. Example: Table View Here Tab Bar Controller Here Clicking any cell navigates to a different “View”

3. The Solution: Interface Builder or Code Code is more straightforward, but may lead to lots of “setup” coding. I asserted that it was impossible in Interface Builder. I was wrong. We will look at both approaches.

4. Code Example: 3 Key Lines This is from my “Free Rice” application and builds 3 tabs with 3 views. The “middle” one is a Table View with “child views” - (void)applicationDidFinishLaunching:(UIApplication *)application { tabBarController = [[UITabBarController alloc] init]; aboutViewController =[[AboutViewController alloc] initWithNibName:@"About" bundle:nil]; aboutViewController.title = @"About"; totalsViewController =[[TotalsViewController alloc] initWithNibName:@"Totals" bundle:nil]; totalsViewController.title = @"Totals!"; playViewController =[[PlayViewController alloc] initWithNibName:@"Play" bundle:nil]; playViewController.title = @"Play!"; UINavigationController *tableNavController = [[[UINavigationController alloc] initWithRootViewController:playViewController] autorelease]; tableNavController.navigationBar.barStyle = UIBarStyleBlackOpaque; tabBarController.viewControllers = [NSArray arrayWithObjects:aboutViewController, tableNavController, totalsViewController, nil]; [window addSubview:tabBarController.view]; }

5. 3 Key Steps Minus “setup” code for each of the Views //Set Up the tabBarController in code tabBarController = [[UITabBarController alloc] init]; //Set Up a Navigation Controller to “hold” the TableView and it’s child views //Note that playViewController is made the “special” RootViewController here UINavigationController *tableNavController = [[[UINavigationController alloc] initWithRootViewController:playViewController] autorelease]; //Put the 3 views (including tableNavController) into the Tab Bar Controller. //Use an Array and place in the order you want them to appear in the tabs tabBarController.viewControllers = [NSArray arrayWithObjects:aboutViewController, tableNavController, totalsViewController, nil];

6. Interface Builder Example To be fair, there are a number of setup steps in order to use the code. Including setting up XIBs in Interface Builder and building the classes. I didn’t count those steps for the Code Example. 1. New Project 2. Tab Bar Application 3. Call it TabBar Demo 4. Add some icons (if you have them) to the resources folder select copy to project if necessary 5. Delete SecondView.xib from Resources (we don't need it) 6. Add a new "empty" xib to resources. 7. Call it FirstView.xib 8. Add a SecondView.xib in the same way 9. Remove FirstViewController from classes folder (.m and.h)

7. IB Example Cont. Steps 10 - 20 10. Add a new file to Classes folder 11. Make it a UITableViewController subclass and call it FirstViewController 12. Repeat for a SecondViewController 13. Open FirstView.xib in Interface Builder 14. Drag a Table View from the library to the FirstView.xib window 15. Crtl + click on Table View and connect datasource and delegate to File's Owner 16. Select File's Owner and then click Object Identity "tab" of the "Inspector" 17. Make FirstViewController the Class Identity for File's Owner (selecting File's Owner first is important) 18. Ctrl + click Table View, connect New Referencing Outlet to Files Owner, (select view from the popup) 19. Close the Table View Outlets popup 20. Repeat steps 13 - 19 for SecondView.xib

8. IB Example Cont. Steps 21 - 35 21 (Editor's preference: Close IB!) 22 Open MainWindow.xib from Xcode (will open Interface Builder) 23 Click on the Tab Bar Controller "First View" window to put the right context into the "Inspector" pane 24 On Inspector:Tab Bar Controller Attributes (first tab) select the drop down for First - choose Navigation Controller 25 Repeat for Second 26 In Tab Bar Controller window, click twice on the first tab to bring up inspector where you can add graphics from "image" dropdown 27 Repeat for other button 28 Click "title" and change to First Nav Controller 29 click 2nd button and repeat putting "Second Nav Controller" on this one 30 Click back to the first button (once) and click the "view" in the middle 31 In the Inspector, (first tab) enter the NIB name (FirstView) 32 Click on Inspector's 4th tab and enter FirstViewController as the Class Identity 33 Repeat 30-32 for second button with SecondView and SecondViewController respectively 34 Check that you have core graphics in the frameworks (should be there by default, but be sure) 35 Compile and run in simulator

9. IB Example Cont. Step 36 (To be fair, this step is required to code the solution too) 36. Usability requires adding code that does something useful (Implement necessary UITableView Methods in UITableViewControllers (FirstViewController and SecondViewController.) At a minimum: -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {} -- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {} -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {}