ios - how - Cómo teñir las imágenes de fondo de un UIButton programáticamente y dinámicamente?

swift button action

Question

Estoy trabajando en una aplicación, o mejor dicho, en un "marco" reutilizable que me complace compartir una vez que funcione. Dentro de esta aplicación, el usuario debe poder elegir de una lista de temas de color. Por lo tanto, la aplicación debe poder matizar sus elementos de IU de una forma bastante dinámica.

Para los botones, todo el tinte no funciona. Las imágenes de fondo correctamente teñidas se deben suministrar aquí. Pero preparar un conjunto de imágenes de fondo para cada uno de ellos es solo el segundo mejor. No es lo suficientemente dinámico y flexible.

Al final, una solución puede consistir en proporcionar una imagen graduada monocromática (gris) para el estado seleccionado y normal y teñir esa imagen mediante programación mediante CoreGraphics u OpenGL. Pero francamente, no sé por dónde empezar. ¿Cómo debería verse el degradado y cómo lo matizaría programáticamente en un color dado?

Se aplica bastante a UISegmentedControls, solo un poco más complicado. :) Cualquier solución genérica que cubra UISegementedControls también es muy apreciada.

Answer 1

Aquí hay una respuesta parcial a su pregunta. Este es un método de ayuda que escribí que tiñe una imagen de escala de grises:

// baseImage is the grey scale image. color is the desired tint color
+ (UIImage *)tintImage:(UIImage *)baseImage withColor:(UIColor *)color {
    UIGraphicsBeginImageContextWithOptions(baseImage.size, NO, baseImage.scale);

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGRect area = CGRectMake(0, 0, baseImage.size.width, baseImage.size.height);

    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -area.size.height);

    CGContextSaveGState(ctx);
    CGContextClipToMask(ctx, area, baseImage.CGImage);

    [color set];
    CGContextFillRect(ctx, area);
    CGContextRestoreGState(ctx);

    CGContextSetBlendMode(ctx, kCGBlendModeOverlay);

    CGContextDrawImage(ctx, area, baseImage.CGImage);

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    // If the original image was stretchable, make the new image stretchable
    if (baseImage.leftCapWidth || baseImage.topCapHeight) {
        newImage = [newImage stretchableImageWithLeftCapWidth:baseImage.leftCapWidth topCapHeight:baseImage.topCapHeight];
    }

    return newImage;
}

Answer 2

Hice una categoría de UIImage después de otra publicación que no puedo encontrar que toma la imagen y la matiza de la siguiente manera:

- (UIImage *)tintedImageWithColor:(UIColor *)tintColor {
    UIGraphicsBeginImageContextWithOptions(self.size, NO, [[UIScreen mainScreen] scale]);
    CGContextRef context = UIGraphicsGetCurrentContext();


    CGContextTranslateCTM(context, 0, self.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);

    // draw alpha-mask
    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGContextDrawImage(context, rect, self.CGImage);

    // draw tint color, preserving alpha values of original image
    CGContextSetBlendMode(context, kCGBlendModeSourceIn);
    [tintColor setFill];
    CGContextFillRect(context, rect);

    UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return coloredImage;
}

Esto tomará la imagen y completará todas las áreas con un valor alfa con el color dado.

Answer 3

Creé una categoría UIButton con el código de horsejockey: https://github.com/filipstefansson/UITintedButton

Aquí están los nuevos métodos:

-(void)setImageTintColor:(UIColor *)color;
-(void)setBackgroundTintColor:(UIColor *)color forState:(UIControlState)state;
+(void)tintButtonImages:(NSArray *)buttons withColor:(UIColor *)color;
+(void)tintButtonBackgrounds:(NSArray *)buttons withColor:(UIColor *)color forState:(UIControlState)state;

Answer 4

Modifico algunas cosas de "horsejockey":

+(UIImage *)getTintedImage:(UIImage*)image withColor:(UIColor *)tintColor
{
    UIGraphicsBeginImageContextWithOptions(image.size, NO, [[UIScreen mainScreen] scale]);
    CGContextRef context = UIGraphicsGetCurrentContext();


    CGContextTranslateCTM(context, 0, image.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);

    // draw alpha-mask
    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGContextDrawImage(context, rect, image.CGImage);

    // draw tint color, preserving alpha values of original image
    CGContextSetBlendMode(context, kCGBlendModeSourceIn);
    [tintColor setFill];
    CGContextFillRect(context, rect);

    UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return coloredImage;
}

Answer 5

En iOS7 puedes usar el método imagedWithRenderingMode: junto con el método setTintColor:

Pero, asegúrese de usar UIImageRenderingModeAlwaysTemplate ya que reemplaza todos los colores no transparentes en un UIImage con el color del tinte. El valor predeterminado es UIImageRenderingModeAutomatic .

UIImageRenderingModeAlwaysTemplate

Always draw the image as a template image, ignoring its color information.

Ejemplo:

    [myButton setTintColor:[UIColor colorWithRed:0 green:0.8196f blue:0.0039f alpha:1]];

    UIImage * image = [myButton.currentBackgroundImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

    [myButton setBackgroundImage:image forState:UIControlStateNormal];

Answer 6

Te remito a una pregunta de SO que parece ser lo que estás buscando y tiene una respuesta.

Cómo teñir una imagen PNG transparente en iPhone?

¡Buena suerte!

Solo un pequeño detalle en el encabezado de su pregunta ... ¿Quiere decir "Cómo" y no "Bien"?