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

Download the tutorial images here… Storyboard tutorial icons

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 clickPreview. 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 it’s 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 it’s 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 it’s 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)