Tutorial: Basic Storyboard in XCode 4.2

Today I’m going to present a very brief tutorial on how to use storyboarding in Xcode 4.2.  When storyboarding appeared it was pretty intimidating compared to how Interface Builder used to work and I felt that Apple really threw a curve ball with this one. In reality it’s really not all that bad when you start to use it.  The tutorial will show (from scratch) how to link two view controllers with a button, without coding a single line!  Lets jump right in and create a new Xcode project.

 

Create the demo project

We are going to use Single View Application for this and call it Demo.  For simplicity I’m going to target this tutorial only for iPhone.  Remember to tick ‘Use Storyboard’ and ‘Use Automatic Reference Counting’ (though I won’t be touching on ARC in this tutorial).  I don’t like prefixing my Class names with anything so I will be leaving that blank.

So you should now have your new blank project consisting of your App Delegate, a single View Controller and a storyboard file.  Before we go mental in the storyboarding, lets create a new view controller.  Right-click the Demo group (just above App Delegate) and choose ‘New File‘.  Under the Cocoa Touch group, choose UIViewController subclass and call it “NewViewController“.  Make sure both boxes are unticked.  So now you should have a project which looks like the image shown here.

 

The storyboard

Storyboarding allows us to define how the different screens in our application will all interact with each other.  While you can have more than one storyboard for a single app, it’s unlikely you’d really need it (except when you’ve chosen a universal binary, in which case it’ll be required).  Lets click on the storyboard file and see what’s going on in there.

Okay, so initially you can see our project has our first view controller in the storyboard as the entry point for our application.  What we are going to do here is first add in a navigation controller so we can push and pop new views.  Fortunately Xcode provides an easy way to do this.  Single click the View Controller image on the screen and go to the Editor menu (top of screen) then Embed In and finally choose Navigation Controller.  Xcode very kindly adds in our new navigation controller and does all the background work necessary to get it working.  Thanks Xcode, but it would have been more useful if the option were more obvious!  You’ll now two boxes on your storyboard as shown…

Great.  Now we’re going to need a button to demonstrate moving from one view to another – so lets add one to the View Controller.  Just drag a ’rounded rect button’ from the objects list onto the view controller (keep in mind you can’t drag items onto the views if they are zoomed in!).  Lets title the button ‘New View‘.  While we’re here, lets also give the navigation bar a title of ‘Original View‘ by double-clicking it and typing it in.

Now we’re going to need a new View Controller object to represent our ‘NewViewController’.  Drag a View Controller in, to the right of our existing view controller.  Add a label to the view with the text ‘My New View‘ or something similar, so we know this is our pushed view when we test.  Your views should look roughly like this…

Excellent – we’re almost there.  Now we need to link up our View Controller object to our ‘NewViewController’ subclass.  Select the controller you just dragged in and choose the Identity Inspector on the tools panel on the right (it’s the third icon from the left).  In the ‘Class‘ drop down box, choose “NewViewController“.  And finally, we need to tell our first view (the button) that we want to push the second view when it’s clicked.  Simply CTRL+Drag from the button to our new view controller.  When you do this, you’ll be presented with a menu of three options (push, modal and custom).  Choose Push.  This is made possible because we have a Navigation Controller in our project.  It’s worth noting that if we hadn’t performed the add navigation step earlier, the button would do nothing when run, however you could still have used the ‘modal’ option which doesn’t require a navigation controller. Also note that when we make the connection, the navigation bar should appear in the new view controller as show below.

Your final storyboard layout should look like this….

Now if you go run your project you should be see our first view and after clicking the button, our second view!  Probably the only thing worth mentioning is that if you need to pass data to your new view, you can implement the method “prepareForSegue:sender:“.  Any customisation can be done here.  Also note that you can return data from your view using delegates as you usually would.

Thats all for now.  Any questions, just post comments.

Project files can be obtained here!
[download id=”4″ format=”1″ autop=”false”]

Comments are now closed for this tutorial but I’d still love to hear from you. You can post in our integrated forum by clicking this link (or by going to the Discussion Forum tab at the top of the page)