UIView alpha vs. UIColor alpha

Question

I would like to know the difference between:

• Assigning my UIView a color with <1 alpha vs
• Assigning it a non-transparent color but giving the UIView a <1 alpha value.

On the screenshot I have made two UIViews with two black (alpha = 1.0) UILabels on top of each:

Assume a macro _RGB is defined before:

#define _RGB(r,g,b,a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]

and then here is the code::

[_view1 setBackgroundColor:_RGB(255, 0, 0, 1)];
[_view1 setAlpha:0.5];

[_view2 setBackgroundColor:_RGB(255, 0, 0, 0.5)];
[_view2 setAlpha:1];

[_view3 setBackgroundColor:_RGB(255, 0, 0, 1)];
[_view3 setAlpha:1];

I can see only one difference visually: Changing view's own alpha instead of bg color's, affects the subviews as well. But other than that is there any difference in functionality that I should consider? (eg. On animations, layers, etc.)

Answer 1

The difference is:

• By settings background color with alpha <1, only the background color will have the alpha and all subviews will by default have alpha 1, i.e. will be 100% opaque
• By settings alpha to the view, the whole view (including all the subviews) will be drawn with the given alpha

So in your examples:

• _view1 (alpha <1 on view): alpha is also applied to the subview UILabel
• _view2 (alpha <1 on background color): subview UILabel is nicely opaque
• _view3 (defualt alpha 1 on both): well, we all see :-) background color and label are both opaque

---

Example usage of both:

Left image: You have a semi-transparent black overlay which has a subview UIImageView containing a white checkmark icon and you usually want the icon to be fully opaque (non-transparent). So you set just the background color black with alpha <1 (0.75f in the example).

In opposing to:

Right image: You have have a semi-transparent black overlay which has a subview UIImageView containing a white pattern image (the pattern is opaque white, no alpha). And you want the pattern in overlay to be also semi-transparent. You then would set background color to black with alpha 1 (opaque) and alpha <1 to the whole view.

As you can see, icon on left image is fully opaque, but on a right, you can see also through a stars pattern.