I noticed that when I place a white or black UIImage
into a UISegmentedControl
it automatically color masks it to match the tint of the segmented control. I thought this was really cool, and was wondering if I could do this elsewhere as well. For example, I have a bunch of buttons that have a uniform shape but varied colors. Instead of making a PNG for each button, could I somehow use this color masking to use the same image for all of them but then set a tint color or something to change their actual color?
-
Can you post the image that you want to use and also image for desired result?– Pratyusha TerliNov 7, 2013 at 6:32
-
this do the same from interface builder stackoverflow.com/a/25179217/2051381– Chuy47Feb 18, 2016 at 21:44
18 Answers
As of iOS 7, there is a new method on UIImage
to specify the rendering mode. Using the rendering mode UIImageRenderingModeAlwaysTemplate
will allow the image color to be controlled by the button's tint color.
Objective-C
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [[UIImage imageNamed:@"image_name"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[button setImage:image forState:UIControlStateNormal];
button.tintColor = [UIColor redColor];
Swift
let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red
-
17
-
4@M.Othman only works for me when I use button.tintColor and not button.imageview.tintColor– pnizzleJul 1, 2015 at 0:28
-
35Just remember to set image render mode on the image in xcassets per @hashier– netwireJul 29, 2015 at 21:03
-
29Creating a UIButton of type UIButtonTypeSystem will automatically honor the tintColor you set. Nov 3, 2015 at 7:14
-
5If your
tintColor
is too dark, make sureadjustsImageWhenHighlighted
is NO. (Or in IB: "Highlighted Adjusts Image" is unchecked.) Nov 26, 2015 at 19:47
As Ric already mentioned in his post you can set the render mode in code, you can also do this directly in the image catalog, see attached image below. Just set the Render As
to Template Image
Caveat I have had problems with iOS 7 and this approach. So if you use iOS 7 as well you might want to do it in code as well to be sure, as described here.
-
1As a side note, the image file should be black and transparent (not b&w) Feb 25, 2016 at 16:02
-
6@AxelGuilmin not really. Your image can be any color you want and transparent. Any color different than transparent will be converted to a generic one and then it will be tinted with black color by default. Mar 31, 2016 at 16:51
Custom Buttons appear in their respective image colors. Setting the button type to "System" in the storyboard (or to UIButtonTypeSystem
in code), will render the button's image with the default tint color.
(tested on iOS9, Xcode 7.3)
-
2Which can be avoided with the alwaysTemplate and tintColor methods suggested here. With the advantage of the .system button being you get the change in color with touch down on the tap. Feb 8, 2018 at 19:58
You must set the image rendering mode to UIImageRenderingModeAlwaysTemplate
in order to have the tintColor
affect the UIImage. Here is the solution in Swift:
let image = UIImage(named: "image-name")
let button = UIButton()
button.setImage(image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), forState: .Normal)
button.tintColor = UIColor.whiteColor()
SWIFT 4x
button.setImage(image.withRenderingMode(UIImage.RenderingMode.alwaysTemplate), for: .normal)
button.tintColor = UIColor.blue
If you have a custom button with a background image.You can set the tint color of your button and override the image with following .
In assets select the button background you want to set tint color.
In the attribute inspector of the image set the value render as to "Template Image"
Now whenever you setbutton.tintColor = UIColor.red
you button will be shown in red.
-
if you are here you can go to this link: useyourloaf.com/blog/styling-buttons-using-the-asset-catalog and go down to template images (to serve as an explanation)– cspamMay 22, 2017 at 14:29
-
This is a better solution as it reduces code and pretty much does the same thing as the accepted answer.– DS.Apr 29, 2018 at 23:29
-
I think this should be the correct one. less code and easy to handle. Apr 2, 2020 at 7:57
In Swift you can do that like so:
var exampleImage = UIImage(named: "ExampleImage.png")?.imageWithRenderingMode(.AlwaysTemplate)
Then in your viewDidLoad
exampleButtonOutlet.setImage(exampleImage, forState: UIControlState.Normal)
And to modify the color
exampleButtonOutlet.tintColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) //your color
EDIT Xcode 8
Now you can also just the rendering mode of the image in your .xcassets to Template Image and then you don't need to specifically declare it in the var exampleImage
anymore
Not sure exactly what you want but this category method will mask a UIImage with a specified color so you can have a single image and change its color to whatever you want.
ImageUtils.h
- (UIImage *) maskWithColor:(UIColor *)color;
ImageUtils.m
-(UIImage *) maskWithColor:(UIColor *)color
{
CGImageRef maskImage = self.CGImage;
CGFloat width = self.size.width;
CGFloat height = self.size.height;
CGRect bounds = CGRectMake(0,0,width,height);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGContextClipToMask(bitmapContext, bounds, maskImage);
CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
CGContextFillRect(bitmapContext, bounds);
CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
UIImage *coloredImage = [UIImage imageWithCGImage:cImage];
CGContextRelease(bitmapContext);
CGColorSpaceRelease(colorSpace);
CGImageRelease(cImage);
return coloredImage;
}
Import the ImageUtils category and do something like this...
#import "ImageUtils.h"
...
UIImage *icon = [UIImage imageNamed:ICON_IMAGE];
UIImage *redIcon = [icon maskWithColor:UIColor.redColor];
UIImage *blueIcon = [icon maskWithColor:UIColor.blueColor];
-
3Use
kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast
onCGBitmapContextCreate
Feb 4, 2014 at 8:26 -
4Nice, but needs to be tweaked for Retina graphics... When I run this on a Retina image, it returns me a non-retina one.– jowieMar 26, 2014 at 14:08
-
To support Retina devices you could use the scale property of the
UIDevice
class:CGFloat scale = [UIScreen mainScreen].scale; CGFloat width = self.size.width * scale; CGFloat height = self.size.height * scale;
Thescale
property exists as of iOS 4.0. Jan 8, 2015 at 12:29 -
You also need to use the
scale
value when theUIImage
is created:UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:scale orientation:self.imageOrientation];
Jan 8, 2015 at 12:42
Swift 4 with customType:
let button = UIButton(frame: aRectHere)
let buttonImage = UIImage(named: "imageName")
button.setImage(buttonImage?.withRenderingMode(.alwaysTemplate), for: .normal)
button.tintColor = .white
Swift 3:
This solution could be comfortable if you have already setted your image through xCode interface builder. Basically you have one extension to colorize an image:
extension UIImage {
public func image(withTintColor color: UIColor) -> UIImage{
UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
let context: CGContext = UIGraphicsGetCurrentContext()!
context.translateBy(x: 0, y: self.size.height)
context.scaleBy(x: 1.0, y: -1.0)
context.setBlendMode(CGBlendMode.normal)
let rect: CGRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
context.clip(to: rect, mask: self.cgImage!)
color.setFill()
context.fill(rect)
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return newImage
}
}
Then , you can prepare this UIButton extension to colorize the image for a particular state:
extension UIButton {
func imageWith(color:UIColor, for: UIControlState) {
if let imageForState = self.image(for: state) {
self.image(for: .normal)?.withRenderingMode(.alwaysTemplate)
let colorizedImage = imageForState.image(withTintColor: color)
self.setImage(colorizedImage, for: state)
}
}
}
Usage:
myButton.imageWith(.red, for: .normal)
P.S. (working good also in table cells, you don't need to call setNeedDisplay()
method, the change of the color is immediate due to the UIImage extension..
For Xamarin.iOS (C#):
UIButton messagesButton = new UIButton(UIButtonType.Custom);
UIImage icon = UIImage.FromBundle("Images/icon.png");
messagesButton.SetImage(icon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
messagesButton.TintColor = UIColor.White;
messagesButton.Frame = new RectangleF(0, 0, 25, 25);
If you want to manually mask your image, here is updated code that works with retina screens
- (UIImage *)maskWithColor:(UIColor *)color
{
CGImageRef maskImage = self.CGImage;
CGFloat width = self.size.width * self.scale;
CGFloat height = self.size.height * self.scale;
CGRect bounds = CGRectMake(0,0,width,height);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
CGContextClipToMask(bitmapContext, bounds, maskImage);
CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
CGContextFillRect(bitmapContext, bounds);
CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:self.scale orientation:self.imageOrientation];
CGContextRelease(bitmapContext);
CGColorSpaceRelease(colorSpace);
CGImageRelease(cImage);
return coloredImage;
}
let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red
If you are setting UIButton.tintColor
by UIColor(r:g:b:alpha:)
, remember to divide values by 255
. Those RGB values should be in between 0 and 1.
You Should Try
After Setting The Frame
NSArray *arr10 =[NSArray arrayWithObjects:btn1,btn2,nil];
for(UIButton *btn10 in arr10)
{
CAGradientLayer *btnGradient2 = [CAGradientLayer layer];
btnGradient2.frame = btn10.bounds;
btnGradient2.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithRed:151.0/255.0f green:206.0/255.5 blue:99.0/255.0 alpha:1] CGColor],
(id)[[UIColor colorWithRed:126.0/255.0f green:192.0/255.5 blue:65.0/255.0 alpha:1]CGColor],
nil];
[btn10.layer insertSublayer:btnGradient2 atIndex:0];
}
Swift 3.0
let image = UIImage(named:"NoConnection")!
warningButton = UIButton(type: .system)
warningButton.setImage(image, for: .normal)
warningButton.tintColor = UIColor.lightText
warningButton.frame = CGRect(origin: CGPoint(x:-100,y:0), size: CGSize(width: 59, height: 56))
self.addSubview(warningButton)
Change button image or image view tint color Swift :
btn.imageView?.image = btn.imageView?.image?.withRenderingMode(.alwaysTemplate)
btn.imageView?.tintColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
None of above worked for me, because tint was cleared after click. I had to use
button.setImageTintColor(Palette.darkGray(), for: UIControlState())
To set white colour of the image(arrow icon) on the button, we're using:
let imageOnButton = UIImage(named: "navForwardArrow")?.imageWithColor(color: UIColor.white)
button.setImage(imageOnButton, for: .normal)
Known issue: The icon looses its white colour while the button is pressed.
I had a problem with masking image in highlighted state. I didn't want it to happen. If You have the same problem, check this out: adjustsImageWhenHighlighted = false