Tutorial :Creating a transparent UIView behind a subview on iPhone


Question regarding layer two bitmaps on top of each other, one of which is semi-transparent.

I have a custom UIView called foo. I have two CGBitmapContext's I have created. They are effectively being used as offscreen buffers and are of equal rectangular dimensions. I want to take the two of these offscreen and layer them one on top of the other. The background should be semi-transparent, the foreground should be opaque (but is using clearColor in order to show through the background). The effect is that you have a sharp foreground with visibility into a background image where the foreground is not painted (clearColor).

CGContextRef background;  CGContextRef foreground;  

I am trying to implement this in the custom UIView foo where the two CGBitmapContext's reside. I have a parent view (background) with a subview (foreground), and I am trying to implement this in the (void) drawRect: (CGRect)rect override. I've tried jimmying this around repeatedly, but I usually can only get one of the views/bitmaps to show.

Question 1: Is this the right approach? Should I try to be using layers instead? Should I combine the bitmaps and then BLT to parent/root UIView? Quesiton 2: Any sample code that can be provided to accomplish the above is appreciated!




It's absolutely ridiculous I had to do this, because there has to be an easier way, but I ended up positioning two independent UIViews one over the other and then setting opacity and alpha accordingly. This works.

I am trying to write a new view right now that does this the right way which looks something like:

UIView : myview    - (subview) UIImageView    - (subview) UIImageView      The code looks something like this...    @interface customView : UIView   {     ...     UIImageView *foregroundImage;     UIImageView *backgroundImage;     ...  }  @end    @implementation    - (void) awakeFromNib  {     ...     self.backgroundColor = [UIColor whiteColor];     self.alpha = 1;     self.opaque = YES;     self.clearsContextBeforeDrawing = FALSE;       [backgroundImage initWithImage:<...>];     backgroundImage.alpha = 0.5; // Yes, this should be 0.5. The background should be a bit lucid     backgroundImage.opaque = YES; // I want the white background of the parent UIView to show through       [foregroundImage initWithImage:<...>];     foregroundImage.alpha = 1; // Yes, this should be 1. The surrounding space is clear...     backgroundImage.opaque = YES;       [self addSubview:backgroundImage];     [self addSubview:foregroundImage];       [self bringSubviewToFront:foregroundImage];       [self setNeedsLayout];       [foregroundImage setNeedsDisplay];     [backgroundImage setNeedsDisplay];     [self setNeedsDisplay];     ...  }    - (void) drawRect: (CGRect) rect  {    ...    // update the images to latest    [backgroundImage setImage:<..new..>];    [foregroundImage setImage:<..new..>];      [backgroundImage setNeedsDisplay]; // necessary?    [foregroundImage setNeedsDisplay]; // necessary?    [self setNeedsDisplay]; // necessary?    ...  }  @end  

The result? Nothing. No updates. I have read that others have had this problem as well (UIImageView not updating when set the Image property) but haven't seen a solution. The images are coming from offscreen buffers that are being written to during touch events, etc.

I know that these buffers have the correct images because if I do something like:

CGImageRef bitmap = CGBitmapContextCreateImage(bufferContext);  CGContextDrawImage( UIGraphicsGetCurrentContext(), CGRectMake(0,0,self.bounds.size.width, ...height), bitmap);  CGImageRelease(bitmap);  

... I can see the proper image. The UIImageViews don't appear to want to update. Their opacity, etc. is set accordingly as well.

Will keep grinding, don't want to write a hack for this. There should be an easy, elegant way...

Any help/guidance is appreciated.


I found a previous StackOverflow post that was tremendously helpful. It accomplished merging two images not through views but rather through using the Quartz 2D API's. Still enabled me to accomplish what I wanted to.

blend two uiimages based on alpha/transparency of top image

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »