Getting an almost transparent background for UITabBar

Its simple. Change the background of the UITabBar and make it a little transparent so that you see the underlying view.

It seemed like really straighforward. I created one semi-transparent png image for the tab bar and set its backgroundImage property. But yay, it didn’t work as intended, the image wasn’t transparent anymore. Setting the barTintColor, backgroundColor, tintColor xxxxColor, backgroundImage etc etc didn’t work for me in the iOS 8, swift 2, XCode 7. I always ended up getting a black background behind my image due to which the background transparency wasn’t just happening.

It was time to bring up Reveal and see what was happening. If you don’t know Reveal or haven’t got your hands on it yet, then PLEASE go ahead and try it out. Its going to save you hours of UI debugging on iOS. Anyways, so I opened up reveal to see what was happening. And I saw this!

For some weird reason, UITabBar added two extra views (_UITabBarBackgroundView and UIImageView) along with the five TabBar buttons. It was this _UITabBarBackgroundView which was causing problems for me. Its backgroundColor was set as black by default. This view is probably not exposed via any UITabBar api, to keep it private may be. Whatever the case may be, I now found the problem and had to fix it. I knew this piece of code will fix it

for view in subviews{
    view.backgroundColor = UIColor.clearColor()
}

Where do I put it now?? It turned out that UITabBar adds these two extra views after awakesFromNib is called for any custom UITabBar. So the best to stick this code was under layoutSubviews(). Here is how it looks like:

override func layoutSubviews() { 
    super.layoutSubviews() 
    for view in subviews{ 
        view.backgroundColor = UIColor.clearColor()
    } 
}

And done! I now have a custom UITabBar with a semi-transparent background image.

Happy Hacking!