it-swarm.com.de

Farbton UIButton-Bild

Ich habe festgestellt, dass wenn ich eine weiße oder schwarze UIImage in eine UISegmentedControl setze, diese automatisch farblich maskiert wird, um sie an den Farbton des segmentierten Steuerelements anzupassen. Ich fand das wirklich cool und fragte mich, ob ich das auch anderswo machen könnte. Zum Beispiel habe ich eine Reihe von Knöpfen, die eine einheitliche Form haben, aber unterschiedliche Farben haben. Anstatt für jede Schaltfläche ein PNG-Bild zu erstellen, könnte ich diese Farbmaskierung verwenden, um dasselbe Bild für alle zu verwenden, aber dann eine Farbtonfarbe oder etwas, um ihre tatsächliche Farbe zu ändern?

238
Logan Shire

Ab iOS 7 gibt es in UIImage eine neue Methode, um den Rendermodus festzulegen. Bei Verwendung des Wiedergabemodus UIImageRenderingModeAlwaysTemplate kann die 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
524
Ric Santos

Wie Ric bereits in seinem post erwähnt hat, können Sie den Rendermodus im Code einstellen. Dies können Sie auch direkt im Bildkatalog tun (siehe Bild unten). Setzen Sie einfach den Render As auf Template Image

enter image description here

Caveat Ich hatte Probleme mit iOS 7 und diesem Ansatz. Wenn Sie also auch iOS 7 verwenden, sollten Sie dies auch im Code tun, um sicherzugehen, wie unter hier beschrieben.

203
hashier

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

 Button Type System Renders Icons tinted

(getestet auf iOS9, Xcode 7.3)

68
auco

Sie müssen den Bildwiedergabemodus auf UIImageRenderingModeAlwaysTemplate setzen, damit tintColor den UIImage beeinflusst. 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()
35
Nick Wargnier

Wenn Sie eine benutzerdefinierte Schaltfläche mit einem Hintergrundbild haben. Sie können die Farbtonfarbe Ihrer Schaltfläche einstellen und das Bild mit den folgenden Einstellungen überschreiben.

Wählen Sie in Assets den Hintergrund der Schaltfläche aus, für die Sie die Farbtonfarbe einstellen möchten.

Setzen Sie im Attribut-Inspector des Bilds den Wert als "Vorlagenbild".

 enter image description here

Wenn Sie nun button.tintColor = UIColor.red setzen, wird Ihre Schaltfläche rot angezeigt. 

23
Ilker Baltaci

In Swift kann man das so machen:

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

Dann in Ihrem viewDidLoad

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

Und die Farbe ändern

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

EDIT Xcode 8 Jetzt können Sie auch nur den Rendering-Modus des Bildes in Ihren .xcassets als Vorlagenbild definieren und müssen es nicht mehr ausdrücklich im var exampleImage angeben

17
Fri3ndlyGerman

Sie wissen nicht genau, was Sie wollen, aber diese Kategoriemethode maskiert einen UIImage mit einer angegebenen Farbe, sodass Sie ein einzelnes Bild haben und dessen Farbe beliebig ä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 ImageUtils-Kategorie 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];
14
Kirby Todd

Swift 4 mit customType: 

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

Swift 3 :

Diese Lösung kann nützlich sein, wenn Sie Ihr Image bereits mit dem 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
    }
}

Dann können Sie diese Erweiterung UIButton vorbereiten, um das Bild für einen bestimmten Status zu kolorieren:

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)

P.S. (Funktioniert auch in Tabellenzellen gut, Sie müssen die setNeedDisplay()-Methode nicht aufrufen. Die Änderung der Farbe ist aufgrund der Erweiterung UIImage sofortig.).

4

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);
4

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;
}
3
Josh Bernfeld

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

}
2
guptha

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)
1
Jad

Ändern Sie die Farbe der Schaltflächenbilder oder Bildansicht Swift:

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

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

Keines der oben genannten Verfahren hat für mich funktioniert, da der Farbton nach dem Klicken gelöscht wurde. Musste ich verwenden

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