An important new feature in Xcode 4 is the use of Storyboards to quickly prototype the user interface of applications. With storyboards, we can define an application as a series of view controllers (called Scenes) and the transitions between them (called Segues). There are three types of segues available: Push, Modal, and Custom. In this blog, we’ll look at the simplest of these; the Modal segue.
Start Xcode, select “Create a new Xcode project,” choose the Single View Application template, and click Next. Name the project Segues, and make the following choices in the options window:
Make sure the “Use Storyboards” option is chosen: segues will not be available to us unless we use storyboards.
Click Next, choose a location to save the project, and click Create.
In the MainStoryboard.storyboard file, drag a new View Controller object to the window. Adjust the two view controllers until they are side by side, change their colors, and place a button on each view as shown here:
Add a new View Controller object to your project by selecting the ViewController object, then right clicking and choosing New File… from the popup menu. Using the Objective – C Class template, make this class a subclass of UIViewController and name it SecondViewController:
Save the new SecondViewController class in the default location and create it. Return to the MainStoryboard.storyboard file, and select the “View Controller” object in the second scene. Change the class of this object to SecondViewController as shown:
Segues allow us to create transitions between view controllers without writing a single line of code. CTRL-Drag from the “Second View…” button on the first view controller to the second view controller. In the resulting popup, choose Modal. Repeat these actions by dragging from the “First View…” button on the second view to the first view. Again, choose Modal. When you are finished, it should look something like this:
Select the segue object in the first scene, and change its properties as shown here:
Segues must have an Identifier, they do not work without one. Also note that we have set the Transition style to Flip Horizontal. Now select the segue object in the second scene, and make these settings to its properties:
Again, we have given the segue a name and a transition style. Now run the application:
The MainStoryboard object is hooked into the application at the UIApplication level. Any view controllers on the storyboard are therefore accessible via segues without writing any code! Experiment with different transition styles as an exercise.
If we need to do some other work during the segue (such as setting properties on a view controller that is about to be displayed), we can do so by defining the prepareForSegue: sender: delegate method of UIViewController. For example, we could set the color of the second view controller on the fly by making these adjustments to ViewController.h and ViewController.m:
#import <UIKit/UIKit.h>
#import "SecondViewController.h"
@interface ViewController : UIViewController
@property (nonatomic, strong) SecondViewController *secondVC;
@end
//ViewController.m
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize secondVC;
– (SecondViewController *)secondVC
{
if (!secondVC) {
secondVC = [[SecondViewController alloc] init];
}
return secondVC;
}
– (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
UIViewController *destVC = (UIViewController *)segue.destinationViewController;
destVC.view.backgroundColor = [UIColor blueColor];
}
…
In the header file, we’ve imported the SecondViewController.h file so we can make a property to control its background color. In the implementation file, we lazily instantiate this property by overriding its getter. Then we define the prepareForSegue:sender: method to get the segue’s destination view controller object, and set its background color property. The segue object is an instance of UIStoryboardSegue. It has two very important properties: destinationViewController and sourceViewController. These properties are both of type id; we must cast them to a UIViewController subtype to access their properties.
Running the application now will show the change:
