ios - Color Tint UIButton Image

iphone ios7

Question

Noté que cuando UISegmentedControl un UIImage blanco o negro en un UISegmentedControl , el color 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 en otro lugar también. 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 usar este enmascaramiento de color de alguna manera para usar la misma imagen para todos ellos y luego establecer un color de tinte o algo para cambiar su color real?

Answer 1

A partir de iOS 7, hay un nuevo método en UIImage para especificar el modo de representación. El uso del modo de reproducción UIImageRenderingModeAlwaysTemplate permitirá que el color de la imagen se controle mediante el color del 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

Answer 2

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

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

btn.imageView? .tintColor = #colorLiteral (rojo: 0, verde: 0, azul: 0, alfa: 1)

Answer 3

Como Ric ya mencionó en su post , puede configurar el modo de procesamiento en código, también puede hacerlo directamente en el catálogo de imágenes, vea la imagen adjunta a continuación. Solo configura el Render As de Template Image

Advertencia , he tenido problemas con iOS 7 y este enfoque. Por lo tanto, si usa iOS 7, también querrá hacerlo en código para estar seguro, como se describe post .

Answer 4

Debe establecer el modo de representación de la imagen en UIImageRenderingModeAlwaysTemplate para que tintColor afecte a 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()

Answer 5

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

}

Answer 6

En Swift puedes hacerlo así:

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

Luego en tu vistaDidLoad

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

Y modificar el color.

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

EDIT Xcode 8 Ahora puede también solo el modo de renderización de la imagen en sus archivos .x a la Imagen de la plantilla y luego ya no necesita declararlo específicamente en la var exampleImage

Answer 7

Ninguno de los anteriores funcionó para mí, porque el tinte se eliminó después de hacer clic. Tuve que usar

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

Answer 8

No estoy seguro de lo que quieres, pero este método de categoría enmascara un UIImage con un color específico para que puedas tener una sola imagen y cambiar su color a lo que quieras.

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

Importa la categoría ImageUtils y haz algo como esto ...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

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

Answer 9

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

Answer 10

Si desea enmascarar manualmente su imagen, aquí se actualiza el código que funciona con las 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;
}

Answer 11

Si tiene un botón personalizado con una imagen de fondo, puede configurar el color del tinte de su botón y anular la imagen con lo siguiente.

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

En el inspector de atributos de la imagen, el valor se representa como "Imagen de plantilla"

Ahora, cada vez que establezca button.tintColor = UIColor.red su botón se mostrará en rojo.

Answer 12

Swift 4 con customType:

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

Answer 13

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

(probado en iOS9, Xcode 7.3)

Answer 14

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)

Answer 15

Swift 3 :

Esta solución podría ser cómoda si ya ha configurado su imagen a través de xCode interface builder. Básicamente tienes 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 (funcionando bien también en las celdas de la tabla, no necesita llamar al método setNeedDisplay() , el cambio de color es inmediato debido a la extensión UIImage ..