UIKit Components — Animated TabBar
Some days ago, I was saw an amazing video of Kavsoft about creating an animated tab bar using SwiftUI (if you don’t know about this youtube channel, i recommend it).
The component developed at this channel it’s very simple, sweet and funny to develop as an exercise into SwiftUI. This post include and explain all the code necessary to create the same component but using UIKit and CoreGraphics.
Before we start
We want to create a TabBar with the following features:
- Configure one or multiple tabs
- Notify item changes
- Select an index with or without animation
- Animation between items to obtain this result:
Let’s Begin!
When I want to develop any component, i’ll try to separate its code in some phases that helps me to increase feature by feature that I want to add. For example, to accomplish this item you could think:
- Draw a white Rectangle with corner radius
- Draw a list of items inside this rectangle
- Include gestures to detect which item is selected
- Draw the Bezier curve that indicates which item is selected
- Move (without animation) the selected item
- Include all animations
Trying to develop in this incremental way will bring you better results than if you try to write all code at same time.
To avoid that this article goes so far, we included all the final implementation and we will try to explain it class by class and method by method. To doing so, we will group the code in the following groups:
- Classes and Models
- BubbleTabBar properties
- Initialization and First Draw
- Public methods
- Animations
Remember that you could find a full example into this github repository.
Classes and Models
All the code is separated into two UIKit classes (BubbleTabBar and TabLayer) and three data models linked with the BubbleTabBar class (Event, TabContent and Tab)
BubbleTabBar Properties
Initialization and First Draw
Nice! We already have our data models and the shell of our UIKit component and its properties, so let’s start with the view configuration and the helper methods.
Select an Item and Animations
The last step of this tutorial is perform the change of the data-models and execute the animations. Before showing the code remember that there are a some animations here that execute separately:
- The animation of the background path (inverse Gauss curve)
- The animation of the selected tab
- The animation of the unselected tab
- The optional animation of the tabs that could be found between the selected and unselected tabs.
All the animations executed here are implemented as CAAnimation.
Yeah! it’s a lot of code for a post so I recommend you go to github and manipulate or so much better … build your own!
Happy coding! 🎉
Some improvements
You could implement some improvements to this code if you want to use it into your projects, for example:
- Include a method `configure` for the Tabbar that receives the static configuration defined inside of it (corner radius, background rectangle color …)
- Include tintColor as a property of the enum TabContent