Creating a transparent UIView behind a subview on iPhone

Question

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!

Thanks!

Answer 1

UPDATE:

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.

Answer 2

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.

http://stackoverflow.com/questions/1309757/blend-two-uiimages