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

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.