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

Question

I would like to create a generic class that, when clicked, makes the element grayish.

The Facebook app is a great example of what I want to achieve. All their links and images turn gray when clicked.

I can only assume that they are a subclass of UIButton .

I created a UIButtonTypeCustom button style to get rid of the rounded border. Other than that, I don’t know how to have a gray overlay, because I do not see such a property in the documentation.

Answer 1

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 PNG file with a translucent gray image. Then you need to set the button image to Highlighted .

Also note that both images for Normal State and Highlighted State must have images with names on them.

Once we set the image to the button, btn.titleLabel.text will not be displayed.

That way, you can have an image with banner backgrounds and a caption on it for Normal . And a gray image with a caption on it for Highlighted Status.

Code for its software programming

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

Hope this helps you.

Answer 3

Try setting the button something like this. * mind you I did not create an image for this example.

Set the type of your button to normal, and in the "Status Configuration" select "Highlighted", from there you will want to set the button image to a translucent gray image. There are probably several other ways to achieve the same effect, but it should be beautiful and simple.

Answer 4

By default, UIButton masks opaque content using gray. For example, when using transparent png, only parts containing opaque pixels will not be accessible when touched. The UIButton icon by default does not affect subviews / sublayers and will only work with provided images. What you see in the Facebook application is probably just a UIWebView highlight, possibly configured with css.

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

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