Creating a Tab Bar Application Using Storyboards in Xcode 4.2

As Apple explains it, storyboarding enables you to use Interface Builder to specify not only all the screens in your application, but the transitions between them and the controls used to trigger the transitions. Thus you can lay out every possible path through your application graphically, greatly reducing the amount of code you need to write for a complex multiscreen application.

So, in this tutorial, we’ll be creating a tab bar application that contains two tabs using the Xcode’s wondrous new Storyboard feature. Without further ado, fire up Xcode and create a New Project. Select a Single View Application and give it any name you wish; for this tutorial, I’ll call it StoryboardTabBar and also ensure that ‘Use Storyboard’ and ‘Use Automatic Reference Counting’ are selected and save it somewhere where you can easily find it.

Xcode's New Project Window

Xcode's New Project Window

Right now, you have setup an application that contains one view controller and therefore one view as you also have an project that contains a Storyboard but at this moment, it only displays your single view meaning that we now have to create a new view controller so that we can add another tab; so do this by going to File – New – New File and selecting a UIViewController subclass and giving it a name of ViewController2 with a subclass of UIViewController and ensure that ‘Targeted for iPad’ and ‘With XIB for user interface’ are both unchecked and add it to your project. Now, you have two view controllers however ViewController2 doesn’t actually do anything now so we need to ‘associate’ it with a view.

Creating a New View Controller

Creating a New View Controller

To do this, we need to go ahead and open up MainStoryboard.storyboard in the Project Navigator and it should contain just one simple view controller (ViewController). The beauty of Storyboards is that you can simply select the current view and go to Editor – Embed In – Tab Bar Controller. What this does is it adds the view to a tab bar controller meaning you’ve successfully created a tab bar application however it only contains one tab and we need to create another tab, so to do this we need to open up the Object Library and search for a View Controller and drag that to your scene/canvas.

Embedding a Tab Bar Controller

Embedding a Tab Bar Controller

Adding a Secondary View Controller

Adding a Secondary View Controller

Now, we have another view in our Storyboard however it’s not a subclass of ViewController2 so, to the Identity Inspector to the right of Xcode with the view controller selected and give it a class of ViewController2. So, you’ve successfully given your view a class of ViewController2 but it still doesn’t actually appear within the tab bar.

To add the new view controller to the tab bar, you simply Control + click and drag from the tab bar controller to the new view and they will form a ‘relationship’ and a new tab will appear that will display the view of ViewController2 and then select ‘Relationship – viewControllers’ from the HUD that appears once you release your mouse from the drag and as if by magic, you’ll see a new tab within the tab bar controller! Now, to make sure that each tab corresponds to the correct view, add a Label from the Object Library into each view and insert something unique to that view in each label.

Creating a Relationship

Creating a Relationship

To make sure that everything is working correctly, Run the application in the iOS Simulator (5.0) and you should see that each tab corresponds to the correct view! Sadly, both of the tabs at the bottom look pretty sad and boring so let’s spice them up with icons and a name! Return to Xcode and open the Storyboard back up if it closed.

Two View Controller's Within a Tab Bar Application

Two View Controller's Within a Tab Bar Application

Select the first view and at the bottom there should be a tab bar with just one item in it, double click the ‘Item’ text and you will be able to give it a name so go ahead and name it anything you like and do the same for the second view controller. Now, we can add an icon so you can head over to a website like Glyphish and download some pretty kickin’ icons from there that you’re able to use within your application, for this tutorial, I’m using alternative icons from App Bits – world.png and delivery.png. Add these to your project by going to File – Add Files to “StoryboardTabBar” and add the files to your project. Once the icons are added, double icon the icon within the tab bar of the view controller and then within the Attributes Inspector, select your image from the drop down menu and do the same for the second view and now if you are to run your application, you will see that the tabs have names but also include icons too!

Adding a Tab Icon

Adding a Tab Icon

In this tutorial, you have successful set up a tab bar application and added two views to it, all by using Xcode’s new Storyboard feature. Now, you can use the view controllers to add content to your views as well as customize their behavior. Without Storyboards, this would’ve taken a lot longer to complete and achieve the same outcome – regardless of whether or not you did it using Xcode’s visual interface building tool or by code.

Final Tab One

Final Tab One

iOS, Mac and web developer and designer.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote