iPhone Tutorial One — Introduction to Storyboarding

Okay guys, well I figured I would start off my using of Xcode 4.2 with this blog post. I have never used Xcode 4.2 before this, so let us see how intuitive storyboarding really is. I am not going to go into detail of what “@property” and “@synthesize” are, I am assuming you already know basic coding. If enough people ask, I will explain everything.

So let’s start out with a Hello World application.

We will create a View-based Application:

As you can see, we are presented with 5 files — the App Delegate’s header and implementation files, and our Hello_World header and implementation. Let’s jump right into the MainStoryboard.storyboard. You will be present with the following — a simple window or “scene”:


Okay guys, I feel like to start these tutorials off, I am going to just create an app that switches views on button pushing, just to show the supposed power of Xcode 4.2’s new storyboarding. So first we will add 3 more view controllers, just by going to the bottom right and scrolling down to the golden bubble saying “View Controller”. You will also notice that gestures are in there now as well! I was very excited to see this. So now our screen looks like this:

And we will now also place a UIImageView within each of these, to give them all a background, the backgrounds are uploaded below.

http://www.mediafire.com/?bwp2odbchystwas

Create a folder in your project names “Images” and add these 4 images to the folder, copying them in as needed (checkbox on pop-up). After this, set each of the UIImageView’s to have a difference image, as below:

Now, this is similar to normal Xcode, adding UIImageViews and changing the images without even typing any code. Now however here comes the interesting part, that makes me really love this new Storyboarding. I am going to connect all 4 of these views and push the views on the screen without even writing any code! First we will add 5 buttons onto each of the “scenes”, 4 of them to connect the views, and one to add an IBAction to each view. After all the buttons are placed you will get something similar to the image below:

Now we are going to do the fun part. Now, if you are familiar with Xcode 4.0.2, you know that if you want to show a new view, you have to push it onto the screen using modal views, something I know about all too well. Even though there was not much code to doing this, Storyboarding allows us to do it even easier. Simply just Ctrl drag from button “2”, on the First View, onto the Second View. You will see a function “performSequeWithIdentifier:sender:”. Select that, and that is it! You will also notice that there is a little arrow connecting the two views. This is what is called a “Seque”, and is simply the 3 lines of code in present a modal view. Connect up all the buttons to the corresponding views, except the buttons for their own page — we will use this for something else later. Now I know this is really messy, but it is just how we have it all organized. If on the left side you select one of the Seques, you can change the type of transition as well as the effect, as shown below.

Now, we will actually do some programming to add some more effects to these pages. You will notice that we only have one .h and one .m for only one view, so we need to construct 3 more. We will go ahead and add a UIViewController subclass for each, and when asked what type, make sure it is UIViewController and we do NOT include a nib. We will set this up in a minute. Now if you noticed while looking at the settings for each of our created View Controllers, you would notice that they are not associated with any files where they will get data from. If you go to View 2, and go to the identity inspector, you will see a field titled “Class”. This is where the view pulls in data from. Put in the title of your .m/.h file for your second View, as shown below. You will also notice in the storyboard that the name of the scene changes when the file is added to class.

Do this for the other two views. So for each view we will be adding 2 IBActions, one for the current view’s button and the Hello! button. In the .h file, we add the function declarations:

And then we actually write the functions. You will notice in the .m file, there is no longer a need for deallocing or releasing/autoreleasing objects, since Xcode now does this itself. Pretty nifty if you ask me!

And now we go back to the Storyboard and connect the buttons to our newly created functions just as we do in Xcode, except you point the button to the View Controller, not File’s Owner, since there isn’t one.

Do this for the rest of the views in the Storyboard, creating similar functions and connecting them. The video below shows how the project runs once everything has been hooked up, and the source code for this project has been included at the end. Any suggestions for the next tutorial send me a message or comment below!

