Drawing a semi-transparent rectangle in iOS

Question

I was searching for the answer for so long and also tried to solve it by myself but I couldn't and I think this is the best place to ask. So I am trying to accomplish something simple but I just can't find the way to do it. I think I am missing something on conceptual level. This is how I try to create my semi-transparent rectangle inside my class that is subclassing UIView:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    //this should be white color with 0.7 opacity right
    CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.7);
    CGContextFillRect(context, self.bounds);
}

Ok, this just makes the color gray. I tried with this also but with the same result: CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextSetAlpha(context, 0.7);

Another try:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextFillRect(context, self.bounds);

    self.alpha = 0.7;
}

Voila! I solved it. But not exactly. I want to draw a semi-transparent rectangle in the context and not to make the whole view transparent. And then for example add another rectangle which is fully opaque. Would love to hear your thoughts. Thanks.

Answer 1

I guess that the reason why you can't see the transparency of your rect is the presence of a background color in your view.

Would you try setting the view background color like this:

self.backgroundColor = [UIColor clearColor];

BTW, this statement, as well as any statement setting a property of your custom view (e.g., self.alpha = 0.7;) should go into the init method.

EDIT:

as pointed out by @borrrden, the real property to set in order to make the trick is possibly opaque. This is usually set to YES and thus implies the following, according to Apple Docs:

An opaque view is expected to fill its bounds with entirely opaque content—that is, the content should have an alpha value of 1.0. If the view is opaque and either does not fill its bounds or contains wholly or partially transparent content, the results are unpredictable. You should always set the value of this property to NO if the view is fully or partially transparent.

Setting the background color to clearColor will likely set the value of this property to NO as a collateral effect.

EDIT:

I do not understand why you are overriding drawRect in a custom UIView to draw a semi-transparent rectangle, maybe because I do not know what you are trying to do. In any case, an alternative approach to this you might want to look into is using nested UIViews or nested CALayers, where you assign a different alpha/opacity to any of them.

If you are just interested in rectangles with varying degrees of opacity, this would be as simple as nesting UIViews in a parent view and assign the each of them a semi-transparent background color.