iOS TUTORIAL: Creating a custom tabbar using Storyboard in Xcode

Custom tabbar

Custom tabbar is a quite common task for an iOS developer. It’s normal –  the look and feel of the standard tabbar in iOS 7+ is quite good, but it doesn’t suite always into the app’s design.

Customising tabbar nowadays is much easier than it was before, Apple provides multiple simple ways to change the design of the tabbar: changing the background image, icons, tint color or text attributes provide hundreds of way to create a unique tabbar.

However, sometimes it is not enough. For example, creating a vertical tabbar cannot be achieved by using standard means. One possible way to create a custom tabbar is to subclass UITabBarController, hide the default tabbar and show your custom one. Although it may be tricky and not what Apple recommends, such a solution works pretty well. Nevertheless, there is a much more convenient and elegant solution – by using Storyboard, UIStoryboardSegue and subclassing UIViewController. Let’s try to implement this solution!

The demo app

We are going to build a simple app with two dummy controllers and a vertical tabbar to navigate between them. 

So, instead of using the default tabbar:

custom tabbar

We’ll create something more elegant:

custom tabbar

Complete code

You can find the complete code here (tested with Xcode 6):

Getting started

Open Xcode and Create a new project by choosing the Tabbed Application template. Choose whether Swift or Objective-C on the screen. This tutorial covers both Swift and Objective-C. The Tabbed Application template will create two dummy viewcontrollers to use in tests, so we won’t need to create them by ourselves.

Subclassing UIViewController

To create a custom class that will behave like UITabBarController, subclass UIViewController. Add a reference to a currently selected view controller, a placeholder view that will contain the controller’s view and an array of tabbar buttons.

Objective-C:

Swift:

Selecting viewcontrollers will happen by performing a custom segue. In this particular example there’ll be two segues: FirstVcIdentifier and  SecondVcIdentifier. The magic of replacing viewcontrollers will happen in the custom segue and will be described later.

In the viewDidLoad method, the first controller will be preselected by performing the segue “FirstVcIdentifier”:

Objective-C:

Swift:

In order to highlight the correct button, the prepareForSegue:sender method will be overridden.

Objective-C:

Swift:

Subclassing UIStoryboardSegue

Swapping the viewcontrollers will happen when the custom segue is performed. The segue will be defined later in Storyboard. Therefore, we’ll subclass a UIStoryboardSegue and override the perform method.

Objective-C:

Swift:

The perform method swaps and setups viewcontrollers:

– 1: All currently added subviews are removed from the container view.

– 2: The new view is added to the container view.

– 3: Autolayout constraints are added, so that the new view will match the container view.

– 4: The view controller is notified that it was added to the container view.

Storyboard setup

The only thing remaining is to setup all viewcontrollers and segues in the Storyboard.

The custom tabbarcontroller should be the entry view controller and have some buttons that will navigate to other controllers and therefore represent the custom tabbar. In this demo app there will be only two buttons that navigate to the first and the second controller. In the middle there will be a placeholder view. Make sure to connect placeholderView and tabbar buttons to corresponding IBOutlets.

custom tabbar

Screen Shot 2014-09-29 at 22.33.22

Screen Shot 2014-09-29 at 22.33.29

 

After that add a triggered segue for each tabbar button. To do it, select a button and drag its action to the corresponding viewcontroller. It will show a list of possible segue types.

Screen Shot 2014-09-29 at 22.58.39

Select the “custom” type – it should be the last option in the list. It will open another menu that should contain all available segue subclasses in the project. In this demo app there’s only one segue subclass that was written before to swap the viewcontrollers. Select it.

Screen Shot 2014-09-29 at 22.36.22

Now select the new segue from the TabBarController Scene.

Screen Shot 2014-09-29 at 22.38.37

Go to the Attributes Inspector and give the segue an identifier of your choice. The same identifier should be used in the UIViewController subclass. Make sure that the segue has a correct class.

Screen Shot 2014-09-29 at 22.39.04

 

Perform same actions with other button by connecting them to the corresponding viewcontroller and giving the selected identifier.

Testing the result

Now it’s time to launch the project and test our custom tabbar. The first viewcontroller is selected automatically as well as the first tabbar button:

custom tabbar

By tapping on the second tabbar button, the corresponding controller is selected and the button is highlighted:

custom tabbar

Our custom tabbar is working! I think it’s a nice solution, because most of the work is done in the storyboard. Custom segues are reused across the tabbar buttons. The custom tabbarcontroller class is also quite minimalistic and only selects/deselects tabbar buttons.

Complete code

You can find the complete code here (tested with Xcode 6):

22 Comments
  1. Frank Schaefer
    • iOSDev MM Creative
  2. Zoyt
    • Zoyt
  3. Marco Almeida
    • iOSDev iOSDev
  4. Nika
  5. Nikia
    • Hi
  6. Colten Janssen
    • Hi
  7. Alexander
    • Hi
  8. Stephen
  9. Nisar Ahmad
  10. Tim
  11. Ammo
  12. Ted Hogan
  13. Chinua
  14. Tyler Thomas

Leave a Reply

Your email address will not be published. Required fields are marked *


*