How to create a gray overlay for a UIButton in touched state programmatically?

Question

I would like to make a generic class that when tapped, makes the element grayish.

Facebook's app is the perfect example of what I want to achieve. All their links and images become gray when tapped.

enter image description here

I can only guess that they are subclassing UIButton.

I have made my button's style UIButtonTypeCustom to get rid of the rounded border. Beyond this, I don't know how to have the gray overlay because I see no such property in the documentation.

I'm pretty sure they're using a WebView, which highlights touched links with that grayness. — Brian, Mar 23 '12 at 16:26
I will need to simulate this WebView highlighting in my native code. — JoJo, Mar 23 '12 at 16:48
@JoJo: Refer to my answer. I have edited my answer. I think that would help you. — Parth Bhatt, Mar 23 '12 at 18:28
I like this one http://stackoverflow.com/questions/6309225/uibutton-wont-gray-out#6309314 — user454322, Dec 15 '14 at 07:28

score 2 · Accepted Answer · answered Mar 23 '12 at 16:21

2

Its simple:

#define TAG_GRAYVIEW 5671263 // some random number

// add the gray overlay
UIView *grayView = [[UIView alloc] initWithFrame:button.bounds];
grayView.backgroundColor = [UIColor grayColor];
grayView.tag = TAG_GRAYVIEW; 

[button addSubview:grayView];

// remove the gray overlay
UIView *grayView = [button viewWithTag:TAG_GRAYVIEW];
[grayView removeFromSuperview];

answered Mar 23 '12 at 16:21

Richard J. Ross III

55,009
24
135
201

Would you use `UIResponder`'s `touchesBegan:withEvent:` to add the overlay and `touchesEnded:withEvent:` to remove the overlay? – JoJo Mar 23 '12 at 16:46
@JoJo that should work just fine, as it calls on the main thread. – Richard J. Ross III Mar 23 '12 at 17:04
This is so simple and works so well! I just used it on a UIImageView, beautiful! – Janene Pappas Sep 25 '13 at 19:26

Parth Bhatt · Answer 2 · 2012-03-23T17:42:38.723

I think you need to use a semi transperant grey image PNG file. You need to then set Image of button in Highlighted state.

Also note that both the images for Normal State and Highlighted State need to have the images with titles on them.

As once we set the image to button, btn.titleLabel.text won't be displayed.

So you can have a image with transperant background and title on it for Normal state. And an grey image with title on it for Highlighted State.

Code for doing it programmatically is

[btn setImage:@"Transperant.png" forState:UIControlStateNormal];
[btn setImage:@"Grey.png" forState:UIControlStateHighlighted];

Hope this helps you.

@JoJo: Please refer to my answer. I think that is the simplest solution — Parth Bhatt, Mar 23 '12 at 17:44

score 0 · Answer 3 · edited Mar 23 '12 at 17:20

0

Try setting the button up something like this. *mind you I didn't create the image for this example.

Set your button type to custom, and in "State Config" select "Highlighted" from there you will want to set the image of the button to be a semi-transparent grey image. There are probably several other ways to achieve this same effect but this one should be nice and simple.

enter image description here

edited Mar 23 '12 at 17:20

Parth Bhatt

19,381
28
133
216

answered Mar 23 '12 at 16:19

Mick MacCallum

129,200
40
280
281

I will not be using Interface Builder. My views will be dynamically generated with code. – JoJo Mar 23 '12 at 16:47

score 0 · Answer 4 · edited May 23 '17 at 12:01

The default UIButton masks the opaque content using a gray highlight. For example when using a transparent png, only the parts that contain non-transparent pixels will be grayed out on touch. The default UIButton highlight has no effect on subviews/sublayers, and will only work on provided images. What you see in the Facebook app is probably just a UIWebView highlight, possibly customized using css.

To create something similar using your own control (to prevent the overhead of a UIWebView) you should probably create your own UIControl subclass and highlight the content on touch using a transparent CALayer. You can even mask the CALayer to only highlight the actual contents, instead of a rectangular shape.

Also see my stackoverflow post on creating custom controls for iOS by subclassing UIControl.

How to create a gray overlay for a UIButton in touched state programmatically?

4 Answers4