In my last post on Storyboards I talked in general about Storyboards with XCode and iOS. Now, it’s time for a nitty-gritty how to demonstration.

How To Use Storyboards To Create An iOS App

The simplest app that I can think of that would make use of iOS Storyboards is a single scene app that has a button that would display a model view. Imagine an app that has a red screen with a button that has a “Turn Green” button. When you press this button, the view flips over and reveals a red screen with a button that says “Turn Green”.

Create New Storyboard XCode Project

The first step is to open up XCode and select File > New > New Project… .

In the dialog box, select Single View Application and click Next .

In the next dialog that pops up make sure to name your project, select Use Storyboard and Use Automatic Reference Counting .

You will end up with an XCode project that has a Storyboard, app delegate and view controller already setup and ready to go.

Working With iOS Storyboards

You can work with your app’s storyboard is much the same way as a xib file. To open the Storyboard select the file named MainStoryboard.storyboard . You should see something like this appear in Interface Builder:

This is your Storyboard along with the first scene. You can add UI by dragging objects onto your scene from the object library (the widget in the bottom left hand screen area). You can also use all the inspectors with your view controller to set user control attributes and everything else. For this demo, I’m going to add a label, a button and turn the view’s background color to green. It looks like this:

I can already run this app as is and see the new UI. This gets more interesting with Seques.

Adding Scene Transitions With Seques

iOS Storyboards have an interesting component called a seque that is an object and metaphor for managing transitions between scenes (views). Before we get to seques though, we will need another view controller.

Adding View Controllers To iOS Storyboards

To add a view controller to a Storyboard simply drag a view controller from the object library onto the Storyboard. I did this here and also added some UI to this view to represent my red scene:

Adding A Seque

Now we can add our first seque. All you need to do is control-click the button on the green scene and drag the blue line that appears to the red scene. In the popup that appears, just click Modal .

You can run your app right now and when your press the button with the title Turn Red the red view will slide up from the bottom and replace the green scene. Here is what the Storyboard looks like with the seque:

Like other objects, you can select the seque object that you see on the Storyboard to change its properties. For me, I choose to change the transition effect to Cross Dissolve .

You can also make the opposite relationship by control-clicking the button on the red scene and dragging the blue line that appears to the green scene. Once you do that you can use the buttons to flip back and forth between these two scenes. Here is what the Storyboard looks like with both seques in place: