Cambiar el color de png en los botones – ios

Tengo un set de icons que he creado que son transparentes PNG blancos:

introduzca la descripción de la imagen aquí

Y lo que me gustaría hacer es poderlas tintas a otros colors. Tal como azul, gris, etc.

Me he dado count de que 'clic / tapped' cambian automáticamente a un gris. Entonces supongo que puedo cambiar ese gris a lo que quiera con un toque o con su estado normal:

introduzca la descripción de la imagen aquí

¿Cuál sería la mejor manera de lograr esto?

El código siguiente establecerá el color del tinte para el estado normal del button:

let origImage = UIImage(named: "imageName"); let tintedImage = origImage?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate) btn.setImage(tintedImage, forState: .Normal) btn.tintColor = UIColor.networkingColor() 

Puede cambiar el color del tinte según su necesidad cuando el estado cambia para el button.

Edit: actualizado para Swift3

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

iOS 7 introdujo una propiedad llamada tintColor para vistas (incluida UIImageView). Sin embargo, también debe configurar el tipo de representación en el UIImage para que tenga algún efecto.

 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]; 

Esto debería producir el efecto que está buscando en un estado pnetworkingeterminado.

Para cambiar el tinte de la image ( selección , image clásica , foto ) use eso:

Ejemplo de image: introduzca la descripción de la imagen aquí introduzca la descripción de la imagen aquí

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! } } 

Puede usar esta extensión:

 extension UIImage { func maskWith(color: UIColor) -> UIImage { 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!) color.setFill() context.fill(rect) let newImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return newImage } } 

Si utiliza catálogos de activos, puede configurar el activo de image para que se represente en modo plantilla. Después de eso, puede configurar el tintColor del button en Interface Builder (o en el código) y debería tomar.

Si está configurando la image para un button, simplemente vaya al inspector de attributes y cambie el tipo de button al sistema. Luego configure la image y cambie el color del tinte. El color de la image cambiará. Si no se realizó, verifique el tipo de button.