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.

There are several key concepts that this article will cover the first is the concept of theScene. 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 different 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.

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.

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.

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:@"ContactsViewControllerSegue"]){
         ContactsViewController *cvc = (ContactsViewController *)[segue destinationViewController];
     }
}

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:@"ContactsViewControllerSegue"]){
         ContactsViewController *cvc = (ContactsViewController *)[segue destinationViewController];
         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.

 

Prototype Cells and Static Content
Other neat features of Storyboards are Prototype Cells and Static Content UITableViews. Lets first take a look at Prototype cells.

In the past we have to create our UITableViewCells in a nib and load them from the nib at runtime. This could result in lots of Cell nib files culturing up our project. Now we can create Prototype Cells directly inside our UITableViewController scene. In the following screenshot you can see our contacts UITableViewController scene where we have a custom prototype cell with a UIImageView and two labels.

To use your UITableViewCell prototypes you must provide them with a unique identifier that you set in Interface Builder. You can then dequeue the correct cell and set the content that it is to display in your cellForRowAtIndexPath method.

 static NSString *CellIdentifier = @"ContactsCell";
    ContactsTableViewCell *cell = (ContactsTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    cell.contact = [contacts objectAtIndex:indexPath.row];

Note: That you can have as many different prototype cells as you wish the only requirement is that you set each one with a unique cell identifier.

It is also possible to create Segues between cells and ViewControllers to transition to a new scene when a cell is tapped. In the following screen shot you can see how to connect a cell to a UIViewController and by specifying Push as the transition mode we now have a detailed view pushed on whenever a cell is tapped.

As before we must specify an identifier for this Segue and pass data through to the view being shown via the prepareForSegue. This provides the newly presented view with the necessary data to be displayed.

Static Content UITableViews are an awesome new feature included in Storyboards. With Static UITableViews, cells can be designed inline without the need for an additional data source. Instead you can hook up UI elements that appear on different cells to IBOutlets in you UITableViewController class. In order to create a Static TableView layout you must change the Content type in the Attributes Inspector to Static as shown in the screen shot below.

I have also chosen to set the separator to none however you can leave the separator in if you wish to keep the UITableView look. Now that the view is laid out as we would like we can hook up the various UITextAreas and the UIImageView to your controller class. Finally I am going to finish with some additional Storyboard tips and resources.

 

General Storyboard Tips and Resources

UIStoryboard is a runtime representation of everything configured inside Interface Builder as such any individual scene can be loaded using either,

[UIStoryboard instantiateInitalViewController]
[UIStoryboard InstantiateViewControllerWithIdentifier]

Should you choose to split your application across multiple Storyboards these can be loaded using,

[UIStoryboard storyboardWithName:bundle:]

To launch your main story board at the predefined entry starting point of your applications user interface you can just specify the name of the story board in your info plist (Key UIMainStoryboardFile).

If you loose your entry point or wish to change the entry point of your Storyboard you can do so by following my previous post.
Specifying the entry point of your Storyboard

Useful resources
WWSC 2011 Storyboard Example

Advertisements