Black background on transparent UITabBar

I am trying to make a blurred background the UITabBar for my UITabViewController, and the idea is to have it be blurred and transparent so that the views underneath can be seen scrolling by.

Unfortunately I cannot for the life of me get the tab bar to be transparent. No matter what I do, there is always some black background to the tab bar that prevents the underlying view controllers from showing through.

  • To change the color of unselected UITabBar icon in iOS 7?
  • UISegmentedcontrol to switch views in UITabbarcontroller
  • How to access ObjectAtIndex in tabBarController with Swift?
  • iOS : How to add Underline in UITabBarItem
  • How to adjust tab bar badge position?
  • setSelectedImageTintColor not working in iOS 7
  • If I change the alpha of the UITabBar to something low I can see that the tableview is indeed behind it, however you can see that the UITabBar has some sort of background to it that is preventing the tableview from fully showing through (and I don’t want to bar button items to be invisible, just the tab bar background).

    alpha 0.3 tab bar

    How can this be?

    In the custom tab bar’s view did load I have:

    self.tabBar.translucent = true
    self.tabBar.alpha = 0.3
    self.tabBar.backgroundColor = UIColor.clearColor().colorWithAlphaComponent(0.0)
    self.tabBar.layer.backgroundColor = UIColor.clearColor().colorWithAlphaComponent(0.0).CGColor
    self.tabBar.backgroundImage = nil
    self.tabBar.shadowImage = nil
    

    and in the AppDelegate I have:

    UITabBar.appearance().barTintColor = UIColor.clearColor()
    UITabBar.appearance().tintColor = kColorAccent
    UITabBar.appearance().translucent = true
    UITabBar.appearance().translucent = true
    UITabBar.appearance().backgroundColor = UIColor.clearColor()
    UITabBar.appearance().backgroundImage = nil
    UITabBar.appearance().layer.backgroundColor = UIColor.clearColor().CGColor
    UITabBar.appearance().shadowImage = nil
    

    …yeah It’s excessive but I want to try everything.

    Any ideas on what to do?

    2 Solutions Collect From Internet About “Black background on transparent UITabBar”

    Make a UITabBar transparent

    Assign a clear image to its backgroundImage. You can use a 1×1 clear.png, or create one programmatically:

    self.backgroundImage = UIImage.imageWithColor(UIColor.clearColor())
    

    This will make the UITabBar transparent:

    Transparent

    Add a blur effect

    Insert a UIVisualEffectView as the rearmost subview.

    let frost = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
    frost.frame = self.bounds
    self.insertSubview(frost, atIndex: 0)
    

    This will insert a UIBlurEffect (frost):

    Frost

    Example

    Frosty toolbar


    1. Set the Custom Class for the UITabBar of the Tab Bar Controller to FrostyTabBar.
    2. You have a few options to supply a clearColor image. You can create a clear.png image with an alpha of 0. A programmatic elegant solution is described here.
    3. If using a clear.png, assign it to the Background Image in the Attribute Inspector:
      enter image description here
    4. In Interface Builder, pick Style: Default & Translucent.
    5. Once you take control of the background blur with a UIVisualEffectView, you can in turn supply any UIVisualEffect you so desire.

    The entire FrostyTabBar class looks like this:

    import UIKit
    
    class FrostyTabBar: UITabBar {
        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
            let frost = UIVisualEffectView(effect: UIBlurEffect(style: .light))
            frost.frame = bounds
            frost.autoresizingMask = .flexibleWidth
            insertSubview(frost, at: 0)
        }
    }
    

    ► Find this solution on GitHub and additional details including a 1×1 clear.png on Swift Recipes.

    I found a prefect solution, you only need to subclass UITabBar and then do the following actions to clean that annoying views

    class MainTabBar: UITabBar {
        var cleanDone = false
    
        override func layoutSubviews() {
            super.layoutSubviews()
            self.deleteUnusedViews()
        }
    
        func deleteUnusedViews() {
            if !self.cleanDone {
                var removeCount = 0
                for (_, eachView) in (self.subviews.enumerate()) {
                    if NSStringFromClass(eachView.classForCoder).rangeOfString("_UITabBarBackgroundView") != nil {
                        eachView.removeFromSuperview()
                        removeCount += 1
                    }
                    if NSStringFromClass(eachView.classForCoder).rangeOfString("UIImageView") != nil {
                        eachView.removeFromSuperview()
                        removeCount += 1
                    }
                    if removeCount == 2 {
                        self.cleanDone = true
                        break
                    }
                }
            }
        }
    }