How can I achieve this effect (rounded corners, inner glow) on my UIImageViews?

Question

I have a dark background, so I would very much like the beveled effect on the first image.

I'm trying to recreate these effects on my UIImageViews optimized for use inside UITableViewCells on variable sized images, but I can't figure out a way that works perfectly.

I'm also using AFNetworking to asynchronously load the images in the cells, using the packaged UIImageView+AFNetworking category, so I'm loading the images into the cells like this:

NSURL *originalURL = [NSURL URLWithString:@"url"];
[[cell _image] setImageWithURL:originalURL];

_image is just a regular UIImageView in my custom table cell.

So my question is basically, how would you do this?

Answer 1

Make use of CALayers present in the QuartzCore framework.

Create a new layer with black background and rounded corners. Then we add the image as subLayer to it.

CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor;
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(30, 30, 128, 192);
sublayer.borderColor = [UIColor blackColor].CGColor;
sublayer.borderWidth = 2.0;
sublayer.cornerRadius = 10.0;
[self.view.layer addSublayer:sublayer];

CALayer *imageLayer = [CALayer layer];
imageLayer.frame = sublayer.bounds;
imageLayer.cornerRadius = 10.0;
imageLayer.contents = (id) [UIImage imageNamed:@"myImage.png"].CGImage;
imageLayer.masksToBounds = YES;
[sublayer addSublayer:imageLayer];

To provide glowing effect make use of this code.

CABasicAnimation* animation1 = [CABasicAnimation animationWithKeyPath:@"opacity"];
[animation1 setDuration:1.0];
[animation1 setRepeatCount:INT_MAX];
[animation1 setFromValue:[NSNumber numberWithFloat:0.0]];
[animation1 setToValue:[NSNumber numberWithFloat:1.0]];
[subLayer addAnimation:animation1 forKey:nil];