How to create floating Tab Bar Swift

user_15028710 0
Viewed 2221

I'm trying to create a Pinterest style Tab Bar. Is it possible to customise UITabBar in that way or do you have to write a separate view to sit on top of everything if so how would you do that? It's basically just moved up with rounded corners and a shadow. How would you adjust the width of the tab bar and move it up?

Image of Tab Bar

pinterest tabbar swift uitabbar
2 Answers

If you want to make "RoundedTabbar" than you can create one like this ->

import UIKit

class RoundedTabBarController: UITabBarController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let layer = CAShapeLayer()
    layer.path = UIBezierPath(roundedRect: CGRect(x: 30, y: tabBar.bounds.minY + 5, width: tabBar.bounds.width - 60, height: tabBar.bounds.height + 10), cornerRadius: (tabBar.frame.width/2)).cgPath
    layer.shadowColor = UIColor.lightGray.cgColor
    layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
    layer.shadowRadius = 25.0
    layer.shadowOpacity = 0.3
    layer.borderWidth = 1.0
    layer.opacity = 1.0
    layer.isHidden = false
    layer.masksToBounds = false
    layer.fillColor = UIColor.white.cgColor
  
    tabBar.layer.insertSublayer(layer, at: 0)

    if let items = tabBar.items { 
        items.forEach { item in 
            item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -15, right: 0) 
        }
    }

    tabBar.itemWidth = 30.0
    tabBar.itemPositioning = .centered
  }
}

Don’t forget to type if you are using storyboard, the class name in the Identity inspector.

PS: I'm sharing Emmanuele Corporente's Medium article content as an answer please check the original article & give it some claps!

user_75120910

I created a floating tab bar library. It doesn't look exactly like Pinterest's but you could probably modify the drawing code to change the way it looks.

Here's the repo.

If you want to implement it from scratch, you'll have to create your own view controller subclass, as well as a UIView subclass for the tab bar, and manage the "page" switching yourself. UITabBarController doesn't offer enough customization for this.

user_7256280
Related