在 ios 中更改 png 的颜色

我创建了一组透明的白色 PNG 图标:

enter image description here

我想做的是能够把它们调成其他颜色,比如蓝色、灰色等等。

我注意到“点击/点击”会自动变成灰色。所以我假设我可以通过一个轻拍或者它的正常状态来改变这个灰色:

enter image description here

实现这一目标的最佳途径是什么?

103234 次浏览

IOS7为视图(包括 UIImageView)引入了一个名为 tintColor 的属性。但是,您还需要在 UIImage 上设置呈现类型,这样才能产生任何效果。

UIImage *originalImage = [UIImage imageNamed:@"image.png"];
UIImage *tintedImage = [originalImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIImageView *imageView = [[UIImageView alloc] initWithImage:tintedImage];


imageView.tintColor = [UIColor grayColor];
[self.view addSubview:imageView];

这应该会产生默认状态下的效果。

下面的代码将为按钮的正常状态设置色彩:

对于 Swift 4和更新的版本:

let origImage = UIImage(named: "imageName")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
btn.setImage(tintedImage, for: .normal)
btn.tintColor = .red

当按钮状态改变时,您可以根据需要改变色彩。


老版本

对于斯威夫特3:

let origImage = UIImage(named: "imageName")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
btn.setImage(tintedImage, forState: .normal)
btn.tintColor = .redColor

对于斯威夫特2: 参见修订历史。

对于改变图像色彩(选吧经典形象照片)使用:

示例图片: enter image description here enter image description here

Swift 2

public extension UIImage {
/**
Tint, Colorize image with given tint color<br><br>
This is similar to Photoshop's "Color" layer blend mode<br><br>
This is perfect for non-greyscale source images, and images that have both highlights and shadows that should be preserved<br><br>
white will stay white and black will stay black as the lightness of the image is preserved<br><br>


<img src="http://yannickstephan.com/easyhelper/tint1.png" height="70" width="120"/>


**To**


<img src="http://yannickstephan.com/easyhelper/tint2.png" height="70" width="120"/>


- parameter tintColor: UIColor


- returns: UIImage
*/
public func tintPhoto(tintColor: UIColor) -> UIImage {


return modifiedImage { context, rect in
// draw black background - workaround to preserve color of partially transparent pixels
CGContextSetBlendMode(context, .Normal)
UIColor.blackColor().setFill()
CGContextFillRect(context, rect)


// draw original image
CGContextSetBlendMode(context, .Normal)
CGContextDrawImage(context, rect, self.CGImage)


// tint image (loosing alpha) - the luminosity of the original image is preserved
CGContextSetBlendMode(context, .Color)
tintColor.setFill()
CGContextFillRect(context, rect)


// mask by alpha values of original image
CGContextSetBlendMode(context, .DestinationIn)
CGContextDrawImage(context, rect, self.CGImage)
}
}
/**
Tint Picto to color


- parameter fillColor: UIColor


- returns: UIImage
*/
public func tintPicto(fillColor: UIColor) -> UIImage {


return modifiedImage { context, rect in
// draw tint color
CGContextSetBlendMode(context, .Normal)
fillColor.setFill()
CGContextFillRect(context, rect)


// mask by alpha values of original image
CGContextSetBlendMode(context, .DestinationIn)
CGContextDrawImage(context, rect, self.CGImage)
}
}
/**
Modified Image Context, apply modification on image


- parameter draw: (CGContext, CGRect) -> ())


- returns: UIImage
*/
private func modifiedImage(@noescape draw: (CGContext, CGRect) -> ()) -> UIImage {


// using scale correctly preserves retina images
UIGraphicsBeginImageContextWithOptions(size, false, scale)
let context: CGContext! = UIGraphicsGetCurrentContext()
assert(context != nil)


// correctly rotate image
CGContextTranslateCTM(context, 0, size.height);
CGContextScaleCTM(context, 1.0, -1.0);


let rect = CGRectMake(0.0, 0.0, size.width, size.height)


draw(context, rect)


let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}

UPD

Swift 3

extension UIImage {


/**
Tint, Colorize image with given tint color<br><br>
This is similar to Photoshop's "Color" layer blend mode<br><br>
This is perfect for non-greyscale source images, and images that have both highlights and shadows that should be preserved<br><br>
white will stay white and black will stay black as the lightness of the image is preserved<br><br>


<img src="http://yannickstephan.com/easyhelper/tint1.png" height="70" width="120"/>


**To**


<img src="http://yannickstephan.com/easyhelper/tint2.png" height="70" width="120"/>


- parameter tintColor: UIColor


- returns: UIImage
*/
func tintPhoto(_ tintColor: UIColor) -> 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)
tintColor.setFill()
context.fill(rect)


// mask by alpha values of original image
context.setBlendMode(.destinationIn)
context.draw(context.makeImage()!, in: rect)
}
}


