如何以编程方式为触摸状态的UIButton创建灰色叠加层？

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.

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.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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 .