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?

score 7 · Answer 1 · answered Feb 11 '11 at 16:16

7

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

answered Feb 11 '11 at 16:16

Cyrille

25,014
12
67
90

While this is nice, and I already knew about it, it doesn't really work for me because I want my UIBarButtonItem to maintain the toolbar's tint properties and as soon as you introduce a custom view with a UIButton this is out the window AFAIK. All I want to do is change the text color :( – skålfyfan Apr 13 '11 at 16:50
great answer without use of png. – NNikN Sep 11 '12 at 16:43
1

One caution: this creates a button that doesn't act quite like a button -- it triggers its event when the user begins the tap, rather than when they release (i.e. touchUpInside). Unfortunately the UIControlEventTouchUpInside event appears to be swallowed by Cocoa, and adding a target to it on a segmented control doesn't work. – Joe Strout Feb 15 '13 at 17:26

score 6 · Answer 2 · answered Oct 29 '08 at 10:52

6

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

answered Oct 29 '08 at 10:52

Alfons

1,845
14
16

score 2 · Accepted Answer · answered Sep 23 '08 at 23:00

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.

score 1 · Answer 4 · answered Sep 23 '08 at 15:17

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.

score 0 · Answer 5 · edited Jul 04 '13 at 09:06

0

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

edited Jul 04 '13 at 09:06

NANNAV

4,875
4
32
50

answered Nov 08 '10 at 00:49

Paul Alexander

31,970
14
96
151

score 0 · Answer 6 · edited May 23 '17 at 12:20

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.

How to tint a UIButton?

6 Answers6

Linked