TabBar with raised middle button — Swift

Tab Bars are an essential component of iOS app design because they provide easy navigation and enhance the look and feel of your iOS app.

However after a while they look all the same and you find yourself tired of their look:). So let’s create a new custom tabBar with a raised middle button.

Storyboard setup:

1. Add a TabBarController and remove it’s reference to the view controllers provided with it (we are going to connect them in code).
2. Embed those two view controllers into UINavigationController.
3. Add another view controller to use it as our view controller for the raised middle button.
4. Set TabBarController as your initial view controller.

Setup custom classes:

1. Create a custom class named CustomTabBarController (name it whatever you want) and make it a subclass of UITabBarController.
2. Create another custom class name it CustomTabBar and make it a subclass of UITabBar.
3. Create 3 UIViewController subclasses for the three view controllers created in the storyboard.

CustomTabBar.swift

In this class I’ve created a custom button with corner radius, background & … .
After modifying its layout add it to the tabBar as a subview. Center the button by overriding layoutSubviews() so it stays at the middle of the tabBar.
Create an action for it using addTarget() method and call didTapButton inside the action function.

Override hitTest:withEvent: method to be able to handle tap events on the button because the button is raised a little beyond the bounds of the tabBar view and by default touch events won’t be caught on views outside of the bounds of it’s superview.

Pro tip:

By adding the middle button as TabBars subview, it would automatically handle Hide Bottom Bar on Push and status bar changes (such as Background recording, Background location usage and In-Call status bar).

Let’s implement the TabBarController class.

CustomTabBarController.swift

Here in viewDidLoad() we setup the tabBarItems and their associated view controllers.

By implementing

tabBar.didTapButton = { 
[unowned self] in self.routeToCreateNewAd() 
}

we are able to handle the taps inside our middle button and show an associated view controller.

Finally implement UITabBarControllerDelegate to cancel the touches on your second tabBar item because there is a raised middle button!

You can download the full project on Github!