Thay đổi màu sắc của png trong nút - ios

Question

Tôi đã có một tập hợp các biểu tượng mà tôi đã tạo ra được trong suốt PNG trắng:

Và những gì tôi muốn làm là có thể để nhuộm màu cho các màu khác. Chẳng hạn như màu xanh, xám, v.v.

Tôi đã nhận thấy rằng 'nhấp/nhấn' chúng tự động thay đổi thành màu xám. Vì vậy, tôi cho rằng tôi có thể thay đổi điều đó màu xám để bất cứ điều gì tôi thích, hoặc bằng cách chấm hoặc trạng thái bình thường của nó:

Điều gì sẽ là cách tốt nhất để đạt được điều này?

Answer 1

mã sau đây sẽ thiết lập màu sắc màu cho trạng thái bình thường nút:

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

Bạn có thể thay đổi màu sắc màu theo nhu cầu của bạn khi thay đổi trạng thái cho nút.

Edit: Cập nhật cho Swift3

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

Answer 2

iOS 7 đã giới thiệu thuộc tính có tên tintColor cho chế độ xem (bao gồm UIImageView). Tuy nhiên, bạn cũng cần đặt kiểu hiển thị trên UIImage để điều này có hiệu lực.

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

Điều này sẽ tạo ra hiệu ứng bạn đang ở trạng thái mặc định.

Answer 3

Đối với sắc thái thay đổi hình ảnh (chọn, hình ảnh cổ điển, ảnh) sử dụng:

hình ảnh Ví dụ:

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

Bạn có thể sử dụng phần mở rộng này:

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

Nếu bạn sử dụng danh mục nội dung, bạn có thể đặt chính nội dung hình ảnh đó để hiển thị ở chế độ mẫu. Sau đó bạn có thể thiết lập tintColor của nút trong Interface Builder (hoặc trong mã) và nó sẽ mất.

Answer 6

Nếu bạn đang đặt hình ảnh cho một nút, chỉ cần chuyển đến trình kiểm tra thuộc tính và thay đổi loại nút thành hệ thống. Sau đó, đặt hình ảnh và thay đổi màu sắc. Màu của hình ảnh sẽ thay đổi. Nếu nó không diễn ra, hãy kiểm tra loại nút.

Answer 7

Swift 4

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