iOS Programming Recipe 3: Creating Segues with the Storyboard Part 1

Introduction

In the early days of iOS development the Interface Builder was cumbersome and not too helpful. Now the interface builder is nicely integrated into Xcode and can be very helpful and easy to use. This article serves as an introduction into the storyboard as well as how to work with segues.

The storyboard in Xcode allows a developer to lay out the design of an App before any code has to be written. This can be helpful for conceptualizing an idea. Often a developer may want to transition between multiple scenes. To transfer between scenes with the storyboard a Segue needs to be implemented.

Asumptions

  • You Are Familiar with Xcode 4.5 if not, do so here.
  • You know how to create a project with a single view controller

The Segue

A segue is basically a connection between two views which allows one view to present another when an action(most commonly a button push) is performed. depending on the application, one of two types of segues may be used.

The Modal Segue

The modal segue is the most simple type of segue. Generally a modal segue would be used when there is no need to share information between the presenting view and the presented view. A good example of this would be a login screen.

The Push Segue

A push segue will be necessary for either the navigation controller or the tab bar controller. These types of controllers handle memory managment and help with passing data between views.

Using A Modal Segue

A modal segue is really pretty simple as far as implementation. For this example we’ll make a login screen that will take us to a view. Start of with a new single view controller project titled “modalview”.

In the main story board drag three Labels, two text fields, and a button from the objects explorer in the bottom right hand pane to the view. Then change the text on the labels and buttons to look like the following image:

iOS Login Screen Example

next drag a new view controller onto the storyboard. From the new storyboard control drag from the login button to the new view controller. When prompted choose “modal” from the dialogue.

Control Drag From Login Button

Choose Modal Segue


On the new View Controller add a label that says “You’re Logged In” and change the background color. I also changed the font size. You can do this from the attributes inspector in the top right pane. When you’re done it should look like the following:

Modal View Example

Now go ahead and simulate the App. Ok, I guess you may have noticed that the login screen doesn’t actually do anything. The purpose of this tutorial is to show how segues work. we do not want to get into the in deep realm of credentials and validations. The point of this is to basically show you how to move to a new view when a button is pushed. I imagine we’ll have a recipe for Logins later.

In a real app. we may have the login screen jump right to a navigation controller or a tab bar controller. In which case, we would do what was done right here except control drag from our button to the navigation controller or tab bar controller.

Using the Push Segue With The Navigation Controller

Go ahead and start another single view controller project titled “navsegue”.

select the single view controller on the storyboard and delete it.

From the objects explorer pane in the bottom right hand corner drag a navigation controller onto the storyboard. You should see something like this:

Adding Navigation Controller

You’ll notice that the navigation controller we added to the screen has a table view controller as it’s root view controller. We don’t want a table view controller so go ahead and select it and delete it.

Drag a standard view controller on the storyboard where the table view controller used to be. control drag from the navigation controller to the new view controller and choose root view controller from the prompt. Now our new view controller is the root view of the navigation controller.

Connection Root View Controller

Choose Root View Controller

Now go ahead and add two more view controllers to the storyboard. On the root and the first view controllers add a button that has the text “Next”. Your scene should now look something like this (I added backgrounds but you don’t have to):

Navigation Controller Ex. layout

Now control drag from the button on the root view controller to the first view controller and choose push from the prompt. Repeat this step from the first view controller to the second view controller.
Adding Push Segue

On the First and Second view controllers, select the navigation bar at the top and within the attributes inspector change their titles to “First” and “Second”.

Adding Navigation Titles
That’s all it takes to set up a navigation controller from the storyboard. At this point you may have noticed that we didn’t actually have to write any code to do this. Code will be needed when it comes to sharing data between Navigation controllers. We’ll handle this topic in future posts. For now if you simulate the app you should see the following:

Navigation Controller View  Simulation

Notice on the the first view controller that a button for the root view controller was added there for you. Kinda nifty huh? The reason it’s called a Push segue is because it’s pushing views onto a memory stack. The Navigation controller pushes and pulls view controllers on and off the stack as you navigate.

That’s it for part one of this recipe series. Part II will cover the Tab Bar Controller.

More thoughts

As a beginning developer, interface builder can get you up and going quickly. The caveat is that it kind of mystifies what is happening behind the scenes. Therefore, as a beginning developer, I would recommend learning how to work with and without the interface builder.

About Joe Hoffman

I am An Electrical Engineer that spends a lot of my off time doing web development and other programming. Currently I am trying to expand my knowledge with iOS and I find that writing tutorials helps me learn more thoroughly as well as provide some useful info to others.

Comments

  1. Jeff Lovell says:

    Hi, I created a counter on one view controller. Works great. I’m trying to make this work by passing the counter data between 5 different controllers in a storyboard. Prepare for segue?
    For Example. For First View Controller, I want to send IBAction plus 1 number, when clicked (to the fifth view controller) and show the result in an IUOutlet-UILabel, but segueing to second view controller.
    Then, click IBAction button on second view controller, which adds to (to the fifth view controller again) and shows the result in IUOutlet-UILabel, but segueing to third view controller etc.
    I’ve searched web and books for hours. Can’t figure out the solution. Any thoughts?

    • Joe Hoffman says:

      Hi Jeff,

      Your intuition is right with prepare for segue. If prepare for segue is called from the button your counting the clicks on. You can increment the counter within the prepare for segue method.

      I would also recommend creating a counter class that you can pass around rather than passing around the count. This of course would require you to import the class in each view controller and create a property for the class in each view controller. You will set the property in your new view controller in the prepareForSegue Method.

      be sure to check out the recipe on prepareForSeque:

Speak Your Mind

*

css.php
Privacy Policy