How can I change image tintColor in iOS and WatchKit

Question

I have an UIImageView called  theImageView   with UIImage in a single color  transparent background  just like the left black heart below  How can I change the tint color of this image programmatically in iOS 7 or above  as per the tint method used in the iOS 7  Navigation Bar icons   Can this method also work in WatchKit for an Apple Watch app

User · Answer

Try this  http   robots thoughtbot com designing-for-ios-blending-modes  or  -  void viewDidLoad    super viewDidLoad    UILabel  label     UILabel alloc  initWithFrame CGRectMake 10  30  300  50    label numberOfLines   0  label font    UIFont systemFontOfSize 13   label text     These checkmarks use the same gray checkmark image with a tintColor applied to the image view    self view addSubview label     self  createImageViewAtY 100 color  UIColor purpleColor       -  void  createImageViewAtY  int y color  UIColor   color   UIImage  image     UIImage imageNamed   gray checkmark png   imageWithRenderingMode UIImageRenderingModeAlwaysTemplate   UIImageView  imageView     UIImageView alloc  initWithImage image   CGRect frame   imageView frame  frame origin x   100  frame origin y   y  imageView frame   frame   if  color      imageView tintColor   color    self view addSubview imageView

User · Answer

Subclass which can be used from code and Interface Builder as well    implementation TintedImageView  -  instancetype initWithFrame  CGRect frame       self    super initWithFrame frame       if  self             self setup             return self     -  instancetype initWithCoder  NSCoder   aDecoder       self    super initWithCoder aDecoder       if  self             self setup             return self     - void setup       self image    self image imageWithRenderingMode UIImageRenderingModeAlwaysTemplate       end

User · Answer

If anyone care a solution without UIImageView       Swift 3  extension UIImage       func tint with color  UIColor  - gt  UIImage           var image   withRenderingMode  alwaysTemplate          UIGraphicsBeginImageContextWithOptions size  false  scale          color set            image draw in  CGRect origin   zero  size  size           image   UIGraphicsGetImageFromCurrentImageContext            UIGraphicsEndImageContext           return image

User · Answer

There is a native method for UIImage since iOS 13 let image   yourImage withTintColor  systemRed

User · Answer

Swift 5 Redrawing image with background and fill color extension UIImage     func withBackground color  UIColor  fill fillColor  UIColor  - gt  UIImage       UIGraphicsBeginImageContextWithOptions size  true  scale           guard let ctx   UIGraphicsGetCurrentContext    let image   cgImage else   return self       defer   UIGraphicsEndImageContext              ctx concatenate CGAffineTransform a  1  b  0  c  0  d  -1  tx  0  ty  size height            let rect   CGRect origin   zero  size  size              draw background     ctx setFillColor color cgColor      ctx fill rect              draw image with fill color     ctx clip to  rect  mask  image      ctx setFillColor fillColor cgColor      ctx fill rect           return UIGraphicsGetImageFromCurrentImageContext      self

User · Answer

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     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  Set that image to be used in your WKInterfaceImage in interface builder for your app 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

User · Answer

For tinting the image of a UIButton  let image1    ic shopping cart empty  btn Basket setImage UIImage named  image1   withRenderingMode  alwaysTemplate   for   normal  btn Basket setImage UIImage named  image1   withRenderingMode  alwaysTemplate   for   selected  btn Basket imageView  tintColor   UIColor UIColor Red

User · Answer