/**
Tint Picto to color


- parameter fillColor: UIColor


- returns: UIImage
*/
func tintPicto(_ fillColor: UIColor) -> UIImage {


return modifiedImage { context, rect in
// draw tint color
context.setBlendMode(.normal)
fillColor.setFill()
context.fill(rect)


// mask by alpha values of original image
context.setBlendMode(.destinationIn)
context.draw(cgImage!, in: rect)
}
}


/**
Modified Image Context, apply modification on image


- parameter draw: (CGContext, CGRect) -> ())


- returns: UIImage
*/
fileprivate func modifiedImage(_ draw: (CGContext, CGRect) -> ()) -> 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!
}


}

您可以使用这个扩展:

import UIKit


extension CGContext {


func fill(_ rect: CGRect,
with mask: CGImage,
using color: CGColor) {


saveGState()
defer { restoreGState() }


translateBy(x: 0.0, y: rect.size.height)
scaleBy(x: 1.0, y: -1.0)
setBlendMode(.normal)


clip(to: rect, mask: mask)


setFillColor(color)
fill(rect)
}
}


extension UIImage {


func filled(with color: UIColor) -> UIImage {
let rect = CGRect(origin: .zero, size: self.size)
guard let mask = self.cgImage else { return self }


if #available(iOS 10.0, *) {
let rendererFormat = UIGraphicsImageRendererFormat()
rendererFormat.scale = self.scale


let renderer = UIGraphicsImageRenderer(size: rect.size,
format: rendererFormat)
return renderer.image { context in
context.cgContext.fill(rect,
with: mask,
using: color.cgColor)
}
} else {
UIGraphicsBeginImageContextWithOptions(rect.size,
false,
self.scale)
defer { UIGraphicsEndImageContext() }


guard let context = UIGraphicsGetCurrentContext() else { return self }


context.fill(rect,
with: mask,
using: color.cgColor)
return UIGraphicsGetImageFromCurrentImageContext() ?? self
}
}
}

如果使用资产目录,则可以将图像资产本身设置为以模板模式呈现。之后,你可以设置按钮的 tintColor Interface Builder (或代码) ,它应该采用。

如果您正在为一个按钮设置图像,只需转到属性检查器并将按钮类型更改为系统。然后设置图像和改变色彩颜色。图像的颜色将会改变。如果没有发生,请检查按钮类型。

Swift 4

    let origImage = UIImage(named: "check")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
buttons[0].setImage(tintedImage, for: .normal)
buttons[0].tintColor = .red

如果使用资产目录,则可以将图像资产本身设置为以模板模式呈现。之后,你可以设置按钮的 tintColor Interface Builder (或代码) ,它应该采用。

Swift 4 and 4.2

let img = UIImage.init(named: "buttonName")?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
btn.setImage(img, for: .normal)
btn.tintColor = .gray

enter image description here

Swift 4 or 5

extension UIButton{


func setImageTintColor(_ color: UIColor) {
let tintedImage = self.imageView?.image?.withRenderingMode(.alwaysTemplate)
self.setImage(tintedImage, for: .normal)
self.tintColor = color
}


}

用途:

button.setImage(UIImage(named: "image_name"), for: .normal) // You can set image direct from Storyboard
button.setImageTintColor(UIColor.white)

I found the easiest approach below,

打开资产目录并选择映像,然后转到 属性检查员并将 Render As更改为 Template Image,如下所示

enter image description here

然后在按钮操作方法中添加以下代码

yourButton.tintColor = .gray