How to create customised tab bar for iOS devices.
Sometimes need to provide a nice user experience within your app. Of course, this goal is achieved by implementing tone decisions. And one of them could be the creation of a custom tab bar for easy navigation around the application. Reading this post you’ll learn how to create a tab bar with unusual shape.
Creating the project
As for me, I prefer fully programmatically created projects. Therefore in this article you won’t find a trace from the storyboard. But be careful, with the Xcode 11, the logic for creating projects without storyboards has changed.
Main application window programmatically in Xcode 11
iOS 13 application without Main.Storyboard
Basically all we need is MainViewController (which is a UITabBarController) and pair of view controllers that are the different tabs in the tab bar. For clarity, I’ve used the MVC design pattern and divided the project into several parts: models, views, controllers.
Customising tab bar
It’s pretty cool user experience when you’re see a tab bar with unusual shape. It can be tab bars with trough:
Draw a Custom iOS TabBar shape
After reading an article how to create a custom Android Bottom-Bar shape I asked myself how to archive the same on iOS…
As my challenge I wanted to create a tab bar with little bump. It all started with the implementation UITabBarController. Nothing complicated. You, as usual, create a new class that is an inheritor of UITabBarController.
However in order for draw a custom shape, you will need to work with layers. I find it better to encapsulate working with layers in a single class TabBarCustomizator.
We create an instance of TabBarCustomizator and pass to it a UITabBar (not UITabBarController), then call method customize(). Method customize() firstly draws a shape layer (CAShapeLayer) and secondly adds a neat red button to centre. The drawing logic itself is implemented using UIBezierPath. Shortly. You need to start from top left corner, then move to begin of bump. Make a bump by adding two curves (you set the end point of curve — to: , and two tangents — controlPoint1: , controlPoint2: ). Developer documentation nicely describes how to make a cubic curve.
Then we just dot the edges of the tab bar.
To decorate the tab bar I create a red button using single UIViews for red circle with shadow and icon in the centre.
Then added some sweet smooth animations.
Working on this project, I couldn’t solve several problems.
- For changing the status’s bar color I’ve directly used UIApplicatioin singleton instance. But this approach is marked as deprecated. Furthermore this way changes of status bar color not animatable.
- As you can see, by clicking to button changes application appearance. It’s awesome, but when system elements change color, they remain blurry, unklie my solution.
- Code can be cleaner.
As for me, it was a nice challenge, that required knowledge of UIKit. I would be very grateful if you would suggest how to create blurry shape layers. And once again, let me wish you a nice day. That’s it.