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!
Storyboard Demo Files

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)

40 Comments.

  1. Nice tutorial, cant wait for more :grin:

  2. iphone开发资源汇总 | 漫步人生路 - pingback on October 24, 2011 at 3:21 am
  3. Love these tutorials, i am new to Xcode and these are helping out a lot. I have one question i am confused on that maybe someone can answer. I se we have 2 view controllers that display the button labels and when the button is pressed on screen goes to the next etc. What i am confused on is the Navigation controller. It appears in our Storyboard folder while but does not show while the program is running. Is it general practice to always have a navigation control?

  4. Thanks for the great tutorials and help!

  5. I’d almost always use a navigation controller when I’m going to be sliding in and out of new views (simply because it controls the stack of views and automatically provides the back button) but it’s not mandatory. You can manually control the transition to new views but I’ve no idea how this fits in with storyboarding as it’s not something I do. If you don’t like the navigation bar – you can still use navigation controller and hide the bar (and deal with going back up the view controller stack yourself)

  6. Thanks, i understand having the navigation controller to go back etc. What i meant to ask(sorry if my question is confusing) is, in Xcode while building our storyboards etc. we have 3 panels, a navigation controller panel and 2 view controller panels. Upon running the program only the 2 view controller panels are visible. Question is, why are there 3 panels while building but only 2 while running the program? I am sorry and hope my question makes any sense, thanks!

  7. Because the navigation controller represents a subclass of something which doesn’t really have a visible element, other than the root view controller (the one it starts by displaying) and any additional view controllers you push onto the stack.

  8. I see, thanks for the patience and explanations!

  9. Storyboard en xCode 4.2 | Make Web Not War - pingback on October 27, 2011 at 11:12 pm
  10. Any particular reason why in the “Simulated Metrics” section of the Attributes inspector for the New View Controller the “Top Bar” is set to None? Looking at the screenshot of the storyboard I was surprised to see it wasn’t showing a navigation bar even though one does appear when you run the project.

  11. @brucehobbs: With all versions of Interface Builder, these simulated items were always treated ONLY as design placeholders and never had an impact on the actual running project. They are there so you can design your interface correctly and not have all your subviews move around oddly when the actual interface appears differently. In other words, you’d switch on the ‘top bar’ item only if you knew you’d have a navigation bar – so you can design around it.

  12. Sorry if I gave you the impression I didn’t understand the purpose for the feature. What I was trying to understand was why you chose to suppress the display of the navigation bar in IB for this view in the project. Just seemed to me that it could be a little confusing for someone looking at the storyboard and then wondering why the application doesn’t look the same. Or am I completely misunderstanding something?

  13. Ah right, good point. Oddly I didn’t purposely turn it off. I’ll test this tomorrow and see what the default behaviour is for adding a new view and will adjust as necessary. You’d think default behaviour should be an inherited ‘inferred’.

  14. @brucehobbs: Thanks for that. I reproduced the steps and admit I must have switched it off. Have added a line and a new screenshot to reflect the actual view when the connection is made. Thanks for the catch.

  15. XCode 4.2 and Storyboards | IM Software - pingback on November 6, 2011 at 9:05 am
  16. Thanks for the Tutorials. I am new to this Storyboard concept. I followed this tutorial of yours after using a Utility Application template to create my App. with Core Storage ticked. When I embed Navigation Controller to the main View. The App refuses to start and crashes with this error :
    [UINavigationController setManagedObjectContext:]: unrecognized selector sent to instance 0x6d127d0
    Please help me with what am I missing or doing wrong?

  17. Just out of curiosity I tried doing this and was able to reproduce the issue. It’s (obviously) core data which is having the issue, presumably because once you insert the navigation controller – the app delegate is passing the MOC to the wrong place.

    You’ll have to control how you wire up Core Data here, though I must admit I am a bit surprised that Xcode doesn’t take care of this for you – especially when it knows your project is using core data and it’s likely you’d need to pass a reference to the first view controller.

    Sorry – it’s a bit outside of the scope of this tutorial but I hope that helps.

  18. Ok, Thanks. I will get down and try to resolve this and share if I succeed, Please share if you manage to resolve it first.

  19. I have succeeded in adding the navigation controller onto the View using this code and it does not crash:

    navigationController = [[UINavigationController alloc]
    initWithRootViewController:controller];

    [self.window addSubview:navigationController.view];

    Place it just before this line in the App delegate, in the method didFinishLaunchingWithOptions (make navigationController a property first):

    controller.managedObjectContext = self.managedObjectContext;

    Now I have few questions:

    1) How do I depict this navigation controller on Storyboard so that I can use it to connect to other views?

    2) I did not change any line related to Core Storage, but still it works :!: I am Confused… :?:

    3)This one is a bit off the track, if I use ACR and Storyboard etc. in my project will the project run on IOS 4.X, if not what can be done about it?

    Answers will be much appreciated…

  20. Sorry, I wasn’t thinking last night – my answer is right though. When you add the navigation controller, the app delegate is then trying to pass the MOC (managed object context) reference to the nav controller instead of your first view. Simply change the code in didFinishLaunchingWithOptions: to the following…

    // Get a reference to the navigation controller first
    UINavigationController *navigationController = (UINavigationController *)self.window.rootViewController;

    // THEN get the root view controller (MainViewController)
    MainViewController *controller = (MainViewController *)navigationController.topViewController;

    // And now pass the context
    controller.managedObjectContext = self.managedObjectContext;

    That should fix your issue. No need to manually create your navigation controller. Go back and create your project again – changing the code above. All should be well again!

  21. Thanks… that worked like a charm :smile:

  22. I am trying to do the same thing as KushIP. I used the sample you provided:
    // Get a reference to the navigation controller first
    UINavigationController *navigationController = (UINavigationController *)self.window.rootViewController;
    // THEN get the root view controller (MainViewController)
    MainViewController *controller = (MainViewController *)navigationController.topViewController;
    // And now pass the context
    controller.managedObjectContext = self.managedObjectContext;

    But then I get this error:
    -[UITabBarController topViewController]: unrecognized selector sent to instance

    Any ideas?

  23. Yes – you’re getting this error because you’ve inserted a tabbar into the mix. Try following my other tutorials to see how to support tabbar applications. You can find them under the iPhone Tutorials tab at the top of the page.

  24. Thanks! this tutorial is really helpful. I am new to iOS development and I have one question, i am trying to create universal app, it created two storyboard, one for iPhone & one for iPad but when i try to make changes in this storyboards, its not letting me make any change in iPad storyboard. is there a tutorial or can you please help with understanding this?

    Thanks,
    Tapan

  25. Well, when you say it’s not letting you make changes – what do you mean? Can you expand on this. By default, when you create a universal app using storyboards – it’s already done all the necessary wiring. What kind of changes are you making? What’s happening as a result?

  26. Hi I am new to Xcode 4.2
    could anyone help me to understand
    1.Empty Application
    2.single view application etc..
    and when we should use these…
    thanks

  27. @Rajan01: The various templates are just different starting points for your applications, so the times you should use them depends on what you’re making. The empty application is as it says – just an application delegate and not much else. The single view application provides (and wires up) a single view controller which you can start working away with.

  28. @simon :thanks
    But i have worked with Xcode 3.2
    and Now i am having to work with Xcode 4.2 which is entirely
    different than Xcode 3.2..
    so please could you elaborate your answer
    thanks

  29. @Rajan01: It’s not really entirely different. If you’re comfortable using NIB files instead of storyboarding – you can still choose to NOT use storyboards and do things the way you did them in Xcode 3.2. Storyboards are pretty much the same as using NIB files, except they are all displayed in one place and connected using segue ‘links’, which allows you to customise stuff when your app moves from one controller to another.

    Take for instance if you create a new Single View application (using storyboards). The only difference is that now instead of having individual NIB files, all your content is laid out on one sheet. You still edit them the same as before, and connect things the way you did before. You still have your view controller. The big difference is the segue stuff as mentioned in my tutorial.

    I’m not sure exactly what it is you need to know?

  30. @simon
    Thaks

  31. @simon: thanks for response. i feel like really dumb. iPad storyboard was not letting me add button or label or any control because i had view in zoom in position. after i zoomed out view, now i can put control on controller.

  32. @desaitapan1: Yeaahhhh…. I got caught out with that a number of times. In fact, I did it as recently as earlier today! No joke!

  33. DISCUSSION FORUM is now open on this website if you want to ask questions or post comments. You can find it at the top of the page.

    Any and all participation is welcome!

  34. Xcode tutorial: Interface Builder - iOS Developer Guide - pingback on May 10, 2012 at 2:51 pm
  35. iphone开发资源汇总 | tomorrow also bad - pingback on September 20, 2012 at 9:59 am
  36. iphone开发资源汇总 « T客网 ︱ Techpot - pingback on January 24, 2013 at 3:18 am
  37. 梦寻千里 | IOS开发资源(转) - pingback on August 12, 2013 at 3:10 am