iOS Storyboarding Tutorial using Segues | Scenes | View Controllers | Navigation
IOS 5 introduced a new IB (Interface Builder) tool: Storyboards. Storyboards provides the tools to lay out the complete workflow of an IOS 5 appplication in one file as opposed to previous version where each View had to be created individually.
In this tutorial, I will introduce scenes, segues and the Navigational Controller. I will perform these steps:
- Creating Scenes
- Adding a Navigation controller by Embed In or from the Object Utility
- Add a Segue
- Setting Segue Identify and properties
A screen in IOS is called a scene. You create scenes by using Controllers and Objects and adding Controls and other UI elements to them. The great thing about IOS 5 SDK is the new Storyboard which allows you to layout the whole workflow of your scenes and application form the same file.
Start by creating a new project, MyScenes and select a Single View Template. As usual, provide a name the for the project, select the iPhone type and make sure the “Automatic Reference Counting” is checked before moving to the next screen, which should be the Git creation page before clicking the button to create the project.
When the project is created, the Single View template create a View Controller for you. As part of this tutorial, we will add two more View Controllers: one to navigate too, and the other one to use a Modal Popup screen.
To add a View Controller, open the Storyboard file in the Project Navigator. To open the Project Navigator, select the Project Navigator button in the toolbar or access it from the View menu. Click on the Object Navigator button in the XCode 4.2 toolbar or access it from the View menu under Utilities.
In the Object Utilities, select the Object and Controllers and select a View Controller and drag it to the Storyboard. You can add as many View Controllers as you like or need. To create a workflow or navigation between the scenes, you will need to create a Navigation Controller and segues, which like pipes between the View Controllers.
Also once you have multiple controllers, you need to define which one will launch first. You do this by opening Attributes Inspector and selecting the Initial Screen attribute in the View Controller section
Create Navigation Controller
To create a Navigation Controller, select the first scene and select “Embed In | Navigation Controller” in the Editor menu of the XCode IDE. Alternative way is to drag a Navigation Controller onto the Storyboard workspace. You will notice that with this method a View Controller is created with the Navigator. If you create a Navigator with the second method, simply select the View Controller that was created with the Navigator and delete it.
To connect the Navigator to the Initial View Controller that was created with our app, follow these steps:
Either use the Ctrl+Left mouse button, or simply the right mouse button and drag a connection line onto the body of the View Controller. The body of the View Controller will turn blue when a connection is being made. Release the mouse button and the View Controller will intermittently flash blue a couple of times before returning to its normal color.
Add a Segue
You can create a segue from any object that has an output. For this tutorial, I will add a Toolbar Object to the foot of the first View Controller and attach a segue to the second View Controller from the button on the toolbar.
From the Windows and Bars section in the Object Utility, select the Toolbar object and drag it onto the first View Controller at the bottom of the screen. You may need to adjust the width. Notice that the Toolbar came equipped with a button. Double click on the button and change it label to something meaningful like, "NextScene".
Next, using your right mouse button or the Ctrl+left mouse button, select the button (not the Toolbar) and drag a connection line to the second controller. The second View Controller or scene will flash momentarily to indicate that a connection was created. You can also inspect the connection by selecting the button in the toolbar and opening the Inspector.
Test your App
Test you app by Click on the Run button. Once the app is up and running, click on the button on the bottom of the screen. It you followed the steps correctly, the app should open the second scene and you should have a button on the second scene to return to the first. Close your app by selection IOS Simulator | Quit.
It is also possible to create Popup style View Controllers. However only works with iPad as the iPhone or iPod can only have one scene at a time in its window. To test the Popup, which the Simulator to iPad in the Toolbar Scheme field and also in the project by select the Project and changing the target device in the Configuration page (see Figure 14).
To create the Popup, select a Date Picker control and drag it onto the third View Controller. Resize the View by selecting it and changing the size attributes in the Attribute Inspector.
While we are add it, drag a button on to the second View Controller to connect a second segue to the Popup (Modal) View Controller.
This was a quick introduction to navigation between View Controllers. Much more complex is possible, especially with the iPad. I hope the tutorial was useful.