Storyboards

Storyboards are the new way to define your application’s user interface. In the past, you used nib files to define your user interface one view controller at a time. A storyboard file captures your entire user interface in one place and lets you define both the individual view controllers and the transitions between those view controllers. As a result, storyboards capture the flow of your overall user interface in addition to the content you present.

If you are creating new applications, the Xcode 4.2 templates come preconfigured to use storyboards. For other applications, the process for using storyboards is as follows:

1. Configure your application’s Info.plist file to use storyboards:

   • Add the UIMainStoryboardFile key and set its value to the name of your storyboard file.

   • Remove the existing NSMainNibFile key. (Storyboards replace the main nib file.)

2. Create and configure the storyboard file in Xcode; see “Creating Storyboard Files.”

3. Update your view controllers to handle storyboard transitions; see “Preparing to Transition to a New View Controller.”

4. If you ever need to present a view controller manually (perhaps to support motion-related events), use the storyboard classes to retrieve and present the appropriate view controller; see “Presenting Storyboard View Controllers Programmatically.”

Applications can use a single storyboard file to store all of their view controllers and views. At build time, Interface Builder takes the contents of the storyboard file and divides it up into discrete pieces that can be loaded individually for better performance. Your application never needs to manipulate these pieces directly, though. All you must do is declare the main storyboard in your application’s Info.plist file. UIKit handles the rest.

 

Create Stroyboard Files

 

You use Interface Builder to create storyboard files for your application. Most applications need only one storyboard file, but you can create multiple storyboard files if you want. Every storyboard file has a view controller known as the initial view controller. This view controller represents the entry point into the storyboard. For example, in your application’s main storyboard file, the initial view controller would be the first view controller presented by your application.

Each view controller in a storyboard file manages a single scene. For iPhone applications, a scene manages one screen’s worth of content, but for iPad applications the content from multiple scenes can be on screen simultaneously. To add new scenes to your storyboard file, drag a view controller from the library to the storyboard canvas. You can then add controls and views to the view controller’s view just as you would for a nib file. And as before, you can configure outlets and actions between your view controller and its views.

When you want to transition from one view controller to another, Control-click a button, table view cell, or other trigger object in one view controller, and drag to the view controller for a different scene. Dragging between view controllers creates a segue, which appears in Interface Builder as a configurable object. Segues support all of the same types of transitions available in UIKit, such as modal transitions and navigation transitions. You can also define custom transitions and transitions that replace one view controller with another.

----------------------------------------------------------------------

Configure your storyboard files

In Xcode 4.2, the Interface Builder user interface for iOS applications is based on the storyboarding of view controllers. Storyboarding enables you to use Interface Builder to specify not only all the screens in your application, but the transitions between them and the controls used to trigger the transitions. Thus you can lay out every possible path through your application graphically, greatly reducing the amount of code you need to write for a complex multiscreen application.

To create a project that uses view controllers, choose File > New > New Project and select the Use Storyboard checkbox in the options dialog (Figure 1).

Figure 1  The Use Storyboard option

 

You start with a view controller object that represents your first scene (the initial view controller). To get view controllers for your storyboard, select Objects and Controllers from the Object library (Figure 2) and drag the view controllers you want onto the canvas. Each view controller manages a single scene. On the iPhone, each scene represents the contents of a single screen. For iPad applications, a screen can be composed of the contents of more than one scene.

Figure 2  View controllers in the object library

 

To storyboard your application, you link each object that’s in a view controller and that can cause a change in the display, to another view controller that configures and implements the new scene (Figure 3). As you can see in the figure, the initial view controller has a green outline. You link the various view controllers in Interface Builder by Control-dragging between controls and view controllers. You can drag from any control that has an output to the header of any other view controller. You can add controls and views to each view controller’s view just as you would add objects to a window or a view in the nib file of an Xcode 3 or Xcode 4.0 application.

Figure 3  Creating a storyboard

 

The arrows between view controllers represent the segues from one scene to another. To configure a segue—for example, to specify the kind of transition to use between scenes—click the arrow and open the Attributes inspector (Figure 4). To define a custom transition, select Custom for the style of the segue and fill in the name of your custom segue class. Standard segue classes are in UIKit (see UIKit Framework Reference). For information about implementing the methods in the UIViewController class, see UIViewController Class Reference.

Figure 4  Attributes inspector for a segue

 

The result is a storyboard that graphically represents every screen of your application and the flow of control among the screens. Double-click the canvas to zoom out to see the entire storyboard (Figure 5).

Figure 5  Storyboard for an iOS Application ----------------------------------------------------------------------

Preparing to Transition to a New View Controller

 

 

Whenever a user triggers a segue in the current scene, the storyboard runtime calls the prepareForSegue:sender: method of the current view controller. This method gives the current view controller an opportunity to pass any needed data to the view controller that is about to be displayed. When implementing your view controller classes, you should override this method and use it to handle these transitions.

For more information about implementing the methods of the UIViewController class, see UIViewController Class Reference.

 

Presenting Storyboard View Controller Programmatically

 

 

Although the storyboard runtime usually handles transitions between view controllers, you can also trigger segues programmatically from your code. You might do so when setting up the segue in Interface Builder is not possible, such as when using accelerometer events to trigger the transition. There are several options for transitioning to a new view controller:

• If a storyboard file contains an existing segue between the current view controller and the destination view controller (perhaps triggered by some other control in the view controller), you can trigger that segue programmatically using theperformSegueWithIdentifier:sender: method of UIViewController.

• If there is no segue between the view controllers but the destination view controller is defined in the storyboard file, first load the view controller programmatically using the instantiateViewControllerWithIdentifier: method of UIStoryboard. Then present the view controller using any of the existing programmatic means, such as by pushing it on a navigation stack.

• If the destination view controller is not in the storyboard file, create it programmatically and present it as described in View Controller Programming Guide for iOS.