Black background on transparent UITabBar

Question

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 vie

Answer 1

the only solution that worked for me was this:

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()

and set: (you can do this in storyboard as well)

UITabBar.appearance().barTintColor = UIColor.clear

but what i have to set in storyboard is:

• tabbar : translucent -> true

Answer 2

imageWithColor was replaced by jotImage

let size = CGSize(width: tabBar.bounds.size.width,
                  height: tabBar.bounds.size.height)
tabBar.backgroundImage = UIImage.jotImage(with: UIColor.clear, size: size)

Answer 3

Make a UITabBar transparent

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

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

This will make the UITabBar 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):

Example

---

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:
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 1x1 clear.png on Swift Recipes.

Answer 4

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
                }
            }
        }
    }
}