I had to do this in Swift using an extension   I thought I d share how I did it   extension UIImage       func imageWithColor color1  UIColor  - gt  UIImage           UIGraphicsBeginImageContextWithOptions self size  false  self scale          color1 setFill            let context   UIGraphicsGetCurrentContext   as CGContextRef         CGContextTranslateCTM context  0  self size height          CGContextScaleCTM context  1 0  -1 0           CGContextSetBlendMode context  CGBlendMode Normal           let rect   CGRectMake 0  0  self size width  self size height  as CGRect         CGContextClipToMask context  rect  self CGImage          CGContextFillRect context  rect           let newImage   UIGraphicsGetImageFromCurrentImageContext   as UIImage         UIGraphicsEndImageContext            return newImage           Usage   theImageView image   theImageView image imageWithColor UIColor redColor     Swift 4  extension UIImage       func imageWithColor color1  UIColor  - gt  UIImage           UIGraphicsBeginImageContextWithOptions self size  false  self scale          color1 setFill            let context   UIGraphicsGetCurrentContext           context  translateBy x  0  y  self size height          context  scaleBy x  1 0  y  -1 0          context  setBlendMode CGBlendMode normal           let rect   CGRect origin   zero  size  CGSize width  self size width  height  self size height           context  clip to  rect  mask  self cgImage           context  fill rect           let newImage   UIGraphicsGetImageFromCurrentImageContext           UIGraphicsEndImageContext            return newImage            Usage   theImageView image   theImageView image  imageWithColor color1  UIColor red

User · Answer

Swift 4 Change tint of UIImage SVG   PDF  that work for image with unique color     import Foundation         MARK  - UIImage extensions  public extension UIImage                   Tint Image                 - Parameter fillColor  UIColor         - Returns  Image with tint color     func tint with fillColor  UIColor  - gt  UIImage            let image   withRenderingMode  alwaysTemplate          UIGraphicsBeginImageContextWithOptions size  false  scale          fillColor set           image draw in  CGRect origin   zero  size  size            guard let imageColored   UIGraphicsGetImageFromCurrentImageContext   else               return nil                            UIGraphicsEndImageContext           return imageColored          Change tint of UIImageView  that work for image with unique color     let imageView   UIImageView frame  CGRect x  50  y  50  width  50  height  50   imageView image   UIImage named   quot hello png quot    withRenderingMode  alwaysTemplate  imageView tintColor    yellow  Change tint of UIImage for picture  use that      import Foundation     MARK  - Extensions UIImage  public extension UIImage            Tint  Colorize image with given tint color         This is similar to Photoshop s  quot Color quot  layer blend mode         This is perfect for non-greyscale source images  and images that          have both highlights and shadows that should be preserved lt br gt  lt br gt          white will stay white and black will stay black as the lightness of          the image is preserved                 - Parameter TintColor  Tint color         - Returns   Tinted image     public func tintImage with fillColor  UIColor  - gt  UIImage                    return modifiedImage   context  rect in                draw black background - workaround to preserve color of partially transparent pixels             context setBlendMode  normal              UIColor black setFill               context fill rect                              draw original image             context setBlendMode  normal              context draw cgImage   in  rect                              tint image  loosing alpha  - the luminosity of the original image is preserved             context setBlendMode  color              fillColor setFill               context fill rect                              mask by alpha values of original image             context setBlendMode  destinationIn              context draw context makeImage     in  rect                               Modified Image Context  apply modification on image                 - Parameter draw   CGContext  CGRect  - gt              - Returns         UIImage     fileprivate func modifiedImage   draw   CGContext  CGRect  - gt      - gt  UIImage                       using scale correctly preserves retina images         UIGraphicsBeginImageContextWithOptions size  false  scale          let context  CGContext    UIGraphicsGetCurrentContext           assert context    nil                      correctly rotate image         context translateBy x  0  y  size height          context scaleBy x  1 0  y  -1 0                   let rect   CGRect x  0 0  y  0 0  width  size width  height  size height                   draw context  rect                   let image   UIGraphicsGetImageFromCurrentImageContext           UIGraphicsEndImageContext           return image

User · Answer

let navHeight   self navigationController  navigationBar frame height  let menuBtn   UIButton type   custom  menuBtn frame   CGRect x  0  y  0  width  45  height  navHeight        menuBtn setImage UIImage named  image name    withRenderingMode  alwaysTemplate   for   normal          menuBtn tintColor    black

User · Answer

For swift 3 purposes theImageView image   theImageView image  withRenderingMode  alwaysTemplate  theImageView tintColor   UIColor red

User · Answer

