swiftuitabbarcontrollerblurtabbaruiblureffect

How to make UITabBar blurry, in Swift


I am trying to make UITabBar look blur. I am trying to make something like this in this image But my view now looks like this This is my view for tabbar

I tried this code in UITabbarController -

Code:
class TabBarViewController: UITabBarController { 
    override func viewDidLoad() {
        super.viewDidLoad()
        configureTabbar()
    }
    
    func configureTabbar(){
        
        
        let blurEffect = UIBlurEffect(style: .dark)
        let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)

        let vibrancyView = UIVisualEffectView()
        vibrancyView.frame = tabBar.bounds
        vibrancyView.autoresizingMask = .flexibleWidth
        vibrancyView.effect = vibrancyEffect
        tabBar.insertSubview(vibrancyView, at: 0)
        
        tabBar.isTranslucent = true
        tabBar.backgroundImage = UIImage()
        tabBar.backgroundColor = .clear
        tabBar.barStyle = UIBarStyle.black
        tabBar.barTintColor = UIColor.clear
}

Solution

  • System bars such as UINavigationBar, UITabBar & UIToolbar are translucent by default and you don't need to add anything extra to get that effect.

    You just need to make sure that your view extends it's content under system bars. You can go to storyboard and make sure the Extend Edges - Under Bottom Bars is checked for your UIViewController that you plan to see this effect on.

    enter image description here