Using Tint color on UIImageView
IosXcodeUiimageviewUibuttonTintcolorIos Problem Overview
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.)
Ios Solutions
Solution 1 - Ios
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)
Solution 2 - Ios
You can also just set this on your asset. Make sure your image contains all white pixels + transparent.
Solution 3 - Ios
(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
Solution 4 - Ios
In swift 2.0+, you can do:
let image = UIImage(named: "your_image_name")!.imageWithRenderingMode(.AlwaysTemplate)
yourImageView.image = image
yourImageView.tintColor = UIColor.blueColor()
Solution 5 - Ios
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.
Solution 6 - Ios
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)
}
}
Solution 7 - Ios
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)
Solution 8 - Ios
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.
Solution 9 - Ios
@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.