iPhone Development 101

iPhone 101

Code Tips




Mailing ListTwitter


iPhone Development 101: User Interface: UINavigationController:
Creating a Navigation-based app with Storyboards and Xcode4

Note: If you're looking for an in-depth tutorial on getting started with Storyboards, check out Beginning Storyboards in iOS 5 on Ray Wenderlich's site.

1. Create a new Single-View application in Xcode. Check the boxes for "Use Storyboards" and "Use Automatic Reference Counting".

2. Open the iPhone storyboard file. DELETE the starting scenes until the storyboard is completely empty and the document area on the left side of the storyboard says "No scenes". (You may have to click-delete a couple of time to get rid of everything.)
If you aren't seeing the document area, look for the small gray arrow at the bottom of the storyboard editor. Click to show/hide the document area.

3. Look in the library and drag a Navigation Controller from the library onto the storyboard. By default you'll end up with both a navigation controller and a Table view controller (the table view will be your root view controller).

If you don't want a table view as your root view, select the table view controller and delete it. Then drag out a new View controller from the library onto the storyboard. Make this the root-view controller by control-dragging from the navigation controller to the new view controller, and select "Root view controller" in the segues list.

4. Set the class for the root view controller by selecting the controller in the document area:

then set its class in the inspector area:

The default single-view project has a controller named "ViewController". You can rename that to something more descriptive by selecting the controller name in its header file:

Then go to the Edit menu -> Refactor -> Rename.

5. Add your UI.
Add buttons and other UI elements to your new view controller's view window. To connect them to other subsequent view controllers, repeat the above process: drag out a view (or table view) controller from the library onto the storyboard. Select the button (or table cell) and control-drag out to the destination controller.

Additional References