Transparent view on another transparent UIView with non-transparent content?

Question

The idea is to show a progress dialog. I'm trying to cover a parent view (normally the whole screen) with a transparent black view (alpha 0.2). On top of that I want to show a smaller view, also transparent with another color. It may be not influenced by color or transparency of the first view. In that 2nd view I want UI elements that are opaque. I have tried everything and even found posts here that deal with something similar but only uses one transparent layer. And those already use weird tricks. Is there a standard, easy way of achieving this?

Answer 1

Without any hacking around or complicated and possibly slow custom drawRect: , this is possible if you group your views:

Create a bounding view that encompasses and holds the whole dialog. This view itself has no visible content, and its backgroundColor is clear. Its alpha is 1.0.

Now add all the transparent views (those with alpha < 1) to this that you want, and also add the non-transparent views. Be careful not to add any non-transparent views as subviews of the transparent ones, instead add them as direct subviews of the bounding view. That way, they will inherit its alpha of 1.0.

UIView *progressDialogView = [[UIView alloc] initWithFrame:dialogFrame];
progressDialogView.backgroundColor = [UIColor clearColor];
progressDialogView.alpha = 1.0; //you can leave this line out, since this is the default.

UIView *halfTransparentBackgroundView = [[UIView alloc] initWithFrame:dialogFrame];
halfTransparentBackgroundView.backgroundColor = [UIColor blackColor]; //or whatever...
halfTransparentBackgroundView.alpha = 0.5;
[progressDialogView addSubview: halfTransparentBackgroundView];

UIView *progressBarView = [[UIView alloc] initWithFrame:progressBarFrame];
progressBarView.backgroundColor = [UIColor blueColor];
[progressDialogView addSubview: progressBarView];

Answer 2

Instead of setting the alpha property, use the following for setting the background color / opacity for each view:

view1.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:.3];

Use whatever values you desire for red, green, blue, and alpha.

Answer 3

I found an answer in a blog: http://cocoawithlove.com/2009/04/showing-message-over-iphone-keyboard.html

The solution is to override drawRect: and take care of the alpha in it. You may not touch UIView's alpha property, nor may you set the view's background color to anything but transparent. All drawing must be made in drawRect:. This way I was able to stack transparent views and put opaque elements on top.

Answer 4

I needed to have transparent view on top of another view. The view to make transparent I just did:

self.alpha = 0.5;

For example:

- (void) configureView
{
    self.frame = CGRectMake(0, 0, 640, 960);
    self.backgroundColor = [UIColor greyColor];
    self.alpha = 0.5;
}

Answer 5

Adding your opaque view as a subview of the transparent view won't work. What I have done in the past is have a UIView class that adds a semi-transparent subview and an opaque subview. That way the transparent view won't affect the opaque one.