iphone - How can I produce an imageview with both rounded corner and shadow?

Question

something exactly like above?

I know how to produce a rounded corner:

imageView.layer.cornerRadius = 10;
imageView.layer.shouldRasterize = YES;
imageView.layer.masksToBounds = YES;

For the shadow, I have tried

imageView.layer.shadowOffset = CGSizeMake(1, 1);
imageView.layer.shadowRadius = 5;
imageView.layer.shadowOpacity = 0.4;
imageView.layer.shadowColor = [UIColor blackColor].CGColor;
imageView.layer.shouldRasterize = YES;

But imageView.layer.masksToBounds = YES; from rounded corner kills the shadow.

Another question is that how to produce a shadow exactly like shown in the image? I produced this image in photoshop, I used 120 degree as the direction of the light. But if I used the code above, and turn off maskToBounds, I can see the shadow and it is ugly.

Or can I produce a rounded corner+shadow image frame in photoshop and apply the frame to every image in my app? I think that will give better performance. shadowing and cornering the images on the fly will have terrible performance if all images are on a scroll.

Thanks

Answer 1

Try this :

 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:@"BattleMapSplashScreen.jpg"].CGImage;
 imageLayer.masksToBounds = YES;
 [sublayer addSublayer:imageLayer];

And take look at the original source