Color Tint UIButton Image

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

None of above worked for me  because tint was cleared after click  I had to use  button setImageTintColor Palette darkGray    for  UIControlState

User · Answer

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  amp  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

User · Answer

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

User · Answer

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  - gt  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

User · Answer

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

User · Answer

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

User · Answer

Swift 4 with customType    let button   UIButton frame  aRectHere      let buttonImage   UIImage named   imageName       button setImage buttonImage  withRenderingMode  alwaysTemplate   for   normal      button tintColor    white

User · Answer

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

User · Answer

For Xamarin iOS  C    UIButton messagesButton   new UIButton UIButtonType Custom   UIImage icon   UIImage FromBundle  quot Images icon png quot    messagesButton SetImage icon ImageWithRenderingMode UIImageRenderingMode AlwaysTemplate   UIControlState Normal   messagesButton TintColor   UIColor White  messagesButton Frame   new RectangleF 0  0  25  25

User · Answer

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

User · Answer

To set white colour of the image arrow icon  on the button  we re using  let imageOnButton   UIImage named   quot navForwardArrow quot    imageWithColor color  UIColor white  button setImage imageOnButton  for   normal   Known issue  The icon looses its white colour while the button is pressed  Screenshot

User · Answer

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

[ios] Color Tint UIButton Image

Examples related to ios

Examples related to iphone

Examples related to uibutton

Examples related to ios7

Examples related to uisegmentedcontrol