Farbtönung UIButton Image

Ich bemerkte , dass , wenn ich ein weißen oder schwarzen Platz UIImagein eine UISegmentedControlautomatisch Farbmasken es den Farbton der segmentierten Kontrolle anzupassen. Ich fand das wirklich cool und fragte mich, ob ich das auch woanders machen könnte. Zum Beispiel habe ich eine Reihe von Knöpfen, die eine einheitliche Form, aber unterschiedliche Farben haben. Könnte ich, anstatt für jede Schaltfläche ein PNG zu erstellen, diese Farbmaskierung verwenden, um für alle das gleiche Bild zu verwenden, aber dann eine Farbtonfarbe oder etwas anderes festlegen, um ihre tatsächliche Farbe zu ändern?

Ab iOS 7 gibt es eine neue Methode UIImagezum Festlegen des Rendermodus. Wenn Sie den Rendering-Modus verwenden, kann UIImageRenderingModeAlwaysTemplatedie Bildfarbe durch die Farbtonfarbe der Schaltfläche gesteuert werden.

Ziel c

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [[UIImage imageNamed:@"image_name"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[button setImage:image forState:UIControlStateNormal]; 
button.tintColor = [UIColor redColor];

Schnell

let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red

Wie Ric bereits in seinem Beitrag erwähnt hat, können Sie den Rendermodus im Code einstellen. Sie können dies auch direkt im Bildkatalog tun, siehe beigefügtes Bild unten. Stellen Sie einfach das Render AsaufTemplate Image

Vorsichtsmaßnahme Ich hatte Probleme mit iOS 7 und diesem Ansatz. Wenn Sie also auch iOS 7 verwenden, möchten Sie dies möglicherweise auch im Code tun, um sicherzugehen, wie hier beschrieben .

Benutzerdefinierte Schaltflächen werden in ihren jeweiligen Bildfarben angezeigt. Wenn Sie den Schaltflächentyp im Storyboard (oder UIButtonTypeSystemim Code) auf "System" setzen , wird das Bild der Schaltfläche mit der Standardfarbe getönt.

(getestet auf iOS9, Xcode 7.3)

Sie müssen den Bildwiedergabemodus einzustellen , UIImageRenderingModeAlwaysTemplateum das zu haben , tintColordie UIImage beeinflussen. Hier ist die Lösung in Swift:

let image = UIImage(named: "image-name")
let button = UIButton()
button.setImage(image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), forState: .Normal)
button.tintColor = UIColor.whiteColor()

SWIFT 4x

button.setImage(image.withRenderingMode(UIImage.RenderingMode.alwaysTemplate), for: .normal)
button.tintColor = UIColor.blue

Wenn Sie eine benutzerdefinierte Schaltfläche mit einem Hintergrundbild haben. Sie können die Farbtonfarbe Ihrer Schaltfläche festlegen und das Bild wie folgt überschreiben.

Wählen Sie in Assets den Schaltflächenhintergrund aus, für den Sie die Farbtonfarbe festlegen möchten.

Stellen Sie im Attributinspektor des Bildes den Wert für "Vorlagenbild" ein.

Wenn Sie jetzt Ihre button.tintColor = UIColor.redTaste einstellen, wird sie rot angezeigt.

In Swift können Sie das so machen:

var exampleImage = UIImage(named: "ExampleImage.png")?.imageWithRenderingMode(.AlwaysTemplate)

Dann in Ihrer viewDidLoad

exampleButtonOutlet.setImage(exampleImage, forState: UIControlState.Normal)

Und um die Farbe zu ändern

exampleButtonOutlet.tintColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) //your color

EDIT Xcode 8 Jetzt können Sie auch nur die Rendering - Modus des Bildes in Ihrem .xcassets auf Vorlage Bild und dann brauchen Sie nicht zu erklären , es speziell im var exampleImagemehr

Sie wissen nicht genau, was Sie möchten, aber diese Kategoriemethode maskiert ein UIImage mit einer bestimmten Farbe, sodass Sie ein einzelnes Bild haben und seine Farbe nach Belieben ändern können.

ImageUtils.h

- (UIImage *) maskWithColor:(UIColor *)color;

ImageUtils.m

