Before Storyboards, the only way to manage multiple UIViewController s and the transitions between them would be to do so in the code. This tutorial shows you how to use Storyboards to manage the transitions (known as segues) in Interface Builder.

For example, you might have written code like:

[navCtrl pushViewController:ctrl animated:YES];

and then watched the code grow and become more complex. Within a few days, you might have started hunting around your code to see where you fired these transitions, and within a few weeks you might have refactored your code and introduced some conventions.

With storyboards, you can do that in the interface builder (which has been integrated into XCode 5 4). A storyboard allows you to use the interface builder to create, layout, and customize boards (views and view controllers) as well as manage transitions between the boards.

First, make sure you have the latest version of XCode. Create a new project, and select Single View Application. Make sure that Use Storyboard is checked.

Once the project is created, you should be able to see two files with the .storyboard extension. Click on MainStoryboard_iPhone.storyboardto open it up in the editor.

(Note: you are allowed to create your own storyboards. They are compiled as Objective-C objects. You may also specify the main storyboard to use under the Deployment Info section in Project Summary.)

Right now, the storyboard only has one view. Let’s add some movement.

Click on the rectangular region in the center, and then go to Editor > Embed In > Navigation Controller. This makes the navigation controller the root view controller and adds the existing view controller to it.

Hit Alt+Cmd+0 to show the Utilities pane on the right. Select View Controller from the objects menu and drag it to the grid. Select “Bar Button Item” from the objects menu and drag it to the title bar of the first view controller.

You should see three objects on the grid, as shown below:

Now, let’s add a segue (transition) from the first view controller to the second view controller.
Click on the bar button that you just added, and then Ctrl-click on it and drag the blue line to the second view controller. When the black menu pops up, select Push.

Compile and run the app. You should be able to go from the first view to the second by tapping on the bar button.

This should be able to get you started on Storyboards. I have attached an example that I did with custom segues (custom transitions). Note that everything else is the same as Interface Builder, so you still can get a handle to your view controllers by specifying custom classes and using IBOutlets. You may also respond to segues in your view controllers by overriding the prepareForSegue:sender: method. Here is an example:

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

    NSString *identifier = segue.identifier;
    Trip *trip = nil;

    logIfDebug (@"enter prepareForSegue:");

    // get destination controller
    JHDetailViewController *detailViewCtrl = segue.destinationViewController;

    // show details
    if ([identifier isEqualToString: ShowDriveTripSegue] ||
        [identifier isEqualToString: ShowFlightTripSegue]){
        // get managed object
        NSIndexPath *selectedIndex = self.tableView.indexPathForSelectedRow;
        trip = [self.fetchedResultsController objectAtIndexPath:selectedIndex];
    }else if ([identifier isEqualToString: AddTripSegue]){
        // insert new managed object
        trip = [self insertTrip];
    }else {
        // not mine, send it up!
        [super prepareForSegue:segue sender:sender];
        return;
    }

    // if sender is nil, that means not from a table cell -> flip instead of push
    if (nil == sender && [segue isKindOfClass:[JHDetailSegue class]]){
        JHDetailSegue *customSegue = (JHDetailSegue *) segue;
        customSegue.wantsFlipAnimation = YES;
    }

    detailViewCtrl.trip = trip;
    detailViewCtrl.delegate = self;

    logIfDebug (@"exit prepareForSegue:");

}

Updates
As pointed out by a reader, sender will almost never be nil, because if it was then the method wouldn’t be fired in the first place. However, this brings up a good point: you can fire your own segues from the code. Just use performSeguesWithIdentifier:sender:.

There are a few advantages, including:

• Productivity is increased
• UI development is kept within the Interface Builder
• More code is reused
• App development becomes more structured

But beware the Whorfian Effect!

---

Continue to Part II – Custom Seques 

Categories: Apple, Design, iOS, Tutorials, Usability/Interface