How to do vignette effect on iOS?

Question

When UIAlertViews pop up, there is a vignette effect in the background. That is, the edges are darker and the center is lighter.

I was wondering if this vignette effect was built into Cocoa Touch. I would like to show the vignette behind one of my custom views.

Answer 1

It is built into UIKit (as UIAlertView is part of UIKit), but it's not public.

It shouldn't be too hard to create the same effect, though. It's just a radial gradient, which you can draw in code or Photoshop.

UPDATE: If you must know, the background is a class called _UIAlertNormalizingOverlayWindow with the following class hierarchy:

_UIAlertNormalizingOverlayWindow
_UIAlertOverlayWindow
UIWindow

Answer 2

Create a class called VignetteEffect as a subclass of UIView

Add this code to your -drawRect: method:

- (void)drawRect:(CGRect)rect
{

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colSp = CGColorSpaceCreateDeviceRGB();

    CGGradientRef gradient = CGGradientCreateWithColors(colSp, (__bridge CFArrayRef)[NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0] CGColor], (id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5] CGColor], nil], 0);

    CGContextDrawRadialGradient(context, gradient, self.center, 0, self.center, self.frame.size.height+self.frame.size.height/4, 0);

    CGColorSpaceRelease(colSp);
    CGGradientRelease(gradient);

}

Tweak the values to your liking.

Add it to any view you have. Et voila. A nice vignette effect.