How to create floating Tab Bar Swift

Question

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

Answer 1

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!