How can I change image tintColor in iOS and WatchKit

ios swift uiimage uicolor watchkit
chewy picture chewy · Oct 9, 2013 · Viewed 236.9k times · Source

I have an UIImageView called "theImageView", with UIImage in a single color (transparent background) just like the left black heart below. How can I change the tint color of this image programmatically in iOS 7 or above, as per the tint method used in the iOS 7+ Navigation Bar icons?

Can this method also work in WatchKit for an Apple Watch app?

enter image description here

Answer

Duncan Babbage picture Duncan Babbage · Oct 18, 2014

iOS
For an iOS app, in Swift 3, 4 or 5: 

theImageView.image = theImageView.image?.withRenderingMode(.alwaysTemplate)
theImageView.tintColor = UIColor.red

For Swift 2:

theImageView.image = theImageView.image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
theImageView.tintColor = UIColor.redColor()

Meanwhile, the modern Objective-C solution is:

theImageView.image = [theImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[theImageView setTintColor:[UIColor redColor]];

Watchkit
In WatchKit for Apple Watch apps, you can set the tint color for a template image.

  1. You must add your image to an Asset Catalog in your WatchKit App, and set the image set to be rendered as a Template Image in the Attributes Inspector. Unlike for an iPhone app, you cannot set the template rendering in code in the WatchKit Extension at present.
  2. Set that image to be used in your WKInterfaceImage in interface builder for your app
  3. Create an IBOutlet in your WKInterfaceController for the WKInterfaceImage called 'theImage'...

To then set the tint color in Swift 3 or 4:

theImage.setTintColor(UIColor.red)

Swift 2:

theImage.setTintColor(UIColor.redColor())

To then set the tint color in Objective-C:

[self.theImage setTintColor:[UIColor redColor]];

If you use a template image and do not apply a tint colour, the Global Tint for your WatchKit app will be applied. If you have not set a Global Tint, theImage will be tinted light blue by default when used as a template image.

Related questions

How to change the color of a UIImage in Swift

I'm in swift and I'm trying to generate a function that takes in a UIImage and a UIColor and returns a UIImage recolored I'm not working with a UIImageView, these are simply UIImages that I intend to use as icons. …

Read More
Loading/Downloading image from URL on Swift

I'd like to load an image from a URL in my application, so I first tried with Objective-C and it worked, however, with Swift, I've a compilation error: 'imageWithData' is unavailable: use object construction 'UIImage(data:)' My function: @IBOutlet …

Read More
Convert between UIImage and Base64 string

Does anyone know how to convert a UIImage to a Base64 string, and then reverse it? I have the below code; the original image before encoding is good, but I only get a blank image after I encode and decode …

Read More