Create a glow around a UIView

Question

I would like to draw a glow-ish border around a UIView which is roughly 5px from the actual UIView itself.

Please could you tell me how I could achieve this?

Answer 1

Probably the easiest way is to create a shadow, but use a light color instead of a dark one. Shadow details can be found here: How do I draw a shadow under a UIView? and here.

Something like this should get the ball rolling:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetShadowWithColor(context, CGSizeMake(0, 0), 10,
                                [UIColor whiteColor].CGColor);
    [super drawRect:rect];
    CGContextRestoreGState(context);
}

Update: I just tried this out. You will have to use this code on the superview of the glowing view for it to work properly.

Answer 2

The first thing I would try is to embed the UIView within a UIView which has the glow image. If the glow effect is just an image, then you create a UIView containing the glow image that is 10 px taller and wider than the UIView being surrounded. This will allow for 5 px of extension on all 4 sides. You can do all this quickly and easily using Interface Builder.

If you want the glow effect to look really cool, considering creating a collection of glow images that when viewed as a sequence will show sort of a moving glow effect. You can then use this collection of images in the UIView and turn on animation. All UIView controls have animation support built in.

Hope this helped. Good Luck.