I continue to explore a few of the basics around using UIImageView and Swift to create interface elements. In this post I will discuss how you can apply a tint to an UIImageView image. The example I will use to show the image tint is to toggle on and off the selected state of a favorite “star” icon as shown below.
There are many techniques for applying a tint to an image. In this example, I’ll discuss the two approaches I like to use.
Just add two lines of code…
The easiest way to apply a tint to an UIImageView image is to set the imageWithRenderingMode of the image to AlwayTemplate and then apply a tint. This only takes two lines of code to get the desired results. The below snippet shows how to turn the UIImageView image blue.
myImageView.image = myImageView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate) myImageView.tintColor = UIColor.blueColor()
Or use an extension
Coding your image tint operations inline as discussed above works for most cases. If you have a large number of image elements or different use cases you might want to explore using an extension method. An extension method allows you to encapsulate the tint operating and make your code more readable. For example, the snippet below turns the UIImageView image blue in just one line.
myImageView.tintImageColor(UIColor.blueColor())
To accomplish this we added the UIImageView+ImageTint extension to our project. This extension simply encapsulates our inline code from above in a convenience method named tintImageColor. The full extension method is shown below.
extension UIImageView {
func tintImageColor(color : UIColor) {
self.image = self.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
self.tintColor = color
}
}
You can also find the extension method on Github here.
An example of both…
I’ve put together an example project ImageViewTintImage-Example here that walks you through how to apply both of these techniques to star and unstar UI elements.
bencoding 