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; }
@endNow, 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!
