Saturday, May 07, 2011

How to create photo frame effect (UIImageView)

There is a really easy way to make a ordinary UIImageView photo frame with just few lines of code.

UIImageView inherits from UIView so it has a CALayer. Among the CALayer properties that you can manipulate is the shadow and border. The trick is to set the border to few pix thick and drop some shadow radius and you instantly get a nice photo frame effect.

So if you want to turn a boring looking photo (like the below) into something that look like it's in a photo frame with some drop shadow, do this:

// #import <QuartzCore/QuartzCore.h>
    // picture is an instance of UIImageView

    CALayer *layer = picture.layer;
    [layer setBorderColor: [[UIColor whiteColor] CGColor]];
    [layer setBorderWidth:8.0f];
    [layer setShadowColor: [[UIColor blackColor] CGColor]];
    [layer setShadowOpacity:0.9f];
    [layer setShadowOffset: CGSizeMake(1, 3)];
    [layer setShadowRadius:4.0];
    [picture setClipsToBounds:NO];

I have made a handy category to apply this photo frame effect to any UIImageView easily here.


Anonymous said...

This is great, thanks for the work

Anonymous said...

This is great. Thanks so much. Just what I was looking for :-)

Appshh said...

Hi, thanks, for the work!

I tried using this in a UITableView to add a frame around a thumbnail image in each row and unfortunately the performance was not great. I had to add a couple of lines of code in order to solve this, so thought I'd share! From searching Stack Overflow, it appears that this is good practice and will increase drawing performance.

// This tell QuartzCore where to draw the shadow so it doesn't have to work it out each time
[self.layer setShadowPath:[UIBezierPath bezierPathWithRect:self.layer.bounds].CGPath];

// This tells QuartzCore to render it as a bitmap
[self.layer setShouldRasterize:YES];
[self.layer setRasterizationScale:[UIScreen mainScreen].scale];

Hope this helps :-)

free online casino games said...

excellent wordpress blog online casino games