How to tint a UIButton?

Question

I'm in the process of adding custom buttons to my iPhone UI and want to make them have the glassy look from Apple's apps. I have a good default glass image, but I'd hate to have to have a separate image for each tint I want (red, green, blue, etc.).

Is there a way to load a grayscale PNG and adjust it to the color I want? Better yet, is there a way to get Apple's glassy look without having to load custom images at all?

Answer 1

There isn't a one-liner way that I know of, but you might be able to get the desired effect by taking the default grayscale image and compositing it with (i.e. drawing it on top of) a solid color. If you look through the Core Graphics documentation, you can see there are over a dozen different compositing methods (e.g., Color Burn), and some combination of them may produce the effect you want.

Answer 2

A little late, but in case somebody like me searches for this kind of information: use a UISegmentedControl with a single button, set it as momentary, and set its tintColor. This way, no need to prepare as many PNGs as you have colors, and the framework takes care of all the rendering for you.

Example:

UISegmentedControl *cancelButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:@"Cancel"]];
[cancelButton setSegmentedControlStyle:UISegmentedControlStyleBar];
[cancelButton setTintColor:[UIColor colorWithRed:0.8 green:0.3 blue:0.3 alpha:1.0]];
[cancelButton setMomentary:YES];
[cancelButton addTarget:self action:@selector(didTapCancel:) forControlEvents:UIControlEventValueChanged];
[self addSubview:cancelButton];
[cancelButton release];

Answer 3

There's a sample at the always excellent "Cocoa With Love" site: Drawing gloss gradients in CoreGraphic

Answer 4

I don't know about iPhone UI, but you can use a single PNG to have colour variant graphics.

i.e. Both the logos (top left) on these pages:

Products

Shops

Use this PNG

alt text http://47degrees.com/images/logos/47_degrees.png

I presume you might need the background colour set as a tint to be glassy.

Answer 5

I have done this and it works pretty nicely:

iOS: Applying a RGB filter to a greyscale PNG

However, it is cheating, it is adding, so for (eg) the red component of each pixel, R_dest = R_src + R_tint

If you want fine-grained control, for example you might want to extract the greyscale value for each pixel by averaging the RGB components (with appropriate weighting), and then multiply this value by your tint, so the resulting colour would be greyscale(Sr,Sg,Sb) * {Tr,Tg,Tb}

This would require creating a chunk of memory, creating a bitmap context which draws into this chunk, drawing your image into this context, copying the whole memory chunk for safekeeping, processing -- taking data from the copy and modifying the original backing store, then extracting an image from the original backing store and freeing up everything you allocated.

Problem reconstituting UIImage from RGBA pixel byte data

This library has done everything for you, it isn't the most efficient route, but it gets the job done. iirc he uses malloc when he should be using calloc.

Answer 6

I ended up creating my own custom button that closely matches the rendering used in the "Delete Contact" button in the contacts edit view.

For those interested, it can be found on github at

PFTintedButton