Using Storyboards To Create A Single View Application

In my last post on Storyboards I talked in general about Storyboards with XCode and iOS. Now, it’s time for a nitty-gritty how to demonstration.

How To Use Storyboards To Create An iOS App

The simplest app that I can think of that would make use of iOS Storyboards is a single scene app that has a button that would display a model view. Imagine an app that has a red screen with a button that has a “Turn Green” button. When you press this button, the view flips over and reveals a red screen with a button that says “Turn Green”.

Create New Storyboard XCode Project

The first step is to open up XCode and select File > New > New Project… .

In the dialog box, select Single View Application and click Next .

In the next dialog that pops up make sure to name your project, select Use Storyboard and Use Automatic Reference Counting .

You will end up with an XCode project that has a Storyboard, app delegate and view controller already setup and ready to go.

Working With iOS Storyboards

You can work with your app’s storyboard is much the same way as a xib file. To open the Storyboard select the file named MainStoryboard.storyboard . You should see something like this appear in Interface Builder:

This is your Storyboard along with the first scene. You can add UI by dragging objects onto your scene from the object library (the widget in the bottom left hand screen area). You can also use all the inspectors with your view controller to set user control attributes and everything else. For this demo, I’m going to add a label, a button and turn the view’s background color to green. It looks like this:

I can already run this app as is and see the new UI. This gets more interesting with Seques.

Adding Scene Transitions With Seques

iOS Storyboards have an interesting component called a seque that is an object and metaphor for managing transitions between scenes (views). Before we get to seques though, we will need another view controller.

Adding View Controllers To iOS Storyboards

To add a view controller to a Storyboard simply drag a view controller from the object library onto the Storyboard. I did this here and also added some UI to this view to represent my red scene:

Adding A Seque

Now we can add our first seque. All you need to do is control-click the button on the green scene and drag the blue line that appears to the red scene. In the popup that appears, just click Modal .

You can run your app right now and when your press the button with the title Turn Red the red view will slide up from the bottom and replace the green scene. Here is what the Storyboard looks like with the seque:

Like other objects, you can select the seque object that you see on the Storyboard to change its properties. For me, I choose to change the transition effect to Cross Dissolve .

You can also make the opposite relationship by control-clicking the button on the red scene and dragging the blue line that appears to the green scene. Once you do that you can use the buttons to flip back and forth between these two scenes. Here is what the Storyboard looks like with both seques in place:

Here is a short video showing how this app should look:

What Do You Think? Stay Tuned For More Storyboard Posts!

15 thoughts on “Using Storyboards To Create A Single View Application

  1. Cool stuff.I’m keen on creating apps though I’m only a novice in programming but that doesn’t prevent me from making complex and profitable apps.I’m using and consider this service to be the most flexible concerning design opportunities among its competitors.

  2. I followed along with your directions above and when I go to run it in the Simulator it does nothing. I click the button and it stays on the green screen, I did have errors saying I needed and identifier so I put red in as segue going form green to red and green for the segue going from red to green. it does not switch the button is hit. Not sure what I am doing wrong should be simple I would think lol.

    1. Never mind I figured it out, I was not dragging from the button to the next screen sorry for any issues I may have caused you :D

  3. Great tutorial! Thank you. I have done very basic coding (html, javascript, basic – a long time ago) and was hoping to learn Xcode. This was a great introduction.

  4. Thanks so much !!! this tutorial really helped me.

    But if am to copy the content on the red scene to the green scene….how will i do ??

  5. Hey there! I know this is kinda off topic but I was wondering which blog platform are you using for
    this site? I’m getting sick and tired of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform. I would be great if you could point me in the direction of a good platform.

  6. Hey Arturo,

    I’m actually using WordPress which I do love. This blog used the Genesis + eleven40 theme which is very nice. As for hacking – there is a plugin called WordFence that you can use to help you or maybe get good hosting like WPEngine who can help you with these problems. Also, I’ve used a website that will scan and fix your site. They have a free solution and a paid monitoring solution.

    I haven’t tried other CMS except for SquareSpace which I hated. But I’ve heard that Joomla is pretty good – you could try that.

  7. Greetings! I’ve been reading your blog for a while now and finally got the bravery to go ahead and give you a shout out from Houston Texas! Just wanted to say keep up the fantastic job!

  8. Hey there, I think your site might be having browser compatibility issues.

    When I look at your blog in Ie, it looks fine but when opening
    in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, great blog!

  9. Does not work on xcode 5.1 ( immediate crash when we click on the button ), there’s no settings like yours when creating the project ( it doesn’t ask for ARC for example )

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>