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:

  1. Creating Scenes
  2. Adding a Navigation controller by Embed In or from the Object Utility
  3. Add a Segue
  4. Setting Segue Identify and properties

Creating Scenes


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.

Figure 1: Select a Single View Project
Figure 1: Select a Single View Project
Figure 2: Name the project and enable Storyboarding and ARC (Automatic Reference Counting)
Figure 2: Name the project and enable Storyboarding and ARC (Automatic Reference Counting)

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.

Figure 3: This is the initial View Controller
Figure 3: This is the initial View Controller
Figure 4: Drag onto Storyboard workspace and create two extra View Controllers
Figure 4: Drag onto Storyboard workspace and create two extra View Controllers

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

Figure 5: Highlight (blue) View Controller and enable "is Initial View Controller"
Figure 5: Highlight (blue) View Controller and enable "is Initial View Controller"
Figure 6: Drag and create a Navigation Controller which will manage navigation between View Controllers
Figure 6: Drag and create a Navigation Controller which will manage navigation between View Controllers

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.

Figure 7: The newly created Navigation Controller and Connection.
Figure 7: The newly created Navigation Controller and Connection.

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.

Figure 8: Drag and create Toolbar and Button. Rename button to something meaningful
Figure 8: Drag and create Toolbar and Button. Rename button to something meaningful
Figure 9: Drag a Connection Line to second View Controller to create segue.
Figure 9: Drag a Connection Line to second View Controller to create segue.
Figure 10: Select the Push Segue
Figure 10: Select the Push Segue
Figure 11: Newly created segue. Add an Identifier to be able to access segue programmatically.
Figure 11: Newly created segue. Add an Identifier to be able to access segue programmatically.

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.

Figure 12: First Scene
Figure 12: First Scene
Figure 13: Second Scene
Figure 13: Second Scene

Create Popup

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.

Figure 14: Change target device setting
Figure 14: Change target device setting
Figure 15: Create Modal Popup
Figure 15: Create Modal Popup

In Summary

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.

More by this Author


Comments 26 comments

Fow 4 years ago

How do i connect the scenes to view controller files (.h and .m)?


Fow 4 years ago

How do i connect the scenes to view controller files (.h and .m)? Since i will not find the way back to here after you have answered my question, and since i don't even know if you will answer it, i would like to give you my mail address kf22cv@gmail.com. Thank you very much if you reply :)


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Select the view controller in the Storyboard and Identity Inspector (3rd icon) there is Custom class field which allows you to type in the name of of your custom class files. Your custom class name should appear as you start typing. Save your changes.

Let me know if you need additional help.

Thanks

klanguedoc


mikeydcarroll67 4 years ago

Hey I am having problems with this. Did you put the navigation controller before the first or second view controller? And did you get an options list when you dragged the connection between the navigation controller and the view controller?


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

To create a navigation controller, select the first ViewController and in the menu under Editor / Embed In / Navigation Controller. The Navigation Controller will be created and linked to the first VC. When you create Segues between two VCs, you will get a list (popup) to choose the type. You can choose Push or Modal


mikeydcarroll67 4 years ago

Ok. I am looking at having to do that for my app and was having problems getting it to cooperate like I wanted.


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Can you give more details? Another way, if I understand the issue correctly, is drag and drop an Navigation Controller on the storyboard. Then drag a connection from the View Controller that you want to load first to the Navigation controller. This will create a navigation. You can also select all the View Controllers in your app and use the above mentioned technique.


Odukku 4 years ago

Easy and simple tutorial

Thanks loads


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Thanks for your kind words. I am glad it helps


odukku 4 years ago

sir would like to know more details on how to make connection between object,buttons,labels etc in storyboard

hope u will help

thanks in advance


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

I would be glad to help. I will write a quick tutorial today on connecting elements in Storyboard and will publish later today. I will post a comment here when the new tutorial is published.

hope this is ok.

Kevin


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

oduku,

As promised here is the tutorial for making connections;

https://turbofuture.com/misc/IOS-5-A-Beginners-Gui...

Hope it helps

Kevin


Harv 4 years ago

First of all thanks! I appreciate the time you take to help.

I've set the view controller to a new default class of type UIViewController for the initial view of the storyboard in preparation to add the outlet for a text field. The view displayed properly before I set the class, now I get a black screen. What needs to be set/removed in order to allow the storyboard to handle the display of the view?


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Hi Harv

Thanks for your kind words. They are always appreciated. you need to make sure that your class is set in the Custom class field of your UIViewController. Select the UIviewController in the Storyboard and switch to the Identity Inspector and type in the name of your Viewcontroller class (This is the .h and .m files). You dont't need to specify the file extension, just start typing and Xcode will find it.

Hope this helps. If you still have issues, write back!

Kevin


Harv 4 years ago

The implementation file of a ViewController added with the storyboard on a new project do not have the init and load view methods. The .m file from the Object list in the builder has them included. Once I figured that out, I removed them and the storyboard was happy to launch the view.

Thanks for the help, saving my nickels and dimes for a copy of your book!


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Well I am happy I was able to help and your app is working. That is the main thing. I wish you lots of success with your app.


Erwin 4 years ago

I tried to follow your example but this time, i tried to write a simple statement that access the "UIView" of a view controller by using the following intended statement:

self.view.bound.size.width

but when after typing self and . (dot) i tried searching for "view" property. Surprisingly, its not there anymore. I don't know if this is about the xcode version i'm using (XCode 4.2).

If this is not anymore possible, how am i able to do this statements in this version:

ex.

self.view.bound.size.width

Thanks in advance


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Hi Erwin

I tried this in an open project and the code assist found object as I type it:

[self.view.bounds.size.width];

It may be something with your UIView

k


James 4 years ago

I was having some issues linking the views, since most of tutorials use window based app, and this is no longer on XCode 4.2

in the moment i started reading i got my answers, thanks a lot, you just saved my life!


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

I am glad I was able to help with my tutorial. Let me know if you run into more issues. I will try to help if I can.


Prerna 4 years ago

I am just lost with the connections I have created a a window bassed application which hada a View Controller called xyzViewController I had some elements on this controller. I wanted to add a navigation controller to this View Controller. I embedded a navigation controller and it looks exactly like how you explained. When I launch I get the xyzViewController and like in your case KcbViewController. I now want to navigate to a new view controller and back how do I go about it.


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Hi Perna

Remove the navigation controller (delete), then select both UI Vire Controller and repeat the process as in the tutorial. This will create a navigation bar with forward and back buttons.

Kevin


Norm 3 years ago

Hi Kevin,

I am new to this game and have a question about view controllers. I have a navigation controller then my menu then my viewcontroller that has my calculator. I would like to add another calculator to this program and I am thinking a person would run it from the menu view just as I did the first viewcontroller. Am I warm in assuming this. Thanks in advance.


klanguedoc profile image

klanguedoc 3 years ago from Canada Author

Hi Norm,

Yes you could load a second calculator or the same one from the menu. You would need to a view to the viewcontroller with the parameter being the name of the view where your calculator is situated.

[self.view addSubview:calculatorView];

or

[vcName.view addSubView:calculatorView];

Kevin


Kartheek 3 years ago

If i am having a textfield & button, then how can i validate textfield & then only navigate.

For ex, if i enter 0 in textfield then only on pressing button it should navigate to next view. how?


klanguedoc profile image

klanguedoc 3 years ago from Canada Author

You have to use a Segue unless you use a nib file instead.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working