Now i use this method based in Duncan Babbage response      UIImageView    tintImageView   UIImageView   imageView withColor   UIColor   color      imageView image    imageView image imageWithRenderingMode UIImageRenderingModeAlwaysTemplate        imageView setTintColor color       return imageView

User · Answer

profileImageView image   theImageView image  withRenderingMode  alwaysTemplate  profileImageView tintColor   UIColor green   OR  First select Particular image in image asset and then select reddened as Template instead of Default and after that write line  profileImageView tintColor   UIColor green

User · Answer

In storyboard and image Assets  you can change this two also   Update the Render Mode to Template Image    Update the tint Color in Views

User · Answer

With iOS 13 and above  you can simply use  let image   UIImage named   Heart    withRenderingMode  alwaysTemplate  if  available iOS 13 0          imageView image   image  withTintColor UIColor white

User · Answer

You can use this in Swift 3 if you have an image to replace the clear button   func addTextfieldRightView         let rightViewWidth CGFloat   30      let viewMax   self searchTxt frame height     let buttonMax   self searchTxt frame height - 16      let buttonView   UIView frame  CGRect          x  self searchTxt frame width - rightViewWidth          y  0          width  viewMax          height  viewMax        let myButton   UIButton frame  CGRect          x   viewMax - buttonMax    2          y   viewMax - buttonMax    2          width  buttonMax          height  buttonMax        myButton setImage UIImage named   BlueClear     for   normal       buttonView addSubview myButton       let clearPressed   UITapGestureRecognizer target  self  action   selector SearchVC clearPressed sender         buttonView isUserInteractionEnabled   true     buttonView addGestureRecognizer clearPressed       myButton addTarget self  action   selector SearchVC clearPressed sender     for   touchUpInside       self searchTxt rightView   buttonView     self searchTxt rightViewMode    whileEditing

User · Answer

Here s a category that should do the trick   interface UIImage Overlay   end   implementation UIImage Overlay   -  UIImage   imageWithColor  UIColor   color1           UIGraphicsBeginImageContextWithOptions self size  NO  self scale           CGContextRef context   UIGraphicsGetCurrentContext            CGContextTranslateCTM context  0  self size height           CGContextScaleCTM context  1 0  -1 0           CGContextSetBlendMode context  kCGBlendModeNormal           CGRect rect   CGRectMake 0  0  self size width  self size height           CGContextClipToMask context  rect  self CGImage            color1 setFill           CGContextFillRect context  rect           UIImage  newImage   UIGraphicsGetImageFromCurrentImageContext            UIGraphicsEndImageContext            return newImage     end   so you would do   theImageView image    theImageView image imageWithColor  UIColor redColor

User · Answer

iOS  Solution for doing it from Interface Builder  set templateImage param in keyPath and choose your tint color from IB  extension UIImageView       make template image with tint color var templateImage  Bool       set           if newValue  let image   self image               let newImage   image withRenderingMode  alwaysTemplate              self image   newImage                 get           return false

User · Answer

Also  for the above answers  in iOS 13 and later there is a clean way let image   UIImage named   quot imageName quot    withTintColor  white  renderingMode   alwaysTemplate

User · Answer

With Swift  let commentImageView   UIImageView frame  CGRectMake 100  100  100  100   commentImageView image   UIImage named   myimage png    imageWithRenderingMode UIImageRenderingMode AlwaysTemplate  commentImageView tintColor   UIColor blackColor   addSubview commentImageView

User · Answer

Swift 3 version of extension answer from fuzz  func imageWithColor color  UIColor  - gt  UIImage       UIGraphicsBeginImageContextWithOptions self size  false  self scale      color setFill        let context   UIGraphicsGetCurrentContext    as CGContext     context translateBy x  0  y  self size height      context scaleBy x  1 0  y  -1 0       context setBlendMode  normal       let rect   CGRect x  0  y  0  width  self size width  height  self size height  as CGRect     context clip to  rect  mask  self cgImage       context fill rect       let newImage   UIGraphicsGetImageFromCurrentImageContext    as UIImage     UIGraphicsEndImageContext        return newImage

User · Answer

