Imagen de color Tinte UIButton

Noté que cuando coloco un blanco o negro UIImageen un UISegmentedControlcolor, lo enmascara automáticamente para que coincida con el tono del control segmentado. Pensé que esto era realmente genial, y me preguntaba si podría hacer esto también en otro lugar. Por ejemplo, tengo un montón de botones que tienen una forma uniforme pero colores variados. En lugar de hacer un PNG para cada botón, ¿podría de alguna manera usar esta máscara de color para usar la misma imagen para todos ellos, pero luego establecer un color de tinte o algo para cambiar su color real?

A partir de iOS 7, hay un nuevo método UIImagepara especificar el modo de representación. El uso del modo de representación UIImageRenderingModeAlwaysTemplatepermitirá que el color de la imagen sea controlado por el color de tinte del botón.

C objetivo

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

Rápido

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

Como Ric ya mencionó en su publicación , puede configurar el modo de representación en el código, también puede hacerlo directamente en el catálogo de imágenes, vea la imagen adjunta a continuación. Sólo hay que establecer la Render AsaTemplate Image

Advertencia : he tenido problemas con iOS 7 y este enfoque. Entonces, si usa iOS 7 también, es posible que también desee hacerlo en código, como se describe aquí .

Los botones personalizados aparecen en sus respectivos colores de imagen. Al establecer el tipo de botón en "Sistema" en el guión gráfico (o UIButtonTypeSystemen el código), la imagen del botón tendrá el color de tinte predeterminado.

(probado en iOS9, Xcode 7.3)

Debe establecer el modo de representación de imagen UIImageRenderingModeAlwaysTemplateen para que tintColorafecte el UIImage. Aquí está la solución en 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

Si tiene un botón personalizado con una imagen de fondo. Puede configurar el color de tinte de su botón y anular la imagen con los siguientes.

En los activos, seleccione el fondo del botón que desea establecer el color de tinte.

En el inspector de atributos de la imagen, configure el valor de representación como "Imagen de plantilla"

Ahora, cada vez que configure button.tintColor = UIColor.redsu botón, se mostrará en rojo.

En Swift puedes hacerlo así:

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

Luego, en su punto de vista

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

Y para modificar el color

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

EDITAR Xcode 8 ya se puede también sólo el modo de representación de la imagen en sus .xcassets a plantilla de la imagen y entonces no necesita declarar específicamente en el var exampleImagemás

No estoy seguro de lo que quiere exactamente, pero este método de categoría enmascarará un UIImage con un color específico para que pueda tener una sola imagen y cambiar su color a lo que desee.

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

Importe la categoría ImageUtils y haga algo como esto ...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

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

Swift 4 con customType:

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

Para 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 :

Esta solución podría ser cómoda si ya ha configurado su imagen a través del generador de interfaces xCode. Básicamente tiene una extensión para colorear una imagen:

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
    }
}

Luego, puede preparar esta extensión UIButton para colorear la imagen para un estado particular:

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)
        }
    }
}

Uso:

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

PS (funciona bien también en las celdas de la tabla, no necesita llamar al setNeedDisplay()método, el cambio de color es inmediato debido a la extensión UIImage ..

Si desea enmascarar manualmente su imagen, aquí hay un código actualizado que funciona con pantallas de retina

- (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;
}

Deberías intentarlo

Después de configurar el marco

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)

Cambiar la imagen del botón o el color de tinte de la vista de imagen Swift:

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

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

Nada de lo anterior funcionó para mí, porque el tinte se borró después de hacer clic. Tuve que usar

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