Tutorial: Storyboard in XCode 4.2 with Navigation Controller and Tabbar Controller (Part 1)

Based upon the fact that there are still very few tutorials on how to use the storyboarding stuff in Xcode 4.2 (iOS 5) – I’ve decided to write this second and slightly more complicated tutorial. The output of the tutorial will be an app which uses a tab bar, navigation controllers and a table view controller. It won’t be the most complex of tutorials but should serve to help those who are confused about wiring up a slightly more complex view controller setup. In this part, we will set up the bulk of the work and get some views working. In part 2, we will look at the table side of things.

Before we start, you should download the image pack (below) for the tab bar images I’ll be using. These images are beautifully crafted by Joseph Wain from Glyphish.com. As a side note, Joseph has just released Glyphish Pro 3 which can be purchased from his website for very little money!  It includes 400 icons for iPhone and iPad development that are an absolute must for developers! The images are reused here with permission. Of course, if you’d prefer to have imageless tab bar items then feel free to skip this step (and the image assignment steps later on) but it won’t look as cool!

 Download the tutorial images here… Storyboard tutorial icons

(You must be logged in to download these!)

 

Creating the project

We’re going to start this tutorial with the very basics and construct it into something (almost) wonderful. Kick off by creating a new project in your Xcode, using the Single View Application template. Give it a product name of Demo and make sure ‘Use Storyboard’ and ‘Use Automatic Reference Counting’ are both checked. For now, we will support only the iPhone – so choose iPhone from the device family drop down menu. Click next and create the project.

Before we go any further I’m going to first change the name of my default view controller (remember, this is a ‘single view’ application so a default view has already been created for us). I want the name of this class to be a bit more useful later on so first, select ViewController.h and double-click the name ViewController (right beside @interface) to highlight it. Once highlighted, go to the Edit menu -> Refactor -> Rename. In the popup box, enter the new name as Tab1_ViewController and click Preview. The preview window which appears shows us all the places the name will change. Click Save to complete the process. You’ll be asked if you want to take snapshots – click Disable. Phew – glad that’s over. We now have a nice useable class name for later on (you’ll see why this makes sense!)

Next we shall create another view controller – this time a subclass of UITableViewController. We’re going to use this for our second tab root view controller. So go ahead and create a new file (either CMD+N or go through the File menu -> New -> New file) and choose UIViewController subclass template. We will use Tab2_TableViewController for our class name, and will choose UITableViewController from the subclass drop down menu. Make sure both the boxes are left unticked and click Next, and Finish to create the files.

We’ll also need the images you downloaded above – so extract that ZIP file and drag the contained images into the ‘Supporting Files’ group in your project. Now, maybe it’s just me – but it drives me mad that the supporting files group isn’t in the root level of the project files – so I’ve dragged mine there (OCD alert!) but you don’t have to if you don’t want to. It’ll just niggle at your subconscious if you don’t.

Your final project files should look something like this…

Creating the Tabbar Controller & Navigation Controllers

For the purposes of the tutorial, we will be creating a tab bar controller to demonstrate its use – and a navigation controller. By default, our storyboard has neither of these – only a single view. Lets open up the storyboard file MainStoryboard.storyboard and start to do some tinkering.

Xcode contains a great way of adding in navigation and tab bar controllers – though it’s a little bit hidden away. First, select the view controller and go to the Editor menu -> Embed In -> Tabbar Controller. Xcode will automatically create our new controller and link up the existing view controller. Again, select the View Controller and this time go to the Editor menu -> Embed In -> Navigation Controller. You’ll see that Xcode inserts the new navigation controller between the tab bar controller and the view controller. Very nice – so far, so good! Your views should look like this…

