The introduction of storyboards in iOS 5 has allowed for the rapid development of application prototypes. In this blog, we’ll look at setting up a segue between two view controllers such that when an event occurs in the first view controller, the second is displayed. We’ll also look at the technique of setting properties from one view controller to the other. So let’s get started!
Start Xcode, select the Single View Application template, and name your project Segues. Make sure the Use Storyboards checkbox is checked:
Click Next, choose a location to save the project, and click Create.
When the project is created, navigate to the MainStoryboard.storyboard file:
You will see a single view controller on the Interface Builder screen. This corresponds to the class ViewController in the project. Let’s add another UIViewController to the project.
Add a new Objective-C Class file named SecondViewController to the project. Make sure it is a subclass of UIViewController:
Let’s give the SecondViewController a single IBAction method to respond to a button click. Here is SecondViewController.h:
@interface SecondViewController : UIViewController
–(IBAction)okButtonPressed:(UIButton *)sender;
@end
In SecondViewController.m, we’ll add the implementation of this method:
{
[self dismissViewControllerAnimated:YES completion:nil];
}
We are telling this view controller simply to dismiss itself. The dismissViewControllerAnimated: completion: method is used here instead of the dismissModalViewControllerAnimated: method, which has been deprecated. The completion: parameter expects a block defining the action (if any) to be taken once the controller has been dismissed. Here, we just pass nil.
In the ViewController class, we’ll add a property for a UISegmentedControl. We will use this control to set the color of the SecondViewController. We’ll also need to #import SecondViewController:
#import "SecondViewController.h"
@interface ViewController : UIViewController
@property (nonatomic, weak) IBOutlet UISegmentedControl *color;
@end
Storyboard segues differ from the NIB file model in several ways. First (and most obviously), there are no nib files, so we cannot set up the view for a view controller using initWithNibName: bundle: because that method never gets executed. Secondly, the destination view controller of a segue is instantiated by the runtime during the segue. We can control this process by overriding the prepareForSegue: sender: method. Here is our implementation of ViewController.m:
@implementation ViewController
@synthesize color;
–(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
SecondViewController *svc = segue.destinationViewController;
switch (self.color.selectedSegmentIndex) {
case 0:
svc.view.backgroundColor = [UIColor redColor];
break;
case 1:
svc.view.backgroundColor = [UIColor greenColor];
break;
case 2:
svc.view.backgroundColor = [UIColor blueColor];
break;
default:
break;
}
}
@end
In prepareForSegue: sender:, we instantiate the SecondViewController as svc by setting it equal to the segue’s destinationViewController property. This allows us to manipulate the properties of the destination view controller as the properties of svc. We get the selected index from the segmented control, and use it to set the color of the second view controller.
All that remains is to hook everything up in Interface Builder. Navigate to the MainStoryboard.storyboard file, and drag a new UIViewController to the screen. Add buttons and a segmented control to the two views as shown:
In the properties of the Second View Controller (the one on the right), set the class of the view controller to SecondViewController:
Wire up the UISegmentedControl to the ViewController’s color property, and the OK button on the second view controller to the SecondViewController’s okButtonPressed: method. Now CTRL-click and drag from the Show Color button (on the ViewController) to the second view controller to create the segue. When prompted, choose Modal. Select the segue and give it an identifier:
For many segue operations, an identifier is necessary. Since there is only one segue in this application, we technically don’t need to provide an identifier here, but if there were more than one (as is usually the case), each segue would require a unique identifier.
Run the application, and test that the proper color is shown in the second view controller. Also test that the OK button returns to the first view controller:
