How to create customised tab bar for iOS devices.

Introduction

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.

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.

Project structure

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:

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.

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.

Troubleshooting

Working on this project, I couldn’t solve several problems.

  1. 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.
  2. 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.
  3. Code can be cleaner.

Conclusion

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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Attack Progress Part 2

Adapter [Wrapper] Design Pattern

Swift URLSessionWebSocketTask try

Swift Course: Advanced Operators

Property Wrapper in swift

SwiftUI| ViewBuilder

Load local images asynchronously in the table view

iOS vs Android🤔: Which is The Best Platform for Mobile App Development?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ace Rodstin

Ace Rodstin

More from Medium

Swift — Cocoapods Usage

Every iOS developer should know these Xcode tricks

Create Your Own UIActivityIndicatorView in iOS using Swift

Introduction to Swift UI