Cambiare il colore dei png in pulsanti - ios

Question

ho una serie di icone che ho creato che sono trasparenti PNG bianchi:

E quello che mi piace fare è essere in grado per tingerli ad altri colori. Come blu, grigio, ecc.

Ho notato che "cliccato/toccato" cambia automaticamente in grigio. Quindi presumo che posso cambiare quel grigio a tutto ciò che mi piace o con un rubinetto o suo stato normale:

Quale sarebbe il modo migliore per raggiungere questo obiettivo?

Answer 1

seguente codice impostare il colore della tinta per il normale stato di pulsante:

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

È possibile cambiare il colore della tinta base alle vostre necessità in caso di modifiche di stato per tasto.

Edit: aggiornato per Swift3

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

Answer 2

iOS 7 ha introdotto una proprietà denominata tintColor per le viste (incluso UIImageView). Tuttavia, devi anche impostare il tipo di rendering su UIImage per fare in modo che abbia effetto.

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

Questo dovrebbe produrre l'effetto desiderato in uno stato predefinito.

Answer 3

Per cambiare la tinta delle immagini (raccogliere, immagine classica, foto) utilizzare che:

immagine Esempio:

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

} 

Answer 4

È possibile utilizzare questa estensione:

extension UIImage { 

    func mask(with color: UIColor) -> UIImage { 
     UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale) 
     defer { UIGraphicsEndImageContext() } 

     guard let context = UIGraphicsGetCurrentContext() else { return self } 
     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) 
     guard let mask = self.cgImage else { return self } 
     context.clip(to: rect, mask: mask) 

     color.setFill() 
     context.fill(rect) 

     guard let newImage = UIGraphicsGetImageFromCurrentImageContext() else { return self } 
     return newImage 
    } 
} 

Answer 5

Se si utilizzano i cataloghi delle risorse, è possibile impostare la risorsa immagine stessa per il rendering in modalità modello. Dopodiché puoi impostare tintColor del pulsante in Interface Builder (o nel codice) e questo dovrebbe avvenire.

Answer 6

Se si imposta l'immagine per un pulsante, basta andare a inspector attributi e cambiare il tipo di pulsante in sistema. Quindi imposta l'immagine e cambia il colore della tinta. Il colore dell'immagine cambierà. Se non è stato eseguito, controlla il tipo di pulsante.

Answer 7

Swift 4

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