At this stage, we have an application which contains a tab bar with one tab, and one view (managed by a navigation controller). You can run it if you like and you’ll see for yourself (you will however get a couple of compiler warnings about our TableViewController because we’re not using it yet). Of course, we really want another tab on there so we can see the switching between the two – so lets drag in another Navigation Controller from the Utilities (objects) list and plonk it down somewhere. You’ll notice that when you drag in the navigation controller, you automatically get another root view controller as part of the deal. We don’t want it, so you can delete the attached view controller. Instead, we’re going to drag in a Table View Controller from the objects list and plonk it down where our deleted view was. Once you’ve done this, you need to CTRL+Click drag (or right-click-drag) from our new navigation controller to the new table view controller and choose ‘Relationship – rootViewController‘ from the menu. Now, our new navigation controller is using our new table view controller as its root view. Next we need to make our new tableview use our custom subclass. Click the Table View Controller and go to the Identity Inspector (third icon from the left in our Utilities panel) and choose Tab2_TableViewController from the Class drop down menu.  Finally, we need to connect our new navigation controller to our tab bar controller. CTRL+Click drag (or right-click-drag) from the Tab Bar Controller to our second Navigation Controller. Choose “Relationship – viewControllers” from the popup menu.

Before we leave this, lets give our tabs some glitz with a fancy icon and some custom text. On the original Navigation Controller, click the ‘unknown’ icon image in the tab bar to select the tab bar item. Under the Attributes Inspector (third icon from the right in the Utilities panel) change the Title to be “Tab 1 View” and from the image drop down, choose 132-ghost.png (assuming you dragged in the images from earlier). The tab bar image and text should now change. Repeat the process for the other Navigation Controller, this time giving it a title of “Tab 2 View” and choosing the image 196-Radiation.png. Lets also give the root views a title of some kind. First, double click the Navigation Bar in the Tab1 View Controller and give it a title of “Tab 1 View”. Then double click the Navigation Bar of the Tab 2 Table View Controller and give it a title of “Tab 2 View”. All done! Now you have a storyboard to be proud of, which should look something like this…

You can build and run the application at this stage and you’ll be delighted to see the tabs now work! The first tab should display a view with a white screen and the second tab should display a view with an empty table. Both tabs should have images and text, and they should look like this…

Well done you!

 

Beefing out Tab 1 with some new views

At this stage, I’d quite like my first tab to do something awesome so what I’m going to do is have two buttons on that view which (when pressed) will load another view. Lets start by creating a couple of new view controllers. Click File -> New -> New file and choose UIViewController subclass template. Call the class “Tab1_RedScreenViewController” and make it a subclass of UIViewController (leaving both boxes unpicked). Now repeat the process and create another view controller. This time lets call it “Tab1_GreenScreenViewController“.

Go back to the Storyboard and drag a couple of rounded rect buttons onto the Tab1 View Controller (view). Call the first button “Red View” and the second “Green View“. Now, drag on a couple of new View Controllers and put them just to the right of our Tab1 View Controller. We’re going to have each button linked to its own View Controller. First, lets associate our new view controllers with the classes we created. Select the first one and go to the Identity Inspector (third icon from left in our Utilities panel) and change the class to Tab1_RedScreenViewController. Then do the same for the second view controller but choose Tab1_GreenScreenViewController. Be sure you’ve selected the ViewController and not the view, otherwise you won’t see the appropriate controllers in the drop down box.

Now lets link our buttons to the new view controllers. CTRL+Click drag (or right-click drag) from the Red View button to the Red Screen View Controller and choose Push from the popup menu. Do the same again from the Green View button to the Green Screen View Controller and choose Push.

Finally, we need to change the background colours of these two views! Click the Red Screen View Controller and from the Attributes Inspector change the Background colour to a red colour. Similarly, change the Green Screen View Controller to a green colour. And just to satisfy my OCD – you could also change the navigation bar title on each of these view controllers to match the colour of the screen.

Here’s what the finished storyboard looks like…

Now go and try out your masterpiece. Everything should run perfectly and you should now be able to navigate to your two new coloured views (under tab 1)! How cool is that?

That’s about all there is to it. See how much can be accomplished without even typing a single line of code? I may complete this tutorial with a table view extension over the next few days – but until then, have fun playing with Storyboarding.

You can get the complete project here.  Storyboard complete demo (part 1)

EDIT:  PART 2 has now been posted!  Read it here!

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)