Source Code:http://www.mediafire.com/?4nt5a8kldzigjlw

    • Elliott Chuck
    • June 12th, 2011

    Awesome stuff, been looking for something like this. Wondering if you have any details about using initWithNib: and storyboards, something for a Navigation app i’m trying keeps giving a SIGABRT error. Keep up the good work!

    • I was thinking the same thing actually, since you can create a uiviewcontroller class with a xib file. Try adding a uiviewcontroller scene, and then creating a uiviewcontroller class with the nib. Set the new scene in your storyboard’s class to your newly created file, and in the viewdidload try and add an initWithNib on self. I’ll will try this when I get home.

  1. This really cleared a lot of things up because I went blindly into Xcode 4.2. I really appreciate it.

    • Kevin
    • June 27th, 2011

    This was helpful – I wasn’t sure how to create the .m and .h files once I added a view controller! This filled in the missing piece.

    I think you may have missed one of the new features of 4.2, the ability to create function stubs by dragging from buttons in the storyboard to the code in the .h or .m files. You can create actions and outlets by ctrl-click and drag (or right click and drag in my world) from the button directly to the code…

    Thanks again.

    • I’m pretty positive this feature is already in Xcode 4.0.2 and previous versions, unless this feature has been improved in some way.

        • Kevin
        • June 27th, 2011

        Guess I was late to the party, the last version I used was 4.0.1!

        Keep up the good work!

  2. How do you change the the designated entry point of a Storyboard? The view with a green frame around it. I want to use the provided tableView Storyboard template, but drop the first tableView inside a tabBarController.

  3. Maciej Swic :
    Your comment is awaiting moderation.
    How do you change the the designated entry point of a Storyboard? The view with a green frame around it. I want to use the provided tableView Storyboard template, but drop the first tableView inside a tabBarController.

    I have already tried Editor -> Embed in -> Tab Bar Controller. It looks correct in IB, with the tabBarController with a green frame around it, and the navigationController connected in the viewControllers for the tabBarController. However when i run the app, i only get the status bar, a black window and an empty tab bar on the bottom. The navigationController and tableView are missing.

    • pikachuexe
    • October 13th, 2011

    Tutorial is BACK!!
    Thanks!!!

  4. When i ctrl-drag from a button to one of the other views, I don’t see a function “performSequeWithIdentifier:sender:”. Instead I see ‘Storyboard Segues’, with three options below it; push, modal and custom.

    Selecting ‘Modal’ seems to be the one you need to select, for anyone else having the same problem.

    • This is similar to the

      “Now I know this is really messy, but it is just how we have it all organized. If on the left side you select one of the Seques, you can change the type of transition as well as the effect, as shown below.” It is just a nicer way of doing so, also the first half of the video is basically the same thing as what you are saying.

  5. Thanks for posting this up!

  6. Awesome tutorial! Tnx for this!

  7. Thanks guy. Congratulations.

  8. Hi thre

    Thanks for the tutorial

    Would you be so kind as to show us how to use the page-view controller?

    Thanks

    Leonard

    • Niki
    • October 18th, 2011

    Very nice tutorial, easy to follow and nice presentation of the storyboard

    • Lek
    • October 18th, 2011

    Many thanks for fantastic tutorial !

    Lek

    • Jason
    • October 19th, 2011

    Thank you! Very helpful!

    • Gil Gonsalves
    • November 2nd, 2011

    Nice Job on the tutorial. Really helped to understand and get started with storyboard. Keep up the good work!

    • David DelMonte
    • November 12th, 2011

    Great intro to Storyboards. I really appreciate your efforts.

    • Danno
    • November 15th, 2011

    Very nice! Thanks for sharing this. The books all use older versions of XCode so their exercises are hard to follow through.

    I did notice that this book:

    The iOS 5 Developer’s Cookbook: Core Concepts and Essential Recipes for iOS Programmers (3rd Edition)

    is releasing on Nov 24th with the newest version of XCode referenced.

  9. Very Good Tutorial. . .
    BUT
    One Thing I noticed that while doing Partial Transition the page, next page comes on the screen but the page we were on still be there in the curly shape.

    I m new to it, so please help me out.

    • Peter Abatan
    • November 29th, 2011

    Awesome insight into storyboarding – Thanks

  10. Hi, thanks. The best Storyboard explanation on Internet !

    • Fox
    • January 3rd, 2012

    Thank you for this one! You were the first to explain this so i could understand how to connect view controller files to each scene. But i wanna add something to where you explain this. Its not the scene you connect to the files. Its with the scenes owner button you’ll add the files to, under identity inspector.

    • Christian
    • February 6th, 2012

    “Create a folder in your project names “Images” and add these 4 images to the folder, copying them in as needed (checkbox on pop-up)”

    How do i copy them in? I can’t drag & drop?

  11. thank you, really easy to follow guide – quick and to the point! has helped me catch up with ios5 after a long break from ios coding… best guide out there on storyboarding. cheers

  12. After looking over a number of the blog posts on your blog, I truly appreciate your way of writing a blog. I saved as a favorite it to my bookmark website list and will be checking back in the near future. Take a look at my website too and tell me what you think.

  13. I’m excited to discover this website. I wanted to thank you for ones time for this particularly fantastic read!! I definitely really liked every little bit of it and i also have you saved as a favorite to check out new information in your web site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 47 other followers

%d bloggers like this: