У мене є набір значків, які я створив, які є прозорими білими PNG:
І що я хотів би зробити, це мати можливість тонувати їх в інші кольори. Такі як синій, сірий тощо.
Я помітив, що "клацання / натискання" вони автоматично змінюються на сірий. Тому я припускаю, що я можу змінити цей сірий на будь-який, що мені подобається, або краном, або його нормальним станом:
Який найкращий спосіб досягти цього?
Відповіді:
Наступний код встановить колір відтінку для нормального стану кнопки:
Для Swift 4 та новіших версій:
let origImage = UIImage(named: "imageName")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
btn.setImage(tintedImage, for: .normal)
btn.tintColor = .redВи можете змінити колір відтінку відповідно до ваших потреб, коли стан кнопки змінюється.
Для Swift 3:
let origImage = UIImage(named: "imageName")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
btn.setImage(tintedImage, forState: .normal)
btn.tintColor = .redColorДля Swift 2: див. Історію редагувань.
iOS 7 представив властивість під назвою tintColor для переглядів (включаючи UIImageView). Однак вам також потрібно встановити тип візуалізації на 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];Це має дати ефект, який ви шукаєте в стані за замовчуванням.
Ви можете використовувати це розширення:
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
}
}
}Для зміни відтінку зображення ( підбір , класичне зображення , фото ) використовуйте таке:
Приклад зображення:
Стрімкий 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
Стрімкий 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!
}
}Свіфт 4 або 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)Якщо ви використовуєте каталоги об’єктів, ви можете встановити, що сам об’єкт зображення відображатиметься в режимі шаблону. Після цього ви можете встановити tintColor кнопки в Interface Builder (або в коді), і він повинен прийняти.
Стрімкий 4
let origImage = UIImage(named: "check")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
buttons[0].setImage(tintedImage, for: .normal)
buttons[0].tintColor = .redЯкщо ви використовуєте каталоги об’єктів, ви можете встановити, що сам об’єкт зображення відображатиметься в режимі шаблону. Після цього ви можете встановити tintColor кнопки в Interface Builder (або в коді), і він повинен прийняти.
