Blue metal compass

Using Storyboards To Make Navigation Based iPhone Apps

Over the past few weeks I’ve been doing a series on using the new storyboard feature in XCode for iOS apps.  The short story here is that we can now compose our iOS apps in a completely new way when we are coding apps in iOS 5.  Storyboards are not backward compatible.

Today, I’m going to show you how to using storyboards to create a navigation based app, with and without a table view.  If you haven’t already done so, be sure to read my previous two posts on storyboards in iOS:

Step One: Create a New Storyboard Based iOS Application

Make sure to have a storyboard app started out (covered in the last post on storyboards).  Your app will look something like this:

Step Two: Delete Default Scene

We need the navigation controller to be the first scene in our storyboard, so we’ll need to remove the scene that XCode place here for us.  Select the scene right in Interface Builder and hit the delete button.  You will be left with an empty storyboard.

Step Three: Add A Navigation Controller

Use the object library to drag a navigation controller unto the storyboard.  XCode will insert the navigation controller and make it the first scene on the storyboard for you automatically.  You will also get the root view controller automatically setup and connected with a seque already connected.

Step Four: Add A Button To The First Scene

Select the scene with the title Root View Controller.  Use the object library to drag a button onto the root view controller.  Set the button title to Red.  It should look something like this:

Step Five: Connect A New Scene To The Button

Now we want to move to a new scene when users touch the Red button.  Drag a new view controller from the object library into the storyboard and change the view controller’s background color to red.

Then control-click the button and drag the blue line to the view controller.  Choose Push for the seque type. Your storyboard will look something like this:

That’s all there is to it when setting up navigation. Now, I’m going to be clever and add more than one scene to my navigation project. Here is what my storyboard looks like:

This app will push new color scenes to the navigation controller based on what button the user presses. All with no coding at all yet.

Step Six: Pushing Model Content Across Scenes

Usually, when you are working with apps that support navigation you are following the Model-View-Controller (MVC) design pattern. This means that one view controller will need to pass a reference to the part of the model that will be presented in the next view controller. So, here our root view controller might need to pass something to the detail view controllers that we have set up here.

Before, this was done as part of the IBAction associated with a user control or in the table view delegate method didSelectRow:atIndexPath: . But, now we don’t have any code associated with these transitions. Luckily, we can get references to the storyboard components from within our view controllers.

So, all we need to do to pass on model references during these storyboard transitions is to override one of these two key UIViewController methods:

- (void)performSegueWithIdentifier:(NSString *)identifier sender:(id)sender;
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender;

To use these method you must make sure that your view controller has a custom code class associated with it. For our example, to set the custom class for our root view controller we can simply use the ViewController that was originally created for us by XCode.

But, we’ll have to set the custom class identity of the view controller on the storyboard to ViewController using Interface Builder.

So, click on the root view controller on the storyboard to select it and then use the Identity Inspector to set the view controller’s custom class to ViewController .

Great, now you can put code into ViewController and it will execute during key events like seque transitions.

In my contrived example, I am going to simply change the view controller’s title property to the text title on the button that the user pressed just to show you how its done:

#import "ViewController.h"

@implementation ViewController

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    UIButton *button = (UIButton *)sender;
    UIViewController *vc = [segue destinationViewController];
    vc.title = button.titleLabel.text;
}

@end

Now, when you go from the root view controller to a detail view the title property (in the navigation bar) will change as well. Again, this where you would do something meaningful with your model content.

That’s it for now – keep your eye out for some more storyboard related posts coming out in the near future. Let me know what you think about storyboards in the comments below!

20 thoughts on “Using Storyboards To Make Navigation Based iPhone Apps

  1. Hello,

    I’ve actually used this tutorial after trying to learn storyboard myself and messing up.

    Im still having problems with the storyboards and displaying the tab bar on subscreens. I can display the first tab bars then once i make a button and send it to another screen the tab bar is gone… how do you suggest putting the tab bar up again?

    Thanks for the tut.

    1. Same problem here, I followed every step exactly, but the navigation bar in the top of the interface keeps disappearing…

  2. Sorry for the triple reply, but do you think its possible to send more data from one page to another? (just like you send the button label?)
    I’m new to iOS development, so feel free to redirect me to another tutorial :P

  3. In step 6, i have the Table View Controller – Root View Controller selected, and the identity inspector selected. The only custom class in my drop down list is UITableViewController. What did I do wrong? Thanks!

  4. @Brandie – You may want to add a view controller (not a table view controller) to the storyboard. At least if you are following this example we are not using table views. Alternately you can try to add a UITableViewController subclass to your project.

  5. Hi Matt, thanks. It looks like the Table View Controller came automatically when I added the Navigation Controller in Step 3. They came as a pair with a segue between them. Are there multiple Navigation Controller objects to choose from, where one comes with a View Controller, and another (the one I chose) comes with a Table View Controller? I only see one in my object library.

    Based on your advice, I deleted the Table View Controller, and added a View Conroller (UIViewController), that did the trick. It does not say Root View Controller like your screen shot, however the app seems to function properly. I read a couple iOS tutorials on view controllers, but it’s still not clear to me how to designate one as the root (except if it’s the first one added, it automatically becomes the root). Does it matter that my first controller doesn’t say Root? Thank again.

    1. I noticed that, too, that adding a Navigation Controller automatically added a TableViewController as the Root Controller. Is that a change in the way the builder works, or is there a way to request that a Navigation Controller starts off with a simple View Controller?

      1. You can just delete the table view controller and then add a view controller. Then connect the view controller to the navigation controller with a segue (relationship segue).

  6. Hi Matt and congrats!
    It’s a VERY enlightening tutorial. It worked flawlessly for me.
    A quick question: I want to push content from a ViewController to a TableViewController (thanks to you, that part is done) and then, from a TableViewCell on to another ViewController (i.e. a table view with 3 cells: George, John and Jim and three view controllers set respectively to George, John and Jim). How am I going to do this?
    Thanks in advance and keep up the good work!

  7. Hi Miguel,

    Thanks – what you see is what I have published on my blog so far. I’m adding Storyboards to my iOS Code Camp workshop as we speak and basing pretty much all my training now on Storyboards.

  8. When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three e-mails with the same comment.
    Is there any way you can remove me from that service?

    Thanks!

    1. Hey Billy,

      There should be an unsubscribe link in the emails that you receive which you can use to get off that mailing. Other than that I have no control over those notifications.

  9. Thank you !
    This is a very simple and useful demo for me.
    I fail if i create a empty project and follow you steps. The screen always show white background without nothing. Can you tell the reason ?

  10. Tutorial doesn’t work, when i add a navigation view, the second screen contains a tableview and it is not possible to add a button on top of it. ( xcode 5.1 ).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>