-(UIImage *) maskWithColor:(UIColor *)color 
{
    CGImageRef maskImage = self.CGImage;
    CGFloat width = self.size.width;
    CGFloat height = self.size.height;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);    
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
    UIImage *coloredImage = [UIImage imageWithCGImage:cImage];

    CGContextRelease(bitmapContext);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(cImage);

    return coloredImage;    
}

Importieren Sie die Kategorie ImageUtils und machen Sie so etwas ...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

UIImage *redIcon = [icon maskWithColor:UIColor.redColor];
UIImage *blueIcon = [icon maskWithColor:UIColor.blueColor];

Swift 4 mit customType:

let button = UIButton(frame: aRectHere)
    let buttonImage = UIImage(named: "imageName")
    button.setImage(buttonImage?.withRenderingMode(.alwaysTemplate), for: .normal)
    button.tintColor = .white

Für Xamarin.iOS (C #):

        UIButton messagesButton = new UIButton(UIButtonType.Custom);
        UIImage icon = UIImage.FromBundle("Images/icon.png");
        messagesButton.SetImage(icon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
        messagesButton.TintColor = UIColor.White;
        messagesButton.Frame = new RectangleF(0, 0, 25, 25);

Swift 3 :

Diese Lösung kann bequem sein, wenn Sie Ihr Image bereits über den xCode Interface Builder festgelegt haben. Grundsätzlich haben Sie eine Erweiterung, um ein Bild einzufärben:

extension UIImage {
    public func image(withTintColor color: UIColor) -> UIImage{
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: self.size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(CGBlendMode.normal)
        let rect: CGRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
        context.clip(to: rect, mask: self.cgImage!)
        color.setFill()
        context.fill(rect)
        let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }
}

Anschließend können Sie diese UIButton- Erweiterung vorbereiten , um das Bild für einen bestimmten Status einzufärben :

extension UIButton {
    func imageWith(color:UIColor, for: UIControlState) {
        if let imageForState = self.image(for: state) {
            self.image(for: .normal)?.withRenderingMode(.alwaysTemplate)
            let colorizedImage = imageForState.image(withTintColor: color)
            self.setImage(colorizedImage, for: state)
        }
    }
}

Verwendungszweck:

myButton.imageWith(.red, for: .normal)

PS (funktioniert auch in Tabellenzellen gut, Sie müssen die setNeedDisplay()Methode nicht aufrufen , die Änderung der Farbe erfolgt sofort aufgrund der UIImage- Erweiterung.

Wenn Sie Ihr Bild manuell maskieren möchten, finden Sie hier aktualisierten Code, der mit Retina-Bildschirmen funktioniert

- (UIImage *)maskWithColor:(UIColor *)color
{
    CGImageRef maskImage = self.CGImage;
    CGFloat width = self.size.width * self.scale;
    CGFloat height = self.size.height * self.scale;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
    UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:self.scale orientation:self.imageOrientation];

    CGContextRelease(bitmapContext);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(cImage);

    return coloredImage;
}

Du solltest es versuchen

Nach dem Einstellen des Rahmens

NSArray *arr10 =[NSArray arrayWithObjects:btn1,btn2,nil];
for(UIButton *btn10 in arr10)
{
CAGradientLayer *btnGradient2 = [CAGradientLayer layer];
btnGradient2.frame = btn10.bounds;

btnGradient2.colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithRed:151.0/255.0f green:206.0/255.5 blue:99.0/255.0 alpha:1] CGColor],
                       (id)[[UIColor colorWithRed:126.0/255.0f green:192.0/255.5 blue:65.0/255.0 alpha:1]CGColor],
                       nil];
[btn10.layer insertSublayer:btnGradient2 atIndex:0];

}

Swift 3.0

    let image = UIImage(named:"NoConnection")!

 warningButton = UIButton(type: .system)        
    warningButton.setImage(image, for: .normal)
    warningButton.tintColor = UIColor.lightText
    warningButton.frame = CGRect(origin: CGPoint(x:-100,y:0), size: CGSize(width: 59, height: 56))

    self.addSubview(warningButton)

Ändern Sie das Farbtonbild oder die Farbfarbe der Bildansicht. Schnell:

btn.imageView?.image = btn.imageView?.image?.withRenderingMode(.alwaysTemplate)

btn.imageView?.tintColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)

Keiner der oben genannten Punkte hat bei mir funktioniert, da der Farbton nach dem Klicken gelöscht wurde. Ich musste benutzen

button.setImageTintColor(Palette.darkGray(), for: UIControlState())