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?
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
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
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.
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()
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".
Wenn Sie nun button.tintColor = UIColor.red
setzen, wird Ihre Schaltfläche rot angezeigt.
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
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];
Swift 4 mit customType:
let button = UIButton(frame: aRectHere)
let buttonImage = UIImage(named: "imageName")
button.setImage(buttonImage?.withRenderingMode(.alwaysTemplate), for: .normal)
button.tintColor = .white
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.).
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);
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 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)
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())