Question

what I was trying to do was to make a UIImageView darker so that the buttons and views on top of the image result. I wanted to give it the effect that is given when in ios6 a user shares using Facebook. All the content behind it becomes darker but it is visible. I tried using:

    UIImage *maskedImage = [self darkenImage:image toLevel:0.5];

- (UIImage *)darkenImage:(UIImage *)image toLevel:(CGFloat)level
{
// Create a temporary view to act as a darkening layer
CGRect frame = CGRectMake(0.0, 0.0, image.size.width, image.size.height);
UIView *tempView = [[UIView alloc] initWithFrame:frame];
tempView.backgroundColor = [UIColor blackColor];
tempView.alpha = level;

// Draw the image into a new graphics context
UIGraphicsBeginImageContext(frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[image drawInRect:frame];

// Flip the context vertically so we can draw the dark layer via a mask that
// aligns with the image's alpha pixels (Quartz uses flipped coordinates)
CGContextTranslateCTM(context, 0, frame.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextClipToMask(context, frame, image.CGImage);
[tempView.layer renderInContext:context];

// Produce a new image from this context
CGImageRef imageRef = CGBitmapContextCreateImage(context);
UIImage *toReturn = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
UIGraphicsEndImageContext();
return toReturn;
}

but it doesn’t give the effect I want. It changes the colors, while I just want it to become darker, like when you use the ios facebook sharing, and the background becomes dark. Is this possible?

Answer 1

To make a UIView, all its contents and subview, darker, you simply draw another UIView over it that is all black and has an alpha transparency, so that the black color of this “shielding view” mixes with the contents of the view below. If the alpha transparency is 0.5, everything below will look like it darkened by 50%.

To get a fading effect, just use a transition of the “shielding view”:

// Make the view 100% transparent before you put it into your view hierarchy.
[myView setAlpha:0];

// Layout the view to shield all the content you want to darken.
// Give it the correct size & position and make sure is "higher" in the view
// hierarchy than your other content.
...code goes here...

// Now fade the view from 100% alpha to 50% alpha:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[myView setAlpha:0.5];
[UIView commitAnimations];

You can change the animation duration to make the fade slower or faster as needed. If you don’t set any animation duration, the default duration is being used (which is the case when you Facebook sharing I guess).