Finished custom tab bar

How to create custom tab bar in Swift: part 2

If you want to learn how to create custom tab bar for iOS, you’ve come to the right place!

In the first part of this how to series, we created basic tab bar. It works fine, user can switch between view controllers by tapping on tab bar items. Today we’re going to make it little bit more fancy, by adding various colors and animation.

We’ll start where we left off last tutorial, so open your project from last time, or download this example code, which has been slightly upgraded because of newly released XCode 7.3 and Swift 2.2.

Let’s start with animation of tab bar item selection. Here’s what we want to achieve:

First we need a way to set initial tab bar item. Create this variable in CustomTabBar class:

Next initialize it in our setup() method:

Also we need to set self.selectedIndex in CustomTabBarViewController’s viewDidLoad() method:

To simulate above effect, we’ll create overlay above tab bar items, and then two masks(left and right) with same color as tab bar background. Animation will be done by moving edges of those masks. Add this above createTabBarItems() method:

Here’s what we’re doing in above methods:

  1. Creating array containing colors used as overlay
  2. Creating overlay above each tab bar item and setting it’s color to white
  3. Calculating tab bar item width and multipliers for width of masks during initial state, it depends on which tab bar item is set as initial
  4. Creating overlay masks and setting theirs color

Let’s call those methods in setup() method:

If you run the project, overlay should be above proper tab bar item, however nothing happens when user taps on different one. To fix this, add following class variables:

And initialize them in setup() method:

You can set any tab bar item you want as initial. Also, feel free to play with slideAnimationDuration and slideMaskDelay values.

Now add another method, this will animate tab bar selection:

Here’s what we’re doing in above method:

  1. Again calculating sliding multiplier, as new tab bar item is selected. It’s used as a pointer at which direction the slide animation is going
  2. Determining which side of overlay will be delayed, based on slide animation direction
  3. and 4. Animating left and right masks edges. For left mask we only need to change it’s width – moving it’s right edge. For right mask we are moving also it’s left edge, by changing it’s origin.x

Now call the above method by updating barItemTapped() method:

Run it again. Animation for tab bar item selection should be working now.

Let’s make it even fancier by animating tint color of selected tab bar item’s icon. To be able to change icon’s color, we need to change settings of icon assets. Go to Images.xcassets and set Render As setting for each icon to Template Image:

Now go to CustomTabBarItem class and update setup() method by adding following line:

It’s just an initial setting of color.

If you check createTabBarItems() method in CustomTabBar class, you can see that every time we create new tab bar item, we store it’s reference into array customTabBarItems. This way we can change things like color of tab bar item’s icon from our CustomTabBar class.

We’ve set at which index tab bar item will be initial(i.e. selected). Let’s change its color by adding below line into createTabBarItems():

And for actual animation of tab bar item selection, update animateTabBarSelection() like this:

Go ahead and run project. It should look like this:

8eFfdLezm8

Our custom tab bar is ready!

But there’s a last thing left – transition between view controllers. It would be nice, if it somehow corresponded with tab bar animation.

So, first create new Swift file and name it CustomTabAnimatedTransitioning. Now open it and replace its contents with the following:

I won’t go too much into specifics here. For transitionDuration we are returning same value as we set for slideAnimationDuration, as both animations should match. In animateTransition we’re using UIViewControllerContextTransitioning to get current and newly selected view controllers and then we’re telling how the transition should look like, which is putting them next to each other and moving from right to left in our case. For further info check Apple’s documentation.

Open CustomTabBarViewController, make it conform to UITabBarControllerDelegate protocol and set the delegate to self in viewDidLoad():

Finally, add this method at the end of CustomTabBarViewController:

This way it’ll use our custom transition, instead of a default one.

Build and run. It should look like this:

 

And that’s all folks. You can download the final version of CustomTabBar here.

Bye!