Do you feel like standard elements aren’t enough for you? Then this article might be real handy for you! Read on!
What motivated us to create LUNTabBarController?
It’s no big secret that every year smartphone screen sizes get bigger and bigger. This makes tab bars the best solution for navigating, as opposed to regular menus.
However, a problem arises: there are often too many menu items, so not all of them can fit into a tab bar. Therefore the “leftovers” need to be transferred to the “Other” tab. Usually this tab is created as a new screen, just like content screens.
That idea didn’t seem right to us. It just felt wrong for us to separate items of one menu. It kind of destroys the idea of a menu unity. I bet iPhone and iPad users would agree on that one with us.
That’s how we came up with the idea of extending a tab bar, which allows convenient access to the other menu items without visual switching to another screen.
Our team wanted to create our own custom interactive tab bar controller. So we gathered our ideas and put them into action.
Next paragraph describes how to develop a tab bar with animation and bring the best user experience. Interested? Read on!
Read also:
How did we create it?
Since we couldn’t find any custom tab bar that would meet our needs, our team got all excited and we started working on our own. Let us give you a step-by-step guide from our developers on how to create the tab bar animation.
Step 1
First thing we created was a custom animation controller LUNTabBarAnimationController, which implements the UIViewControllerAnimatedTransitioning protocol.
We also needed for it to support interactive transitions. That’s why LUNTabBarAnimationController is inherited from UIPercentDrivenInteractiveTransition. This inheritance simplifies the whole thing significantly.
The main method that needed to be implemented has the following signature:
This method implements our animation
Step 2
Next thing we needed to make our LUNTabBarAnimationController work when switching tabs in a tab bar. For this purpose we created LUNTabBarController, that inherits from UITabBarController.
LUNTabBarController is its own delegate and implements the following methods:
both of which return an instance of our LUNTabBarAnimationController, if required.
Finally, the LUNTabBarController was supplemented with a method, that allows closing a selected tab. It simply allows us create a button to close the tab.
Step 3
The last step to develop our interactive tab control was creating a system that would notify a pop-up view controller of a transition beginning or finishing. Besides, we made it possible for an additional animation to launch inside the view controller.
Usually we would go with the transitionCoordinator and its method
However, in case of our custom tab bar controller transition iOS SDK sets transitionCoordinator to nil. That’s why we created the LUNTabBarFloatingControllerAnimatedTransitioning protocol with all the required methods.
The protocol was implemented in a pop-up view controller, just in case.
An example of such a “case” would be, say, the following close button animation:
Why use LUNTabBarController?
First of all, standard elements don’t give too much of a choice. Almost no decent app is built by only using standard components. Cool developers usually design custom ones.
Good thing about our tab bar controller with animation is that it gives the feeling of the menu items unity.
Thanks to the concept we developed a user gets that the “Other” tab encloses indeed other menu items – the ones, that are related to the app navigation. It comes naturally.
Except for menu items the “Other” tab can hold user account item and whatever items you feel like putting there.
To sum it up, bigger device screen sizes are a common place nowadays. This turn animated tab bar for mobile apps into a necessity.
Read also:
How can you use LUNTabBarController?
To make use of this project just change the class of your application tab bar controller to LUNTabBarController and set the following properties in the interface builder:
Specifies which tab should use animated transition.
Specifies floating tab’s content height.
Specifies duration in seconds of the animated transition.
Specifies scale multiplier to be applied to the background view.
Specifies alpha multiplier to be applied to the background view.
Conclusion
In this article we showed how to create animations for a tab bar by featuring upsides of our LUNTabBarController solution.
But don’t take our word for it. Go ahead and try it for yourself!
If you want to get smart custom design for your app, feel free to contact us.