Fundamental Storyboarding: Transition Between Scenes

February 26, 2014

There are four fundamental storyboarding operations you should learn in order to effectively use the storyboarding feature of Xcode. Well, in this workshop you will learn how to perform two of them: transition between scenes and modify the transition between scenes.

Create an Xcode project

In order to perform above storyboarding operations you’ll have to create an Xcode project; so launch Xcode and create a new project (shift + command + N). Select the Single View Application template before pressing the enter/return key on your keyboard. Now provide information shown in Figure A for the new project.

Click Next, and you will be prompted for the location where you want to save your project. Choose a location (e.g iOS7 Projects) then click the Create button.

Create a navigation controller

By default, Xcode creates a standard view controller in the storyboard application, which manages the storyboard view controllers and their corresponding views, called scenes. I decided that the application will use a navigation controller instead to manage the storyboard view controllers and their corresponding views.

Start by clicking the Main.storyboard file to load it in Interface Builder. As you can see in the image below, the storyboard canvas contain a single scene. The arrow to the left of the scene is visually letting you know that this is the initial scene shown every time the application is launched.

Figure 1-1: Initial storyboard scene

Now select the View Controller via the Document Outline pane. With the View Controller selected, click Editor ➤ Embed In ➤ Navigation Controller as shown in Figure 1-2 below. This will place a navigation controller object to the left of the existing view controller scene and connect the two with an arrow indicating the relationship between them-see Figure 1-3 below. A navigation bar is added below the status bar of the scene as well.


Figure 1-2: Embedding a scene in a Navigation Controller	Figure 1-3: Scene 1 embedded in a Navigation Controller

By the way, if there are two or more scenes in a storyboard file, The Navigation Controller class takes care of putting a “back” button on a scene’s navigation bar, so you can return to the previous scene (i.e scene 1). You’ll see this in action shortly when you run the newly created application.

Set the first scene navigation bar’s Title attribute

Let us set the first scene navigation bar’s Title attribute. Double-click the center of the navigation bar as shown in Figure 1-4 below. Enter Scene 1 then press your keyboard’s enter/return key.

Figure 1-4: Setting the navigation bar’s Title attribute

Add a button on the view controller scene

The next thing you have to do is, add a button on the View Controller scene and a new view controller object on the storyboard canvas which which will serve as the scene that’s shown when the button is tapped. First drag a Button from the Object Library onto Scene 1. Double-click the button and enter the name Goto Scene 2. Center the button within the scene, as shown in Figure 1-5 below.

Add a second scene on the storyboard

To add a new scene on the storyboard canvas, drag a View Controller from the Object Library to the right-hand side of the existing View Controller scene. Hold it there for a second, and the existing scene will shift to the left. Once it does, place the new View Controller to the right of the Main View Controller scene that has shifted to the left. This is illustrated in the image below.

Figure 1-5: A Button and new scene

Add a view controller class in the project

You’ll have to add a view controller class file in the project and associate it to scene 2. In the Project Navigator pane, select the StoryboardFundamental folder (so the new files are placed within this folder). Follow instructions shown in Figure 3-1 to create a View Controller class file in the project.

Figure 1-6: Add class in the project

When you reached step 3 of the New File.. creation process, provided options shown below for the class. On the final window, just click the Create button.

Class:  SecondViewController
Subclass of: UIViewController
Check boxes: Leave them unchecked

Note that the two new files (SecondViewController.h and .m) were placed below the Supporting Files folder. Drag them back above the folder so they appear with the rest of the files, as shown in Figure 1-7 of the Project Navigator pane.

Figure 1-7: Relocate the class files

Associate the SecondViewController class with scene 2

You’ve added a new view controller class called SecondViewController in the project. Now, you need to associate it with the second scene you placed on the storyboard canvas. Start by clicking the Main.storyboard file to load it in Interface Builder. Click the second scene’s Dock. It is the black rectangle below the scene. Make sure the Identity Inspector is showing in the Utilities pane. Your Xcode’s workspace should look similar to Figure 1-8.

Figure 1-8: Scene 2 and the Identity Inspector

In the Identity Inspector, select the SecondViewController class as illustrated in Figure 1-9 below.

Figure 1-9: Associate Scene 2 to its class files

By setting the second scene’s Class attribute in Interface Builder, you’ve associated it with the SecondViewController class files. You can add code in the class files to implement any required functionality for scene 2.

Create a segue for the button control

You need to create a segue for the first scene’s button to transition to Scene 2. In the olden days this took huge amounts of code. To create a segue for the first scene’s button control, you’ll have to control-drag from the first scene’s Goto Scene 2 button to the second scene as shown in Figure 1-10.

Figure 1-10: Connect the Button control to the new scene

Once you’ve Control-dragged over to the second scene, release the mouse button and you will see a menu as shown in Figure 1-11 where you set the Storyboard segue action. Select the Push action from the Action Segue pop-up menu.

Figure 1-11: Select the Storyboard Segue transition style

Set the second scene navigation bar’s Title attribute

You should set the second scene navigation bar’s Title attribute. To do this, as you did with the first scene, double-click the center of the second scene’s Navigation Bar and enter the name Scene 2. Figure 1-12 shows what the second scene look like now.

Figure 1-12: Setting the Navigation Bar’s Title attribute

Run the application

Here comes the fun part of the workshop. Run the application by clicking the Run button on the top left-hand corner of Xcode, and as shown in Figure 1-13, the app works perfectly. Click the Goto Scene 2 button, and you are transitioned to the second scene as shown in Figure 1-14. Click the navigation bar’s back button entitled Scene 1, you are returned to the first scene. Awesome!


Figure 1-13: Scene 1 in simulator	Figure 1-14: Scene 2 in the simulator

Modify the transition between scenes

Modifying the transition between scenes is a simple process, once you learn how. Let’s change the segue transition that occur between Scene 1 and Scene 2.

Start by clicking the segue indicated by the pink arrow in Figure 1-15 below. In the Attribute Inspector, click the Style attribute to display a list of styles, as shown Figure 1-15. Select a style; for example, Modal. As you can see in Figure 1-16, the Attribute Inspector changed by displaying the Transition attribute. The default Transition for the Modal style is Cover Vertical, so select a transition other than that one from the menu shown in Figure 1-16, then run the application once again to see the transition you’ve chosen in action.


Figure 1-15: Modify a segue transition Style	Figure 1-16: Modify a segue transition Style

Repeat above steps to see another transition style in action.

Persisting a Modal scene’s navigation bar

Notice that the second scene’s Navigation Bar disappear when you change the segue Style attribute to Modal. That’s because that style doesn’t persist the scene’s navigation bar. To resolve this issue, you’ll have to embed scene 2 in a Navigation Controller. Here’s how to do it.

Click scene 2’s Dock then select Editor | Embed in | Navigation Bar. This is what the storyboard canvas look like now.

When you run the application now, scene 2’s Navigation Bar will appear once again above the status bar. Now is a good time to change the segue Style attribute back to Push and remove the Navigation Controller you created for Scene 2, then run the app one last time to verify that the application still work.

This conclude part 2 of the Storyboarding Fundamental workshop series. You learned how to perform these fundamental Storyboard operations and then some.

transition between scenes
modify the transition between scenes.

Next week, you will learn the third fundamental Storyboard operation, which is to pass data backward to a source view controller. Until then, happy coding! 🙂