matcartmill matcartmill - 19 days ago 5
iOS Question

Set background color of active tab bar item in Swift

I'm hoping to accomplish this without the use of images, if at all possible. Is there a way to create the effect shown in the image programmatically without have to render each tab out as an image?

Every question I've reviewed on SO has the tabs saved as JPGs, which is more work than I feel it should be.

Any ideas?Tab Bar

Answer

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 color
let numberOfItems = CGFloat(tabBar.items!.count)
let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
tabBar.selectionIndicatorImage = UIImage.imageWithColor(UIColor.redColor(), size: tabBarItemSize).resizableImageWithCapInsets(UIEdgeInsetsZero)

// remove default border
tabBar.frame.size.width = self.view.frame.width + 4
tabBar.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!