Default tab bar item colors using swift Xcode 6

Question

Environment: - Xcode 6 beta 4 - Swift language - iOS Tabbed Application (default xCode project)

How can I change the default grey color of the tabs to something else? (Preferably globally)

As far as my research goes I need to somehow change the image rendering mode for each tab to Original rendering mode however I don't know how

Answer 1

Each (default) tab bar item consists of text and icon. It is pretty easy to change the text colors globally by specifying the appearance:

// you can add this code to you AppDelegate application:didFinishLaunchingWithOptions: 
// or add it to viewDidLoad method of your TabBarController class
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.magentaColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)

With images situation is a little bit more complicated. You cannot define their appearance globally. You should redefine them in your TabBarController class. Add code bellow to viewDidLoad method of your TabBarController class:

for item in self.tabBar.items as [UITabBarItem] {
    if let image = item.image {
        item.image = image.imageWithColor(UIColor.yellowColor()).imageWithRenderingMode(.AlwaysOriginal)
    }
}

As we know there is no imageWithColor(...) method in UIImage class. So here is the extension implementation:

// Add anywhere in your app
extension UIImage {
    func imageWithColor(tintColor: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)

        let context = UIGraphicsGetCurrentContext() as CGContextRef
        CGContextTranslateCTM(context, 0, self.size.height)
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, .Normal)

        let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
        CGContextClipToMask(context, rect, self.CGImage)
        tintColor.setFill()
        CGContextFillRect(context, rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext() as UIImage
        UIGraphicsEndImageContext()

        return newImage
    }
}

imageWithColor was borrowed from this answer: https://stackoverflow.com/a/24545102/3050466

Answer 2

I don't have enough reputation for commenting the comments, but many are interested how to change the color of selected image

just add another if let check after

if let image = item.image

just like this:

if let selectedImage = item.selectedImage {
            item.selectedImage = selectedImage.imageWithColor(UIColor.yellowColor()).imageWithRenderingMode(.AlwaysOriginal)
        }

this solved the problem perfectly. And a little addition, since Swift 1.2 and Xcode 6.3.2 you need

for item in self.tabBar.items as! [UITabBarItem]

instead of

for item in self.tabBar.items as [UITabBarItem]

Hope that helps!

Answer 3

Swift 2.0

To change the default color for tab bar images, Add code bellow to viewDidLoad method of your TabBarController class:

for item in self.tabBar.items! as [UITabBarItem] {
    if let image = item.image {
      item.image = image.imageWithColor(UIColor.yellowColor()).imageWithRenderingMode(.AlwaysOriginal)
    }
}

Update the imageWithColor extension. Used with the above method and should be placed outside of your TabBarController class:

extension UIImage {
    func imageWithColor(tintColor: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)

        let context = UIGraphicsGetCurrentContext()! as CGContextRef
        CGContextTranslateCTM(context, 0, self.size.height)
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, CGBlendMode.Normal)

        let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
        CGContextClipToMask(context, rect, self.CGImage)
        tintColor.setFill()
        CGContextFillRect(context, rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext() as UIImage
        UIGraphicsEndImageContext()

        return newImage
    }
}

No changes to the way text gets coloured but just for reference. Also should be added the code bellow to viewDidLoad:

// you can add this code to you AppDelegate application:didFinishLaunchingWithOptions: 
// or add it to viewDidLoad method of your TabBarController class
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.magentaColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)

Answer 4

Swift 3.0

To change the default color for tab bar images, Add code bellow to viewDidLoad method of your TabBarController class:

    for item in self.tabBar.items! as [UITabBarItem] {
        if let image = item.image {
            item.image = image.imageWithColor(tintColor: UIColor.yellow).withRenderingMode(.alwaysOriginal)
        }
    }

Update the imageWithColor extension. Used with the above method and should be placed outside of your TabBarController class:

extension UIImage {
 func imageWithColor(tintColor: UIColor) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)

    let context = UIGraphicsGetCurrentContext()! as CGContext
    context.translateBy(x: 0, y: self.size.height)
    context.scaleBy(x: 1.0, y: -1.0);
    context.setBlendMode(CGBlendMode.normal)

    let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
    context.clip(to: rect, mask: self.cgImage!)
    tintColor.setFill()
    context.fill(rect)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()! as UIImage
    UIGraphicsEndImageContext()

    return newImage
 }
}