iOS Custom Tab Bar

Question

I am looking to implement a custom Tab Bar in iOS where selected item is bigger size than the rest of the tabs and peeks out over the content similar to this screenshot.

Could someone point to a tutorial of how to accomplish this preferably in Swift?

Answer 1

I faced with this task several times. I found a lot of tutorials but I've never found one that gives the ability to create a center button that part of it is out of the tab bar.

At the end, I created an approach to have it done correctly. I implemented a simple example project with instructions how to do that. Please check my Custom Tabbar Center Button repo as an example.

One more benefit of it it's center button hides correctly with the tab bar when you use Hide Button Bar on Push property.

Answer 2

A UITabBar contains an array of UITabBarItems, which inherit from UIBarItem. But unlike UIBarButtonItem that also inherits from UIBarItem, there is no API to create a UITabBarItem with a customView.

So instead of trying to create a custom UITabBarItem, we’ll just create a regular one and then put the custom UIButton on top of the UITabBar

Not swift, but should be easily translated.

https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar

This one is Swift: https://github.com/itsKaynine/SwiftRaisedTab

Source code for a similar question, using Swift 3: https://stackoverflow.com/a/36016377/300897