if you have any id for the SVG image  you can fill the colours with respect to the ID       let image   SVGKImage named   iconName       let svgIMGV   SVGKFastImageView frame  self imgView frame           svgIMGV image   image           svgIMGV fillTintColor colorImage  UIColor red  iconID   Bank        Add in extension SVGKImageView extension SVGKImageView    func fillTintColor colorImage  UIColor  iconID  String            if self image    nil  amp  amp  self image caLayerTree    nil               print self image caLayerTree sublayers              guard let sublayers   self image caLayerTree sublayers else   return               fillRecursively sublayers  sublayers  color  colorImage  iconID  iconID                        private func fillRecursively sublayers   CALayer   color  UIColor  iconID  String  hasFoundLayer  Bool            var isLayerFound   false         for layer in sublayers               if let l   layer as  CAShapeLayer                    print l name                                    IF you want to color the specific shapelayer by id else remove the l name      myID   validation                 if let name    l name   hasFoundLayer    true  amp  amp  name     myID                        self colorThatImageWIthColor color  color  layer  l                      print  Colouring FInished                                   else                   if layer name    iconID                       if let innerSublayer   layer sublayers as   CAShapeLayer                            fillRecursively sublayers  innerSublayer  color  color  iconID  iconID  hasFoundLayer  true                           print  FOund                                           else                       if let l   layer as  CALayer  let sub   l sublayers                           fillRecursively sublayers  sub  color  color  iconID  iconID  hasFoundLayer  false                                                                              func colorThatImageWIthColor color  UIColor  layer  CAShapeLayer            if layer strokeColor    nil               layer strokeColor   color cgColor                   if layer fillColor    nil               layer fillColor   color cgColor                      OR Checkout this example   https   github com ravisfortune SVGDEMO

User · Answer

Take benefit of Extension in Swift  -    extension UIImageView       func changeImageColor  color UIColor  - gt  UIImage               image   image  withRenderingMode  alwaysTemplate          tintColor   color         return image                Change color of logo     logoImage image    logoImage changeImageColor color   red

User · Answer

This is my UIImage extension and you can directly use changeTintColor function for an image   extension UIImage        func changeTintColor color  UIColor  - gt  UIImage           var newImage   self withRenderingMode  alwaysTemplate          UIGraphicsBeginImageContextWithOptions self size  false  newImage scale          color set           newImage draw in  CGRect x  0 0  y  0 0  width  self size width  height  self size height           newImage   UIGraphicsGetImageFromCurrentImageContext            UIGraphicsEndImageContext           return newImage            func changeColor color  UIColor  - gt  UIImage           let backgroundSize   self size         UIGraphicsBeginImageContext backgroundSize          guard let context   UIGraphicsGetCurrentContext   else               return self                   var backgroundRect   CGRect           backgroundRect size   backgroundSize         backgroundRect origin x   0         backgroundRect origin y   0          var red  CGFloat   0         var green  CGFloat   0         var blue  CGFloat   0         var alpha  CGFloat   0         color getRed  amp red  green   amp green  blue   amp blue  alpha   amp alpha          context setFillColor red  red  green  green  blue  blue  alpha  alpha          context translateBy x  0  y  backgroundSize height          context scaleBy x  1 0  y  -1 0          context clip to  CGRect x  0 0  y  0 0  width  self size width  height  self size height                    mask  self cgImage           context fill backgroundRect           var imageRect   CGRect           imageRect size   self size         imageRect origin x    backgroundSize width - self size width    2         imageRect origin y    backgroundSize height - self size height    2          context setBlendMode  multiply          context draw self cgImage   in  imageRect           let newImage   UIGraphicsGetImageFromCurrentImageContext           UIGraphicsEndImageContext           return newImage             Example usage like this  let image   UIImage named   sample image   imageView image   image changeTintColor color  UIColor red    And you can use change changeColor function to change the image color

[ios] How can I change image tintColor in iOS and WatchKit

Examples related to ios

Examples related to swift

Examples related to uiimage

Examples related to uicolor

Examples related to watchkit