Using Tint color on UIImageView

Question

I have my own subclass of UIButton . I add UIImageView on it and add an image. I would like to paint it over the image with a tint color but it doesn't work.

So far I have:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.backgroundColor = [UIColor clearColor];
        self.clipsToBounds = YES;

        self.circleView = [[UIView alloc]init];
        self.circleView.backgroundColor = [UIColor whiteColor];
        self.circleView.layer.borderColor = [[Color getGraySeparatorColor]CGColor];
        self.circleView.layer.borderWidth = 1;
        self.circleView.userInteractionEnabled = NO;
        self.circleView.translatesAutoresizingMaskIntoConstraints = NO;
        [self addSubview:self.circleView];

        self.iconView = [[UIImageView alloc]init];
        [self.iconView setContentMode:UIViewContentModeScaleAspectFit];
        UIImage * image = [UIImage imageNamed:@"more"];
        [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
        self.iconView.image = image;
        self.iconView.translatesAutoresizingMaskIntoConstraints = NO;
        [self.circleView addSubview:self.iconView];
        ...

and on selection :

- (void) setSelected:(BOOL)selected
{
    if (selected) {
        [self.iconView setTintColor:[UIColor redColor]];
        [self.circleView setTintColor:[UIColor redColor]];
    }
    else{
        [self.iconView setTintColor:[UIColor blueColor]];
        [self.circleView setTintColor:[UIColor blueColor]];
    }  
}

What did I do wrong? (The color of the image always stays the same as it was originally.)

Answer 1

Instead of this code:

[image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

you should have:

image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

Use this in Swift 4.1

image = UIImage(named: "name")!.withRenderingMode(.alwaysTemplate)

Answer 2

You can also just set this on your asset. Make sure your image contains all white pixels + transparent.

Answer 3

(Can't edit @Zhaolong Zhong post)

In swift 3.0 , you can do:

let image = UIImage(named: "your_image_name")!.withRenderingMode(.alwaysTemplate)

yourImageView.image = image

yourImageView.tintColor = UIColor.blue

Answer 4

In swift 2.0+, you can do:

let image = UIImage(named: "your_image_name")!.imageWithRenderingMode(.AlwaysTemplate)

yourImageView.image = image

yourImageView.tintColor = UIColor.blueColor()

Answer 5

Swift version: 5.2

let tintableImage = UIImage(named: "myImage")?.withRenderingMode(.alwaysTemplate)
imageView.image = tintableImage
imageView.tintColor = UIColor.red

Objective C

self.imgView.image = [self.imgView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[self.imgView setTintColor:[UIColor darkGrayColor]];

Or

You can also just set this on your asset.

Answer 6

One step further. This is a drop-in subclass of UIImageView. (Not exact solution for original question.) Use in Interface Builder by setting class name to TintedImageView. Updates in real-time inside the designer as tint color changes.

(Swift 3.1, Xcode 8.3)

import UIKit

@IBDesignable class TintedImageView: UIImageView {
    override func prepareForInterfaceBuilder() {
        self.configure()
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        self.configure()
    }

    @IBInspectable override var tintColor: UIColor! {
        didSet {
            self.configure()
        }
    }

    private func configure() {
        self.image = self.image?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
    }
}

Answer 7

Make the imageView

    let imageView = UIImageView(frame: frame!)
    imageView.contentMode = .ScaleAspectFit
    imageView.tintColor = tintColor

Make the image

    let mainBundle = NSBundle.mainBundle()
    var image = UIImage(named: filename!, inBundle: mainBundle, compatibleWithTraitCollection: nil)
    image = image?.imageWithRenderingMode(.AlwaysTemplate)

Wire them together

    imageView?.image = image

Display it

view.addSubview(imageView)

Answer 8

all said is correct. my contribution If You cannot / dont want to apply to every UiImageView, OR for efficiency You need to render ONCE (or example for cells of tableviews)

func tint(with color: UIColor) -> UIImage {
        var image = withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        color.set()

        image.draw(in: CGRect(origin: .zero, size: size))
        image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }

And set to all UI elements this UIImage.

Answer 9

@odemolliens answer should just work.

But if you are still having issues, make sure that the tint color you are applying to the UIImageView is different from the one defined in the Interface Builder.