image scaling for UITabBar background image

Question

I've created UITabBarController in my application.

Then in viewDidLoad() I want to change UITabBar background image. Here is the code I'm trying to make it works:

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        UITabBar.appearance().translucent = false
        UITabBar.appearance().backgroundColor = UIColor.clearColor()
        UITabBar.appearance().backgroundImage = UIImage(named: "tabbar_background")
        UITabBar.appearance().contentMode = .ScaleAspectFit
    }
}

But the result isn't correct ( image ). Can someone help me to make it fill the entire tabbar frame?

Answer 1

Try resizing the image to the tab bar size. Or Add an imageView to the tabBar as subview , and then use the image in that imageView .

Subclass the TabBarController and add imageview there:

var bgView: UIImageView = UIImageView(image: UIImage(named: "tabBarBackground.png"))
bgView.frame = CGRectMake(0, 420, 320, 60)//you might need to modify this frame to your tabbar frame
self.view.addSubview(bgView)

Answer 2

Here is code for a custom translucent tab bar image with custom icons. You will need to refer directly to the tab bar via a variable.

Swift 3

private func setupTabBar() {
    print ("Setting up the Tab Bar and Items")

    tabBarView.clipsToBounds = true
    tabBarView.backgroundImage = UIImage()

    let bgView: UIImageView = UIImageView(image: #imageLiteral(resourceName: "TabBarBackground"))
    bgView.frame = tabBarView.bounds
    tabBarView.addSubview(bgView)

    tabBarView.tintColor = UIColor.white
    UITabBar.appearance().tintColor = UIColor.gray
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.white], for: .normal)
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.gray], for: .selected)

    tabBarLimitsItemView.image      = #imageLiteral(resourceName: "TabIconLimits").withRenderingMode(UIImageRenderingMode.alwaysOriginal)
    tabBarControlsItemView.image    = #imageLiteral(resourceName: "TabIconControls").withRenderingMode(UIImageRenderingMode.alwaysOriginal)
    tabBarPayRulesItemView.image    = #imageLiteral(resourceName: "TabIconPayRules").withRenderingMode(UIImageRenderingMode.alwaysOriginal)
    tabBarSettingsItemView.image    = #imageLiteral(resourceName: "TabIconSettings").withRenderingMode(UIImageRenderingMode.alwaysOriginal)
}

Answer 3

This works for me in swift 3

class MyTabBarController: UITabBarController, UINavigationControllerDelegate {

override func viewDidLoad() {
    super.viewDidLoad()

    let backgroundImage = UIImageView(image: UIImage(named: "gray background"))
    backgroundImage.frame = backgroundImage.bounds
    self.view.addSubview(backgroundImage)


}

Answer 4

I solved this problem using clipsToBounds.
Here are my example:

let tabBar = self.tabBar
tabBar.backgroundImage = UIImage()
tabBar.clipsToBounds = true

This work perfectly on iPhone X