How to change UIImage color

I want not to change backgroundColor UIImage,
but change the color of the whole image.

Because I have standard forms that I can move from popover to view.
In my application, you can change images to one large image, that is, to a table.
In addition, I want to change the color to white or any other.

But the problem is that I can only change backgroundColor
Is there a way to change the color of a UIImage?

Thank you in advance

+42
ios uiimage uicolor
May 25 '12 at 13:49
source share
6 answers
UIImage *image = [UIImage imageNamed:@"triangle.png"]; CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height); UIGraphicsBeginImageContext(rect.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextClipToMask(context, rect, image.CGImage); CGContextSetFillColorWithColor(context, [[UIColor redColor] CGColor]); CGContextFillRect(context, rect); UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); UIImage *flippedImage = [UIImage imageWithCGImage:img.CGImage scale:1.0 orientation: UIImageOrientationDownMirrored]; yourUIImageView.image = flippedImage; 
+58
May 25 '12 at 14:04
source share

The accepted answer is correct, but for UIImageView

Obj-C:

 UIImage *image = [UIImage imageNamed:@"foo.png"]; theImageView.image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; [theImageView setTintColor:[UIColor redColor]]; 

Swift 2:

 let theImageView = UIImageView(image: UIImage(named:"foo")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)) theImageView.tintColor = UIColor.redColor() 

Swift 3:

 let theImageView = UIImageView(image: UIImage(named:"foo")!.withRenderingMode(.alwaysTemplate)) theImageView.tintColor = UIColor.red 
+116
Oct 29 '14 at 10:04
source share

For fast 3.2 and 4

 extension UIImageView{ func changePngColorTo(color: UIColor){ guard let image = self.image else {return} self.image = image.withRenderingMode(.alwaysTemplate) self.tintColor = color } } 

Use:

 self.yourImageView.changePngColorTo(color: .red) 
+5
Jun 14 '18 at 9:15
source share

You can also do this quickly using the following code:

 // language: Swift let tintedImage = UIImageView(image: UIImage(named:"whatever")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)) tintedImage.tintColor = UIColor.redColor() 
+4
Feb 24 '16 at 1:24
source share

the details

  • Xcode 10.2.1 (10E1001), Swift 5

Method 1: Extend UIImage

source: stack overflow

 extension UIImage { convenience init?(imageName: String) { self.init(named: imageName) accessibilityIdentifier = imageName } // /questions/110361/change-color-of-png-in-buttons-ios/688577#688577 func imageWithColor (newColor: UIColor?) -> UIImage? { if let newColor = newColor { UIGraphicsBeginImageContextWithOptions(size, false, scale) let context = UIGraphicsGetCurrentContext()! context.translateBy(x: 0, y: size.height) context.scaleBy(x: 1.0, y: -1.0) context.setBlendMode(.normal) let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height) context.clip(to: rect, mask: cgImage!) newColor.setFill() context.fill(rect) let newImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() newImage.accessibilityIdentifier = accessibilityIdentifier return newImage } if let accessibilityIdentifier = accessibilityIdentifier { return UIImage(imageName: accessibilityIdentifier) } return self } } 

using

 let imageView = UIImageView(frame: CGRect(x: 40, y: 250, width: 40, height: 40)) view.addSubview(imageView) // Set color imageView.image = UIImage(imageName: "Apple")?.imageWithColor(newColor: UIColor.blue) // Reset color //imageView.image = imageView.image?.imageWithColor(newColor: nil) 

Method 2. Extending UIImageView

 extension UIImageView { var imageColor: UIColor? { set (newValue) { guard let image = image else { return } if newValue != nil { self.image = image.withRenderingMode(.alwaysTemplate) tintColor = newValue } else { self.image = image.withRenderingMode(.alwaysOriginal) tintColor = UIColor.clear } } get { return tintColor } } } 

using

 let imageView = UIImageView(frame: CGRect(x: 40, y: 250, width: 40, height: 40)) view.addSubview(imageView) imageView.image = UIImage(imageName: "Apple") // Set color imageView.imageColor = UIColor.green // Reset color //imageView.imageColor = nil 

Full sample

Do not forget to insert all the code above

 import UIKit class ImageView: UIImageView { enum ImageColorTransformType { case none, imageExtension, imageViewExtension } var imageColorTransformType = ImageColorTransformType.none } class ViewController: UIViewController { weak var colorSwitchButton: UIBarButtonItem? private var imageViews = [ImageView]() private var appleImage: UIImage { return UIImage(imageName: "apple")! } private var redAppleImage: UIImage { return UIImage(imageName: "red_apple")! } override func viewDidLoad() { super.viewDidLoad() createNewImageView(x: 40, y:100, image:appleImage, imageColorTransformType: .none) createNewImageView(x: 100, y:100, image:appleImage, imageColorTransformType: .imageExtension) createNewImageView(x: 160, y:100, image:appleImage, imageColorTransformType: .imageViewExtension) createNewImageView(x: 40, y:160, image:redAppleImage, imageColorTransformType: .none) createNewImageView(x: 100, y:160, image:redAppleImage, imageColorTransformType: .imageExtension) createNewImageView(x: 160, y:160, image:redAppleImage, imageColorTransformType: .imageViewExtension) let buttonItem = UIBarButtonItem(title: "switch", style: .plain, target: self, action: #selector(colorSwitchButtonTouchedUpInside(_:))) navigationItem.rightBarButtonItem = buttonItem colorSwitchButton = buttonItem useOriginalColors = false } private func createNewImageView(x:CGFloat, y: CGFloat, image: UIImage, imageColorTransformType: ImageView.ImageColorTransformType) { let imageView = ImageView(frame: CGRect(x: x, y: y, width: 40, height: 40)) imageView.image = image imageView.imageColorTransformType = imageColorTransformType imageViews.append(imageView) view.addSubview(imageView) } private var _useOriginalColors = false private var useOriginalColors: Bool { set(value) { _useOriginalColors = value if (value) { navigationItem.title = "Original colors" for imageView in imageViews { switch imageView.imageColorTransformType { case .imageExtension: imageView.image = imageView.image?.imageWithColor(newColor: nil) case .imageViewExtension: imageView.imageColor = nil case .none: break } } } else { navigationItem.title = "Template colors" for imageView in imageViews { switch imageView.imageColorTransformType { case .imageExtension: imageView.image = imageView.image?.imageWithColor(newColor: UIColor.blue) case .imageViewExtension: imageView.imageColor = UIColor.green case .none: break } } } } get { return _useOriginalColors } } @objc func colorSwitchButtonTouchedUpInside(_ sender: Any) { useOriginalColors = !useOriginalColors } } 

Storyboard

enter image description here

Result

enter image description here enter image description here

+4
Nov 30 '16 at 9:23
source share

Swift 3 + Interface Constructor (storyboard)

If you added UIImageView to the interface builder:

 myIcon.image = myIcon.image!.withRenderingMode(UIImageRenderingMode.alwaysTemplate) myIcon.tintColor = UIColor.red // your color 

where myIcon is the exit from your storyboard, for example: @IBOutlet weak var myIcon: UIImageView!

0
Dec 09 '16 at 20:36
source share



All Articles