Tutorial for Building a Multi-view Tab Bar Application

A Succeed workshop at Shodor.

  1. Create a window-based application
    • File -> New Project
    • Select "Application" from among the choices on the left
    • Then select "Window Based Application" from among the icons on the right
  2. Name your application "ShodorTabs"
  3. Expand the "Resources" folder and double-click "MainWindow.xib" to open up the main window
  4. From the library, drag a "UITabBarController" into the "MainWindow.xib" list. Note that you cannot drag it onto the "Window" itself, because the controller is not a visual component. (It's a controller.) Rather, drag it to the window showing "File's Owner," "First Responder," etc. . .. It should fall beneath the "Window" icon.
  5. Create a new view controller, Spinner, together with its view
    • From Xcode, select File -> New File
    • On the left side, select Cocoa Touch Class, and on the right side, select "UIViewController Subclass." Select the option to create a XIB file also for creating a user interface visually. Click "Next"
    • Name this file "Spinner.m," and select the option for also creating the header file. Click "Finish."
  6. Repeat those steps to create another view controller named "Flyer"
  7. Finally, create a third one called "Fire"
  8. Back in Xcode, make sure the .h and .m files are in the "Classes" folder and the .xib files are in the "Resources" folder. You may have to drag them around to make this happen.
  9. Open up the XIB file for the Spinner, and put a label on its view saying "Spinner" in large (say, 72pt) font.
  10. Repeat this for Flyer and Fire. These labels will help us to identify the views when we see them.
  11. (Remember to save your .xib files whenever you change them.)
  12. We need three tab buttons in the UITabBarController. So go to MainWindow.xib and click on the Tab Bar Controller. In the Attributes window (you can find this by pressing "Command-1" whenever you need to) click the "+" to add a new button to the tab bar. This will create a new item for the tab bar.
  13. Double-click the item titles and change them to "Spinner," "Flyer" and "Fire"
  14. We have to make our application ready to implement the functions of a UITabBarController. Do this by editing ShodorTabsAppDelegate.h, and editing the protocol section
    < UIApplicationDelegate >
    so that it says
    < UIApplicationDelegate, UITabBarControllerDelegate >
    This declares that the class will implement the UITabBarController protocol. ("Protocol" is the term Objective-C uses where Java uses "Interface." It is a collection of functions relevant to a particular behavior - in this case, making a UITabBarController work.
  15. We also need this tab bar controller to be a property of the application. So add:
    • IBOutlet UITabBarController *tabBarController; (to the header)
    • @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; (to the header)
    • @synthesize tabBarController; (to the implementation file)
  16. We also need to tell the window to load this view. Our previous applications were built from the "View Based Application" template, so this step was done for us. To do it manually, in the "ShodorTabsAppDelegate.m" implementation file, replace [window makeKeyAndVisible] with [window addSubview:tabBarController.view];
  17. We have created 3 views (by way of their view controllers) and a tab bar with three items. Now we have to associate the views with the items. In MainWindow.xib, select the first View Controller (Spinner) under the Tab Bar, and press Command-4 to access the identity for that item. In the class name drop-down box, select "Spinner". Then in the attributes for that item (you can get there with Command-1, or by clicking over) select "Spinner" for the NIB name. (This is an example of using the old "NIB" instead of "XIB" terminology. Remember, they mean the same thing!
  18. Repeat this for the other two View Controllers in that tab bar, associating them with the appropriate view controller. Also, make sure to save your XIB files.
  19. Finally, we need to tell the application that this tab bar is the one we declared as the tabBarController property in the aplication. In the MainWindow.xib window, control-drag from "Shodor Tabs App Delegate" to "Tab Bar Controller," and select the tabBarController outlet.
  20. Test and run, and watch it work perfectly.