Set background color of active tab bar item in Swift Set background color of active tab bar item in Swift ios ios

Set background color of active tab bar item in Swift


I took a similar approach to @matcartmill but without the need for a special image. This solution is just based on your color.

// set red as selected background colorlet numberOfItems = CGFloat(tabBar.items!.count)let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.red, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)// remove default bordertabBar.frame.size.width = self.view.frame.width + 4tabBar.frame.origin.x = -2

I'm making use of the following extension of UIImage:

extension UIImage {    class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {        let rect: CGRect = CGRectMake(0, 0, size.width, size.height)        UIGraphicsBeginImageContextWithOptions(size, false, 0)        color.setFill()        UIRectFill(rect)        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()        UIGraphicsEndImageContext()        return image    }}

I hope this helps!

for swift 4

extension UIImage {   class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {    let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)    UIGraphicsBeginImageContextWithOptions(size, false, 0)    color.setFill()    UIRectFill(rect)    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!    UIGraphicsEndImageContext()    return image   }}


Update to SWIFT 3:

let numberOfItems = CGFloat((tabBarController?.tabBar.items!.count)!)let tabBarItemSize = CGSize(width: (tabBarController?.tabBar.frame.width)! / numberOfItems,                            height: (tabBarController?.tabBar.frame.height)!)tabBarController?.tabBar.selectionIndicatorImage    = UIImage.imageWithColor(color: UIColor.black,                             size: tabBarItemSize).resizableImage(withCapInsets: .zero)tabBarController?.tabBar.frame.size.width = self.view.frame.width + 4tabBarController?.tabBar.frame.origin.x = -2extension UIImage{    class func imageWithColor(color: UIColor, size: CGSize) -> UIImage    {        let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)        UIGraphicsBeginImageContextWithOptions(size, false, 0)        color.setFill()        UIRectFill(rect)        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!        UIGraphicsEndImageContext()        return image    }}


So here's what I ended up doing. It's a mix of using a 640x49 PNG that's the color of the blue "highlighted" background I need.

In AppDelegate.swift:

var selectedBG = UIImage(named:"tab-selected-full")?.resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))UITabBar.appearance().selectionIndicatorImage = selectedBG

And then in the first View Controller that gets loaded, I have:

tabBarController?.tabBar.frame.size.width = self.view.frame.width+4tabBarController?.tabBar.frame.origin.x = -2

The reason for the above two lines is that, by default, Apple has a 2px border between the left and right sides of the tab bar and the tab bar items.

In the above I simply make the tab bar 4px wider, and then offset it so the border on the left falls just outside of the view, thus the border on the right will also fall outside of the view.