24 Comments.

  1. Two tutorials in one day. Nice work. Been struggling with storyboarding since iOS5 came out.

  2. Yeah I found it to be a bit odd to begin with too

  3. Thank you so much for this tutorial … I’m wondering to know if there is a way to connect a tableview with another control view.

  4. I’ll be covering this in part 2, which I’ll hopefully get written by Friday night. It’ll be an extension of this tutorial. :lol:

  5. Just one thing to say, THANK YOU :grin:

  6. Dude what can i say 10/10 for simplicity and detail. You’ve helped me understand this massively. If you were here i’d give you a great british hug! Thanks again!

  7. Wow thanks! Im a newbie to Xcode and of all tutorials online this is the best.
    ounce again thank you. :grin:

  8. Thanks for the kind comments. I’m glad the tutorial helped someone out. :mrgreen:

  9. Thanks, this easy to understand and informative tutorial tight me a lot, on to part 2!

  10. Thanks. This is a great tutorial. After doing it I reckon I’ve got what I need to use Storyboard.

  11. Do you know why refactoring (used when renaming viewController) is not allowed when the path to the project is within the Developer directory? I got the following message:

    Refactoring is not supported for projects located in “/Developer”.

    It also showed how to work around this (by moving the project folder) so it’s not a big deal. Just curious.

  12. No, I’m afraid I have no idea. I did hit an issue with refactoring when I wrote the tutorial (if it was done later in the process) but generally it’s not a feature I normally use. Sorry about that.

  13. I was kind of getting into iOS 4, and then iOS5 came out and I got completely lost. Your tutorial was exactly what I needed. Not only was it simple (and worked!) but it covered a lot of stuff and I was able to get the app I was hoping to write done tonight. Thanks a ton for the time you took to write this!

  14. @rincexwind: I know exactly what you mean. With every release of iOS there comes another steep learning curve which makes it difficult for those of us who are still learning. I’d just finished writing the bones of my game engine (as a universal binary) when they released GameKit. Now creating a rendering surface is really easy compared to how it used to be – but a completely new way of doing things. So I feel your pain! :wink:

  15. i made the demo just as you said but when i press the buttons it gives a sigbart error

    in the main located at the app delegate,

    i chose to do storyboard mode for my app, as I’m a new to programming itself not only iOS, it seemed to tedious for me to add and combine nav controllers and tab controllers.

    but its hard to believe it all connects without coding, is there a difference? and y do some prefer to do it all manually?

  16. @LooN3y: It’s a good question. I suppose the ‘old timer’ programmers prefer to do things in code so they know precisely what they have control over, without having to rely on ‘unseen’ stuff going on in the background. I’ve personally made the move to storyboarding because it seems to be a good way to support interface design on both iPad and iPhone, but without coding your own solution.

  17. @LooN3y: I think you’re getting the SIGABRT error because your Tab1_RedScreenViewController and Tab1_GreenScreenViewController are defined as UITableViewControllers instead of UIViewControllers.

    I made the same mistake. It appears that XCode retains file creation selections between creations.

  18. Simon, This tutorial was a life saver and hair saver cuz i was pullin’ mine out after switching to 4.2!
    I was able to follow u up to the part where you said change the backgrounds to red/green… but cannot find the place to change the color on the view controllers! :oops:
    I clicked on the view controllers from the story board and pressed the attributes inspector but there don’t seem to be any options to change the color… I must be missing something easy here… any help would be greatly appreciated…

  19. @jmlebla1: First off, make sure you’re not zoomed out. If you’re zoomed out and you double click what you think is the view in the controller, it’ll select the controller which doesn’t have the option to change background colour. So make sure you’re zoomed in and just select the view part of the controller. Or alternatively you can select ‘View’ from the controller on the left hand side.

  20. yup that did it! Thanks

  21. 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!

  22. Beginning iOS 5 development: Links to tutorials « A.M. blog - pingback on February 7, 2012 at 8:14 pm
  23. How do I cancel a segue that is connected to an UIButton - pingback on September 24, 2012 at 3:16 pm