Bringing animation to UITabBarController
It’s important to animate the things the user interacts with most to give them a more natural feel. I decided I wanted to add some small animations to the UITabBarController. There are probably some libraries that do this but I decided to write my own implementation.
What you see in the video above is the TabBar’s selectionIndicatorImage, a property of the TabBar to indicate that tab is currently selected. I then drew an image at the bottom of the TabBar. What happens now is that every tab has their own image, and it just shows and hides them depending on the state. This isn’t what I wanted and couldn’t possibly solve the problem I had, since they are all different images.
Lets subclass
The solution to our problem lies in subclassing UITabBarController. I made a class called TabBarController and added a UIImageView to it. I then tried to find a way to move this image to the right position whenever a tab was selected. Thanks to the delegate functions UITabBarController provides, this was a piece of cake.
Let’s break this down. We create an empty indicatorImage variable. This will be the line that we move around. We initialise it in the viewDidLoad method. For that we use the createSelectionIndicator function that takes a color, a size (the width we want our bar to be, and the heigh of the TabBar itself) and a lineheight. The function draws this into an image an returns it, and we then add that to the TabBar.
We can now move the image that we created around! I use the didSelect item delegate method to check for touches and I use some boilerplate to check for the location the image needs to move to. Wrapping this all in an UIView.animate block gives us a smooth animation between the two points.
When you’re done implementing all that, you can hook it up to Interface Builder by setting the custom class to your TabBarController.
I had to tinker with a few of the options in the Attributes inspector. For me, these settings did the job for all different devices. If it doesn’t work for you, try to fiddle with the Item Positioning and the Content Mode attributes.
The result
After walking through all these steps you’ve created an animated selectionIndicatorImage for the UITabBarController. This is simply a proof of concept to show how it can be done, and if you write a better implementation make sure to send it to me!
If you liked this article, check out the other articles I wrote! If you’d like to get in touch, you can follow me on Twitter or shoot me a message on LinkedIn. Also, if you need any help with anything iOS Programming related, you can join this Discord server created for exactly that purpose :)
