How to Change Image Tintcolor in iOS and Watchkit

How can I change image tintColor in iOS and WatchKit

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.

How can I change image tintColor

Try to generate new image for yourself

UIImage *newImage = [_sketchImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIGraphicsBeginImageContextWithOptions(image.size, NO, newImage.scale);
[yourTintColor set];
[newImage drawInRect:CGRectMake(0, 0, image.size.width, newImage.size.height)];
newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

_sketchImageView.image = newImage;

And use it.

Good luck

======= UPDATE =======

This solution will only change color of all pixel's image.

Example: we have a book image: http://pngimg.com/upload/book_PNG2113.png

And after running above code (exp: TintColor is RED). We have:

SO: how your image is depends on how you designed it

Changing the tintColor of an imageView does not work when selected

I think there is some inconsistency in collectionView's cellForItemAt method collectionViewCell's isSelected.

1. In cellForItemAt, you are setting cell.tintColor = .white

2. In isSelected, you are setting imageView.tintColor = isSelected ? .white : .gray

Try changing the code in cellForItemAt to,

cell.imageView.tintColor = .gray

I've created a sample code so you can identify the issue,

class ViewController: UIViewController, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCell
        cell.imageView.tintColor = .gray
        return cell
    }
}

class CustomCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!

    override var isSelected: Bool {
        didSet {
            self.imageView.tintColor = isSelected ? .white : .gray
        }
    }
}

How to change tintcolor to uiimage in cell loaded by sd_setImageWithURL?

You should be using SDWebImage function with completion block. Try this.

cell.icon.tintColor = [UIColor yellowColor];
[cell.icon sd_setImageWithURL:[NSURL URLWithString:myURL] placeholderImage:[UIImage imageNamed:imageName] options:SDWebImageRefreshCached completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {           
    cell.icon.image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];            
}];

How to change the color of a UIImage in Swift

edit/update:

For iOS10+ we can use UIGraphicsImageRenderer:

Xcode 11 • Swift 5.1

extension UIImage {
    func tinted(with color: UIColor, isOpaque: Bool = false) -> UIImage? {
        let format = imageRendererFormat
        format.opaque = isOpaque
        return UIGraphicsImageRenderer(size: size, format: format).image { _ in
            color.set()
            withRenderingMode(.alwaysTemplate).draw(at: .zero) 
        }
    }
}

---

Playground Testing

let camera = UIImage(data: try! Data(contentsOf: URL(string: "https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-camera-128.png")!))!
let redCamera = camera.tinted(with: .red)

---

original answer

You can use UIGraphicsBeginImageContextWithOptions to begin an image context, set the desired color and use image's method func draw(in rect: CGRect) to draw your icon image using rendering mode .alwaysTemplate on it:

extension UIImage {
    func tinted(with color: UIColor) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        defer { UIGraphicsEndImageContext() }
        color.set()
        withRenderingMode(.alwaysTemplate)
            .draw(in: CGRect(origin: .zero, size: size))
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

---

swift - can't change UIImage tintColor

correct way is to use

let templateImage = UIImage(named: "spray7")!.tinted(with: .yellow)

instead

How to apply a tintColor to a UIImage?

If you are just supporting iOS 7 you can use tintColor and UIImageRenderingModeAlwaysTemplate

This article covers that:

https://www.captechconsulting.com/blogs/ios-7-tutorial-series-tint-color-and-easy-app-theming

If you need to support an earlier version you may want to consider this thread

How would I tint an image programmatically on the iPhone?

---

Related Topics