Finished custom tab bar

How to create custom tab bar in Swift: part 1

In previous post I shared my first library, which is custom tab bar. Today I’m gonna show you how you can create custom tab bar yourself.

You can start by downloading base project – CustomTabBar.zip. If you open it in XCode and run on simulator, you can see default UITabBar with 3 view controllers.

Default tab bar

Go to CustomTabBarViewController and add this viewDidLoad():

If you run it again, tab bar will be hidden(shocking, I know). So let’s make our new tab bar, by creating new file – CustomTabBar.swift and implementing like this:

It’s a subclass of UIView with basic initialization methods. Go ahead and set view’s background color to whatever you like. Then go back to CustomTabBarViewController.swift, and add this to viewDidLoad():

Run the project, you should see the new tab bar with your color now. We have initialized it with default tab bar’s frame, but you can use a different dimensions as well as positioning.

Now we need tab bar items from default tab bar(which are set in storyboard), let’s get them by creating a protocol as our a datasource. If you have been working with tableview in iOS before, you’ve been using it as well.

Add this below import UIKit:

And create this class variable:

Now back to CustomTabBarViewController.swift and make it adopt our new protocol like this:

Xcode should give you error after this. That’s because our view controller conforms to protocol but is not implementing it’s function(s). So let’s fix it by adding this:

Also add this to viewDidLoad():

Now whenever we need to get tab bar items, we can just call this in our custom tab bar:

Add another class variable to CustomTabBar:

We will need containers for our custom tab bar items, so let’s create some new functions:

This creates containers(in our case 3) aligned from left to right with equal widths. Now we can place custom tab bar items into them. But first let’s create new class CustomTabBarItem:

Again it’s a UIView subclass with initializers and setup method, which makes sure that tab bar item in storyboard has assigned image, and uses it for image view.

Switch back to CustomTabBarViewController and add following line to viewDidLoad(), so setup() function actually gets called:

Go to CustomTabBar and add new class variables:

Edit setup()  function so it looks like this:

We don’t have createTabBarItems() function yet, so let’s fix it:

This creates  our CustomTabBarItem for every default one in storyboard. You can run the project, you should see our tab bar with tab bar items:

But if you tap on any tab bar item, nothing happens. We need buttons for that, edit createTabBarItems() function like this:

We added button to each tab bar item, with same dimensions. Let’s handle tapping on them. We need to somehow tell CustomTabBarViewController to switch between view controllers. We will use delegate for that, which you might again know from table views. Put this below CustomTabBarDataSource:

Add new class variable:

Go to CustomTabBarViewController, make it adopt new protocol:

Set it in viewDidLoad() same way like datasource:

And implement it’s function:

Switch back again to CustomTabBar and implement target for tab bar item buttons:

This way every time user taps on tab bar item, it tells CustomTabBarViewController to switch to proper view  controller. Go ahead and try it.

That’s it for today, here’s the finished project – CustomTabBar_part1_finished.zip and we’ll continue further in next part.

See ya!