iOS Programming Recipe 3: Creating Segues with the Storyboard Part 2

Last time we left off navigation controllers and a simple modal segue were covered. Now I want to go over one more common navigation controller. This time We’ll talk about the TabBarController. The steps here should be pretty familiar from Part 1. If you haven’t already gone to Part 1 you may want to head over there.


  • You Are familiar with Xcode 4.5, if not go here
  • You know how to create a project with a single view controller

The TabBarController

Alright, Let’s get into the meat of this. Start with a new single view controller project titled “TabBarSegue”. Then go ahead and delete the view on the storyboard. This sets us up for a good starting point.

From the object explorer in the bottom right hand pane, drag a new TabBarController on to the storyboard. Two views are already connected to the controller, but we want to show you how to create these connections yourself so go ahead and delete them. You should now just have the single TabBarController on the screen like below.


now go ahead and drag a new view controller onto the screen next to the tabBarController. You see the following:

add new view

Now control click the TabBarController and drag to the view controller. A dialogue will pop up and you will see at the bottom of the dialog an option title “view Controller” under “relationships”. Choose that option.

making connection

selecting relationship

You should now see a segue connection like the following:

one view added

Right Now you pretty much have everything you need to know about segueing to a TabBarController.  If you were to run this right now it wouldn’t do a whole lot though. Let’s go ahead and add a couple more  views to the storyboard scene and connect those as well. The steps are the same as already described.

You should have something that looks like this:

3 views added

Now go Ahead and add a label to each view. Call them “First”, “Second”, and “Third” respectively. Go ahead and run it!

You should have something like this:

Tab bar controller in action

Ok, Now one last thing. Most Apps you see with a TabBarController have little icons. Now We’ll show you how to do that. Find a small .PNG file with a transparent background.  Also Make sure it’s a black and white image for best results. I made a spur looking thing in photoshop that is about 32 x 32 pixels. I also made a 64 x 64 pixel version. This is needed for higher resolution devices. name the first icon 32 pixel icon whatever you want and then name the 64 pixel icon the exact same thing with an @2x on the end. Xcode will automatically pick the @2x.png image when high res devices are used, otherwise the smaller image will be scaled up on high resolution devices. This doesn’t look good. I suggest creating the 64 pixel version first then modify the image size down to 32 pixels and save that.


spur.png and spur@2x.png

Drag the images from the file location into you Xcode project. it will prompt you to copy the files to the project. Go ahead and do it.

now select the tab  bar on one of the views. The Attributes inspector should show the following prompt:

Tab Bar Properites

Select your image from the drop down and give it a title. Run it and you should see your image. My result looked like this:


Again, We didn’t need any code to get this done. In future posts we’ll talk more about transitioning from views without the use of interface builder. Many iOS developers have mixed feelings on the interface builder. Some will use it, others wont. As such, the requirement for a career is usually that you as a developer can do both. The next Recipe I’ll be posting will take these segued relationships and share data between them.


About Joe Hoffman

I am An Electrical Engineer that spends a lot of my off time doing web development and other programming. Currently I am trying to expand my knowledge with iOS and I find that writing tutorials helps me learn more thoroughly as well as provide some useful info to others.

Speak Your Mind


Privacy Policy