Why I cannot make my UITabBarController blurred?

Question

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?

@kabiroberai I have a `UITabBarController` that contains 3 views, each of them is embedded in navigation controller, so this part of my story board looks like this: http://i.imgur.com/pfIpRMY.png — user3766930, Oct 11 '16 at 14:27
@user3766930 and what content would you like to blur behind the `UITabBarController`? Could you send a picture of a specific view controller with content? — kabiroberai, Oct 11 '16 at 14:44
@user3766930 also, if you have content behind a `UITabBarController` it is usually blurred by default. I don't exactly understand what you're trying to achieve. — kabiroberai, Oct 11 '16 at 14:45
@kabiroberai each navigation controller contains a `UIViewController`, e.g. the first one contains a `MapView` stretched to each border of the controller. So in case of first `UIViewController` I would like to blur the map that is behind the tabbar... And yes, I noticed that the `UITabBarController` is blurred by default, but I would like to make it blurred with specific style (`.Dark`). — user3766930, Oct 12 '16 at 08:33
@user3766930 you should accept the answer that works for you, or update the question with your current issue. — kabiroberai, Oct 16 '16 at 16:11

rmaddy · Answer 1 · 2016-10-06T17:58:47.290

6

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

edited Oct 06 '16 at 17:58

answered Oct 06 '16 at 17:44

rmaddy

314,917
42
532
579

1

Thanks, I tried the first line and it works, one more question though - what do you mean by `send to the back`? – user3766930 Oct 06 '16 at 17:46
3

The call to `addSubView` will put the added subview on top of any and all existing subviews. If you actually needed to put the added subview behind all of the existing subviews, then you need to send it to the back. But it seems you don't need that here. – rmaddy Oct 06 '16 at 17:48
Hmm you know what, actually when I added the first line: `self.view.addSubview(blurView)` and run the project - not only the tabbar is blurred but... everything is blurred (the whole view, from top to bottom of the screen). How can I blur only the lower bar? – user3766930 Oct 06 '16 at 17:49
on the other hand - I tried `self.view.sendSubview(toBack: blurView)` and it is causing error `value of type UIView has no member sendSubview` :| – user3766930 Oct 06 '16 at 17:50
1

You would need to add the blur view to the tab bar, not `self.view`. – rmaddy Oct 06 '16 at 17:52
hm ok, that makes sense... could you just tell me how to do it? :) I tried with simple `self.addSubView...` but it raises an error – user3766930 Oct 06 '16 at 17:55
Hey man, sorry for longer discussion here... So I tried this `self.tabBar.addSubview(blurView)` and then the tabbar is blurred (yay!), but... all the components on it are no longer visible (or maybe they're blurred as well - I just don't see them since I'm using blur `.Dark`). I tried to do `self.tabBar.sendSubviewToBack(blurView)` but if I use it - then the tabbar is not blurred at all... Do you have any ideas what might be wrong here? – user3766930 Oct 06 '16 at 18:05
2

The whole tab bar will be blurred. If that's too much then you need to find some other way to get the effect you want. – rmaddy Oct 06 '16 at 18:07
hm I am looking for a way that the background is blurred, but the components on it (tabbar items) are visible... I don't know yet how to do it, but thank you for your suggestions here! – user3766930 Oct 06 '16 at 18:08
Basically I want to achieve this effect: http://stackoverflow.com/questions/33819852/black-background-on-transparent-uitabbar but I don't know how to use it in my case since I have in my storyboard `UITabBarController` instead of `UITabBar` – user3766930 Oct 06 '16 at 18:39

kabiroberai · Answer 2 · 2016-10-16T16:13:30.900

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.

score 4 · Answer 3 · answered Oct 12 '16 at 19:15

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()

score 3 · Answer 4 · answered Sep 10 '19 at 16:57

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: .dark) // 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:

score 1 · Answer 5 · answered Mar 21 '21 at 15:54

1

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.

answered Mar 21 '21 at 15:54

janaz

673
5
12

Why I cannot make my UITabBarController blurred?

5 Answers5

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