Wie kann ich die Bildfarbe in iOS und WatchKit ändern?

Question

Ich habe ein UIImageView namens "theImageView", mit UIImage in einer einzigen Farbe (transparenter Hintergrund) wie das linke schwarze Herz unten. Wie kann ich die Farbtönung dieses Bildes programmgesteuert in iOS 7 oder höher ändern, entsprechend der Farbtönungsmethode, die in den iOS 7+ Navigationsleisten-Icons verwendet wird?

Kann diese Methode auch in WatchKit für eine Apple Watch-App funktionieren?

Answer 1

iOS
Für eine iOS-App in Swift 3, 4 oder 5:

theImageView.image = theImageView.image?.withRenderingMode(.alwaysTemplate)
theImageView.tintColor = UIColor.red

Für Swift 2:

theImageView.image = theImageView.image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
theImageView.tintColor = UIColor.redColor()

Die moderne Objective-C-Lösung lautet:

theImageView.image = [theImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[theImageView setTintColor:[UIColor redColor]];

---

Watchkit
In WatchKit für Apple Watch-Apps können Sie die Farbe für ein Vorlagenbild festlegen.

1. Sie müssen Ihr Bild einem Asset-Katalog in Ihrer WatchKit-App hinzufügen und das Bildset so einstellen, dass es im Attributinspektor als Vorlagenbild gerendert wird. Im Gegensatz zu einer iPhone-App können Sie die Vorlagenrasterung im Code in der WatchKit-Erweiterung derzeit nicht einstellen.
2. Legen Sie dieses Bild für Ihre WKInterfaceImage im Interface Builder Ihrer App fest.
3. Erstellen Sie ein IBOutlet in Ihrem WKInterfaceController für das WKInterfaceImage namens 'theImage'...

Um dann die Farbe in Swift 3 oder 4 zu setzen:

theImage.setTintColor(UIColor.red)

Swift 2:

theImage.setTintColor(UIColor.redColor())

Um dann die Farbe in Objective-C zu setzen:

[self.theImage setTintColor:[UIColor redColor]];

Wenn Sie ein Vorlagenbild verwenden und keine Farbe anwenden, wird der globale Farbton für Ihre WatchKit-App angewendet. Wenn Sie keinen globalen Farbton festgelegt haben, wird theImage standardmäßig hellblau eingefärbt, wenn es als Vorlagenbild verwendet wird.

Answer 2

Im Storyboard und Bild Assets kannst du dies auch ändern:

Aktualisiere den Rendiermodus auf Vorlagenbild

Aktualisiere die Farbgebung in Ansichten.

Answer 3

Ich musste dies in Swift mithilfe einer extension machen.

Ich dachte, ich würde teilen, wie ich es gemacht habe:

extension UIImage {
    func imageWithColor(color1: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        color1.setFill()

        let context = UIGraphicsGetCurrentContext() as CGContext?
        CGContextTranslateCTM(context, 0, self.size.height)
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, CGBlendMode.Normal)

        let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
        CGContextClipToMask(context, rect, self.CGImage)
        CGContextFillRect(context, rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext() as UIImage?
        UIGraphicsEndImageContext()

        return newImage!
    }
}

Verwendung:

theImageView.image = theImageView.image.imageWithColor(UIColor.redColor())

Swift 4

extension UIImage {
    func imageWithColor(color1: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        color1.setFill()

        let context = UIGraphicsGetCurrentContext()
        context?.translateBy(x: 0, y: self.size.height)
        context?.scaleBy(x: 1.0, y: -1.0)
        context?.setBlendMode(CGBlendMode.normal)

        let rect = CGRect(origin: .zero, size: CGSize(width: self.size.width, height: self.size.height))
        context?.clip(to: rect, mask: self.cgImage!)
        context?.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}

Verwendung:

theImageView.image = theImageView.image?.imageWithColor(color1: UIColor.red)

Answer 4

Hier ist eine Kategorie, die das Problem lösen sollte

@interface UIImage(Overlay)
@end

@implementation UIImage(Overlay)

- (UIImage *)imageWithColor:(UIColor *)color1
{
        UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextTranslateCTM(context, 0, self.size.height);
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, kCGBlendModeNormal);
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
        CGContextClipToMask(context, rect, self.CGImage);
        [color1 setFill];
        CGContextFillRect(context, rect);
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return newImage;
}
@end

so würdest du:

theImageView.image = [theImageView.image imageWithColor:[UIColor redColor]];

Answer 5

Wenn jemand eine Lösung ohne UIImageView möchte:

// (Swift 3)
extension UIImage {
    func einfärben(mit farbe: UIColor) -> UIImage {
        var bild = withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        farbe.set()

        bild.draw(in: CGRect(origin: .zero, size: size))
        bild = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return bild
    }
}