|By Wendy L. Wise
In this article, excerpted from Anyone can Create an App, we’ll create an app so we can walk through storyboards and see some of the coolness in action.
Storyboards are a little bit like what they sound like – a way to visualize a story and how the parts of the story are related. If you imagine a graphic novel (I’ve heard that’s what the cool kids are calling comic books these days), there are multiple panes that tell a story. Each pane flows into the next so the reader can follow the story. Imagine if you were writing your own graphic novel – you could start out with several blank panes and lay them out so you could begin planning the novel. You might sketch in a few details on each pane to start, and then you might begin filling in more details as time progresses.
Storyboards in Xcode are similar to creating the imaginary novel mentioned above. You can lay out multiple screens (henceforth known as scenes) and show how the scenes will interact and then you can add more detail to each scene. The Storyboards give you a conceptual view of your application and how the scenes fit together and how they flow. Let’s create an app so we can walk through storyboards and see some of the coolness in action.
Creating an example Storyboard app
Our example app will just have a button on the first scene which will link to the second scene, and then a back button on the second scene will return the user to the first scene. Let’s show that in pseudocode:
- Create a new app called StoryboardExample using the SingleViewApplication template and add a button
- Add a second scene to the app and link the button action to the second scene.
- Add a navigator bar to the second scene and add a cancel button
- Link the cancel button action to the first scene
Now that we have our pseudocode laid out, let’s get started.
Create the new app
Let’s start by creating a new application and saving the project as StoryboardExample. Select the SingleViewApplication when the templates are presented. Now let’s add a button to the app – select the Main.storyboard from the Project Navigator (on the left side of Xcode). Once the Storyboard loads in the center pane, use the Object library to add a button to the storyboard. Change the title of the button to “Push me”.
Add a second scene to the app
Let’s start by changing our real estate so the storyboard editor takes up more of the scene. Hide the navigator (the left panel in Xcode) by clicking on the third button from the right at the top of Xcode. Now scroll the main editor a little so there is some white space next to the storyboard scene with your button. Mosey on over to the Object Library and grab the top most item in the list – the View Controller – and drop it just to the right of the first scene on your storyboard. It should look like this:
Figure 1: Add a View Controller to the storyboard and drop it to the right of the first scene.
Now we need to connect the action of the Push Me button to the second scene. Control-click the Push Me button and drag your mouse over to the new scene (this is the same action you used to connect the button to the code). When your mouse is over the new scene, release the mouse button and you’ll see the following pop up:
Figure 2: Once you Control-click the Push Me button and drag to the new scene, you’ll see this dialog box pop up. Select the “modal” option.
When the black box pops up (see Figure 2), there will be three options to select – Push, Modal, and Custom. Select “modal.” If the connection was successful, your storyboard should look like this now:
Figure 3: Once you’ve successfully connected the Push Me button to the second scene, Xcode will add a seque to the storyboard.
Notice the arrow pointing from the first scene to the second scene. This is called a seque. The segue is a way to visually represent that the Push Me button, when clicked, will show the second scene. Let’s run the app to test the Push Me button and make sure it works as we expect it to. Once you click the Push Me button, it should disappear because the second scene loaded. It might be hard to see this, so let’s add a label to the second scene to make it obvious that it has loaded. Go back to the Object Library, search on label, and drag it onto the second scene. Double click the new label and change it to “You have arrived!” Run the app again, and now when you click the Push Me button the scene should change to show the “You have arrived!” scene.
This is starting to look like an app with two scenes, but there is a major problem with the app right now. We led the user into a dead end – there is no way to return to the first scene!
Let’s fix that now.
Add a navigator bar
In order to return to the initial scene in our app, we need to ad a navigator bar to the top of the app. If you open your phone app on your iPhone, you’ll notice the bar at the top that has a title of the scene you’re on (Favorites, Contacts, Voicemail) as well as buttons to the left and right of the title on some scenes. For instance, on the Favorites scene, you have the “Edit” button to the left of the title and the add (+) button to the right of the title. This bar is call a navigator bar and it serves several purposes. It clearly tells the user which scene they’re on with the title, which is a nice navigational aid so they don’t get lost in the app. It provides an area to add buttons such as Back, Cancel, Edit, and Add. Let’s add a navigation bar to the second scene now so we can let the user go back to the first page.
Back in Xcode, search the Object Library for “navigation.” You’ll notice that several items returned, including Navigation Controller, Navigation Bar, and Navigation Item. In this case, we want the navigation bar. Grab the navigation bar and drag it to the top of the second scene so it looks like this:
Figure 4: Drag a navigation bar to the top of the second scene
Now, double-click the title in the navigation bar and change it to “Second Screen.” Run the app again and you should see the “Second Screen” title in the navigation bar when you click on the push me button. Now we can add a cancel or done button the navigation bar so the user can return to the previous scene. In general, you want to use a cancel button when there is something that the user was doing that they want to cancel out of (for instance, adding a new contact to the address book). You want to use a done button when the user is finished with an action.
Your first inclination may be to look at the Object Library and add a navigation item to the bar, and that would seem logical, but in this case – it isn’t what you need. Search the Object Library again for button. Grab the object “bar button item” and drag it up to the left side of the navigation bar. Once you drop it on the bar, it should say “item” on the button like this:
Figure 5: Drag a Bar Button Item to the navigation bar and drop it to the left of the title.
Now we need to change the Item button to a cancel button. Apple was kind enough to add several standard button titles to the library so you don’t actually have to change the title for a cancel button. These options can do a lot more than just changing the title, but that’s all they will do for us right now.
Back in Xcode, click on the Item button so it is selected and then go to Attributes Inspector on the right panel. You should see the following items:
Figure 6: The bar button item Attributes Inspector allows you to change the style, the identifier, and the tint.
Click on the drop-down for Identifier and you’ll see all the options that Apple has conveniently provided us for the buttons. In this case we want to use the “cancel” option.
Run the app again and click on the push me button to get to the second scene, and then click the cancel button. Nothing happened because you haven’t specified what kind of action should happen when the button is clicked. Let’s specify that now.
Link the cancel button back to the first scene
Now we’re going to connect the cancel button’s action to the first scene, much like we did with the Push Me button. Control click the cancel button and drag it back to the first scene. Be careful to select the button and not the entire bar. You’ll see the same dialog box pop up that you saw when you connected the push me button (see Figure 2). Select modal again. Run the app again and you’ll see that the cancel button now takes the user back to the first scene.
Figure 7: Once you connect the Cancel button to the first scene, you’ll see two segues now.
When you look at your storyboard, you’ll see that there are now two segues – one that goes from the first scene to the second scene, and one that goes from the second scene back to the first scene. Congratulations! You just added a second scene to your app and allowed the user to navigate to it and back.
Segue Animation Types
When you ran the application above, you may have noticed that the second scene slides up from the bottom when click on the Push Me button. The same happens when you click on the cancel button. You can easily change how these pages are displayed by changing transition property of the segue. Select the first segue that you created (the one going from the first scene to the second scene) and you’ll notice that there are several options in the Attributes Insepctor, including one called “Transition”.
Figure 8: Storyboard segues have transition types – select a different one to see what happens.
There are four basic transition types for scene loading.
- Cover Vertical – Loads the new scene by sliding it up from the bottom
- Flip Horizontal – The scene rotates horizontally to load the new scene
- Cross Dissolve – The page fades or dissolves to load the new scene
- Partial Curl – The page ‘flips up’ from the bottom of the scene.
You can change your segue to any of these to see how they work. It’s amazing how changing one attribute of Segue can change the way the scene loads. Xcode is very powerful!