Rise the question
Here comes the question,
how to create a transparent view without any contents?
Wow, the answer looks so easy to get! Almost every iOS developer has created one or even more ‘transparent view’s. Let’s take a look at those solutions. We have 2 solutions.
Solutions #1
Create a view with alpha=0.f. take a look at the code below
UIView *transparentView1 = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, 320.f, 460.f)];
transparentView1.alpha = 0.f;
[self.view addSubview:transparentView1];
[transparentView1 release];
It’s simple and straight forward. Hum? Let’s take a look at another solution.
Solution #2
Create a view with backgroundColor=[UIColor clearColor].
UIView *transparentView2 = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, 320.f, 460.f)];
transparentView2.backgroundColor = [UIColor clearColor];
[self.view addSubview:transparentView2];
[transparentView2 release];
This is also very simple.
So, what’s the difference between these 2 solutions?
The difference on surface
Before we talking about the difference, we need to review some basic yet key properties provided by iOS
- hidden: set this property to
YES will cause the view invisible. default is NO;
- alpha: this property affect all the contents of the view, including drawing and subviews. animatable;
- backgroundColor: this only affect the background color, not affect the drawing and subviews of the view. animatable;
- opaque: set this property to
YES, will gain some performance boost on UI rendering. But need to full fill the rectangle of the view. If opaque is set to YES and the view has full or partial transparent content, the behavior is not define.
Visit apple’s document for UIView for detail information.
With these basic knowledge, we can easily tell the difference between these 2 solutions.
- Solution #1 uses
alpha property to make the view transparent, in another word, it’s invisible because the view is hidden.
- Solution #2 sets
backgroundColor to transparent color to make it invisible.
- Solution #2 only set the background to transparent, if you draw anything on the view, or add some subviews to the view, they are still visible, and solution #1 will make everything in the view invisible, including the custom drawings and all the subviews.
- If the view is a clean view without any custom drawings and subviews, the result of these 2 solutions look the same.
They look the same? But actually not the same? Yes, they just look the same, but not exactly the same, so what’s the real difference?
Look the same, but…
There is always a BUT.
These 2 solutions look the same, but act differently on receiving touch event.
- Solution #1:
alpha=0.f;, according to Apple’s document:
> To hide a view visually, you can either set its hidden property to YES or change its alpha property to 0.0. A hidden view does not receive touch events from the system. However, hidden views do participate in autoresizing and other layout operations associated with the view hierarchy. Thus, hiding a view is often a convenient alternative to removing views from your view hierarchy, especially if you plan to show the views again at some point soon.
>
> See Apple’s document
- Solution #2: when background color is set to clear color, the alpha is still 1.0, so this view still can receive touch event.
Finally, we have the answer
Before we get the correct answer, we need to use the correct terminologies to clarify the answer:
- Hidden View: when
hidden=YES or alpha=0.f
- Transparent background View: when
backgroundColor is set to clear color
The answer
- a hidden view will not accept touch event, while a transparent background view will.
- a hidden view may look like a transparent background view if add no subviews and draw nothing on the view.
With this answer, I think we can use hidden view and transparent background view correctly.
Recent Comments