CODEWITHSUNDEEP
swiftuitabbarcontrolleruistoryboarduitabbar
user3766930
user3766930

Reputation: 5829

Why I cannot make my UITabBarController blurred?

I have a UITabBar and I want to make it blurred. I wrote the following code:

import UIKit

class TabBarController:UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let blur = UIBlurEffect(style: UIBlurEffectStyle.Light)
        let blurView = UIVisualEffectView(effect: blur)
        blurView.frame = self.view.bounds
        blurView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        self.view.layer.insertSublayer(blurView, atIndex: 0)
    }

}

but somehow the last line throws error:

Cannot convert value of type 'UIVisualEffectView' to expected argument type 'CALayer'

how can I fix that?

I changed the last line to:

self.tabBar.addSubview(blurView)

but now the whole tabbar is blurred (even with icons and they are not visible). When I changed this line to:

self.tabBar.sendSubviewToBack(blurView)

then the tabbar is visible, but not blurred. I want to achieve effect from accepted answer from here Black background on transparent UITabBar but here it is uitabbar and I'm using uitabbarcontroller... Can you help me with applying blur in my case?

Upvotes: 8

Views: 9181

Answers (5)

Arthur Stepanov
Arthur Stepanov

Reputation: 579

I have a solution, all you need is configure your UITabBar as following:

// next code will make tabBar fully transparent

tabBar.isTranslucent = true
tabBar.backgroundImage = UIImage()
tabBar.shadowImage = UIImage() // add this if you want remove tabBar separator
tabBar.barTintColor = .clear 
tabBar.backgroundColor = .black // here is your tabBar color
tabBar.layer.backgroundColor = UIColor.clear.cgColor

If you want to add blur, do this:

let blurEffect = UIBlurEffect(style: .regular) // here you can change blur style
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = tabBar.bounds
blurView.autoresizingMask = .flexibleWidth
tabBar.insertSubview(blurView, at: 0)

As a result:

result

Upvotes: 5

janaz
janaz

Reputation: 703

Attach bottom constraint to the bottom of the view instead of Safe Area

It just might not be a problem with your TabBar but with tableView constraints. Tab bar is blurred by default.

Hello!

Upvotes: 2

kabiroberai
kabiroberai

Reputation: 2913

If I understood correctly from the following comment that you posted, you want to change the UITabBar to be black in colour but still blurred.

And yes, I noticed that the UITabBarController is blurred by default, but I would like to make it blurred with specific style (.Dark).

Doing this since iOS 7 has actually become quite easy. Simply change the barStyle of your UITabBar to .black. Put the following code in your UIViewController's viewDidLoad method (note that UITabBar is translucent by default, so you don't need to specify that again).

tabBarController?.tabBar.barStyle = .black

If you want to set it back to the regular, white barStyle, change it back to .default.

tabBarController?.tabBar.barStyle = .default

You may even do this from within Interface Builder by selecting the Tab Bar in your UITabBarController's hierarchy and changing its Style to Black.

Tab Bar Style

Upvotes: 4

ergoon
ergoon

Reputation: 1264

why don't you just use the barTintColor property on your TabBarController?

self.tabBar.translucent = true
self.tabBar.barTintColor = UIColor.blackColor()

You don't even need to subclass UITabBarController. You can call this on any UIViewController.

self.tabBarController?.tabBar.translucent = true
self.tabBarController?.tabBar.barTintColor = UIColor.blackColor()

Upvotes: 4

rmaddy
rmaddy

Reputation: 318774

You just add the blur view as a subview:

self.view.addSubview(blurView)

Since you just want to blue the tab bar and this class is a tab bar controller, you can do:

self.tabBar.addSubview(blueView)

You also need to change the frame:

blurView.frame = self.tabBar.bounds

Upvotes: 6

Related Questions