How do I add an outer glow to a UIImage or UIImageView or UIView

Question

I want to add a FADED shadow/outer glow to a UIImage/UIImageView/UIView but I know no Core Graphics at all.

Edit: Please Help!!

Answer 1

As a performance consideration, iPhone OS does not support the shadowColor, shadowOffset, shadowOpacity, and shadowRadius properties, which you could normally use in Cocoa. Most people duplicate the shape they want to glow several times with each time lowering the opacity and offsetting the shape one pixel at a time to simulate the look of a glow. If your glow does not need to be very big, you cannot tell the difference.

Answer 2

Take the approach outlined by Cirrostratus, keep a cached copy of it, and then apply a transform to change the size and/or position of the image while dragging.

(warning, this is not functional/tested code, but should get you started)

-(UIImage*)addGlowToImage:(UIImage*)imageInput;
{
    CGRect newSize = imageInput.bounds;
    CGImageRef theImage = imageInput.CGImage;

    // expand the size to handle the "glow"
    newSize.size.width += 6.0;
    newSize.size.height += 6.0;
    UIGraphicsBeginImageContext(newSize);
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextBeginTransparencyLayerWithRect(ctx, newSize, NULL);
    CGContextClearRect(ctx, newSize);

    // you can repeat this process to build glow.
    CGContextDrawImage(ctx, newSize, theImage); 
    CGContextSetAlpha(ctx, 0.2);  

    CGContextEndTransparencyLayer(ctx);

    // draw the original image into the context, offset to be centered;
    CGRect centerRect = inputImage.bounds;
    centerRect.origin.x += 3.0;
    centerRect.origin.y += 3.0;
    CGContextDrawImage(ctx, centerRect, theImage);

    result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return result;
}

Then in your method while scaling you would do something like:

// assumes UIImage *cachedImage = [self addGlowToImage:origImage]; has been called already.
// assumes ivars for scale exists

    CGRect newRect = cachedImage.bounds;
    newRect.size.width += scale;
    newRect.size.height += scale;

    [cachedImage drawInRect:newRect];  // image will be scaled to fill destination rectangle.

Definitely take a look at the apple docs. A good starting place is the Quartz 2D Programming Guide.