Come tingere le immagini di sfondo di un UIButton in modo programmatico e dinamico?

Question

Sto lavorando a un'app, o meglio a qualche "framework" riutilizzabile, che sono felice di condividere una volta che funziona. All'interno di questa app l'utente dovrebbe essere in grado di scegliere da un elenco di temi di colore. Pertanto l'app deve essere in grado di colorare i suoi elementi dell'interfaccia utente in qualche modo piuttosto dinamico.

Per i pulsanti tutta la colorazione non funziona. Qui devono essere fornite immagini di sfondo adeguatamente colorate. Ma preparare un set di immagini di sfondo per ognuno di loro è solo il secondo migliore. Non è abbastanza dinamico e flessibile.

Alla fine una soluzione può scendere a fornire una monocromatico (grigio) immagine col gradiente per lo stato selezionato e normale e colorare quell'immagine programmazione utilizzando CoreGraphics o OpenGL. Ma francamente, non so da dove cominciare. Come dovrebbe essere il gradiente e come dovrei quindi programmarlo a livello di codice in un dato colore?

Praticamente si applica a UISegmentedControls, solo un po 'più complicato. :) Qualsiasi soluzione generica che copre anche UISegementedControls è molto apprezzata.

Answer 1

ho fatto una categoria UIImage seguendo un altro post che i cant trovare che prende l'immagine e tinte come segue:

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

Questo prenderà l'immagine e riempirà tutte le aree con un valore alfa con il colore dato.

Answer 2

Ti sto riferendo a una domanda SO che sembra essere ciò che stai cercando e ha una risposta.

How to tint a transparent PNG image in iPhone?

Buona fortuna!

Solo un piccolo dettaglio sulla domanda intestazione ... intendi "come" e non "caldo" giusto?

Answer 3

Ecco una risposta parziale alla tua domanda. Questo è un metodo di supporto che ho scritto che le tinte di un immagine in scala di grigi:

// 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 4

In iOS7 è possibile utilizzare il metodo di imagedWithRenderingMode: in combinazione con il metodo di setTintColor:

Ma, assicurarsi di utilizzare UIImageRenderingModeAlwaysTemplate quanto sostituisce tutti i colori non trasparenti su un UIImage con il colore della tinta. L'impostazione predefinita è UIImageRenderingModeAutomatic.

UIImageRenderingModeAlwaysTemplate

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

Esempio:

[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 5

ho creato una categoria UIButton utilizzando il codice di horsejockey: https://github.com/filipstefansson/UITintedButton

Ecco i nuovi metodi:

0.123.

-(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 6

ho Modifié alcune cose da "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; 
}