Making part of the view transparent/overlay while the rest isn't

Question

I'd like to show an overlay view similar to what you see when you perform a 'Search in Contacts app where the SearchBar is visible under the toolbar while the gray overlay covers up all of the content below.

For my view, I'd like to have an UITextField and button shown visible while the rest of screen is gray with the rest of the existing contents as grayed-over and no SearchBar.

Things I tried:

1. I can have one view that encases both UITextField and button with the view's alpha level set to 0.5. But this yields grayed appearance for everything, including the UITextField and button, which is not what I'm trying to achieve.

2. I then tried two child views within a parent UIView, with one subview containing the controls while the other one is blank. Set the parent UIView to have 0.5 alpha -> this is not right either.

3. Continuing with two child views within a parent UIView, set the parent view to have alpha of 1.0 and then the the blank-view to have an alpha level of 0.5, it's still not right.

So what's a good way to achieve this?

Answer 1

I would've thought #3 would be the correct way to do it. Are you sure you have the parent and the overlay views's opaque property set to NO?

Answer 2

Option 3 is the way to do it but make sure you're adding them in the right order i.e. transparent view added as first subView to parent view then the text field. This way the text field is on top.

Also, don't forget to set the backgroundColor attribute of the parent view to [UIColor clearColor].