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.
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.
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.
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.
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.
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!
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.
iOS, Mac and web developer and designer.