iOS 5 Storyboard: How To use

Segues, Scenes and Static

Content UITableViews

With iOS 5, Storyboards represent a significant change to how we, as developers, construct our user
interfaces using Interface Builder. So far my experience of Storyboards has been extremely positive
however, resources are thin on the ground and with this post I hope to pass on some of my initial
experiences. For a walk through of some of the basics and common pitfalls check out my YouTube video
(http://www.youtube.com/watch?v=rkngNmppQdE&feature=youtu.be). I have also recently created a
practical example around todo lists with a backend system and a full explanation of how to use
Storyboards in a working application please check it out here (http://www.scott-sherwood.com/?p=558).
There are several key concepts that this article will cover the first is the concept of the Scene. Within
Storyboards every UIViewController represent one screen of content. These scenes are linked together
with Segues, these define the transitions between one scene to another. You can specify how you wish
this transition to be made by using one of the preset transitions, Push, Modal and Popover or you can
also create your own custom transitions which can bring a very unique and specific look/feel to your
application.
Other extremely useful features are, Static Cells as your UITableView Content and Prototype Cells. These
concepts are illustrated in the subsequent Scenes and Segues, Prototype Cells and Static Content, and
General Storyboard examples,
Scenes and Segues
As previously stated a scene represents one screen of content. You can embed these scenes in
UINavigationControllers or UITabBarControllers by dragging on a UINavigationController or a
UITabBarController and dropping your UIViewController into it or alternatively, choose Editor->Embed In
in the Xcode menu and choose there relevant component. Using the Embed In method is very handy
and prevents you having to rejig things in your storyboard particularly when you have created several
dierent Segues.
In the image below you will see an example of a blank scene that has been placed within a
UINavigationController. The relationship between the UINavigationController and the ViewController is
shown by a relationship link.
(http://www.scott-sherwood.com/wpcontent/uploads/2011/10/BlankScene.png)
To construct transitions between scenes we use
Segues. These are created by right clicking on the
element that will initiate the transition and dragging
over to the scene we want to transition to. In the
image below you will see the popup that appears
allowing you to specify the transition type and the
resulting Segue created. In this case I have created
a push Segue.
(http://www.scott-sherwood.com/wpcontent/uploads/2011/10/CreatingASegue.png)
As a result whenever someone clicks on the
contacts UIBarButton the ContactsViewController
will be pushed onto the screen without the need for
any additional code. To pass the
ContactsViewController data we must implement
the prepareForSegue method. First we have some
setup we have to do in Interface Builder so that we
can identify which segue has been executed. The
Segue identifier can be set in the Attributes
Inspector.
(http://www.scott-sherwood.com/wpcontent/uploads/2011/10/SetSegueIdentifier.png)
Now in your prepareForSegue method you can
identify which Segue has been executed and
provided the destinationView with the correct
information.

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

if([[segue identifier] isEqualToString:@"ContactsViewController
ContactsViewController *cvc = (ContactsViewController *)[s
}
}
Now we know what the destinationViewController is we can set its data properties. To receive
information back from a scene we use delegation. Both are shown simply in the following code snipped.

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

if([[segue identifier] isEqualToString:@"ContactsViewController
ContactsViewController *cvc = (ContactsViewController *)[s
cvc.contacts = self.contacts;
cvc.delegate = self;
}
}
A final note about UIStoryboardSegue is that when you choose a popover transition you must get
access to the popover in order to dismiss it. You can get this by casting the Segue to a
UIStoryboardPopoverSegue but only after you have checked the identity of the Segue to ensure you are
making the correct cast.
Pages 1 2 (http://www.scott-sherwood.com/tutorial/ios-5-storyboards/2/) 3 (http://www.scott-sherwood.com/tutorial/ios-5-storyboards/3/)
2015 Live.Think.Design. (http://www.scott-sherwood.com)