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

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

Answer 2

I would use two image views. A background png that has the shadow (can be re-used for every image) and the foreground png image which has rounded corners.

Answer 3

You probably want to use a different layer for shadowing, and keep your masksToBounds and rounding code. In this example imageView is the name the image view that you want to shadow and round:
CALayer *shadowLayer = [[[CALayer alloc] init] autorelease];
sublayer.frame = imageView.bounds;
sublayer.masksToBounds = NO;
sublayer.shadowOffset = CGSizeMake(1, 1);
sublayer.shadowRadius = 5;
sublayer.shadowOpacity = 0.4;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shouldRasterize = YES;
[imageView.layer insertSublayer:shadowLayer atIndex:0]; // Put it underneath the image
That should give you the shadow. Now to avoid the slow recalculating, I suggest creating a UIImage out of the image. See this link: Create UIImage from shadowed view while retaining alpha?.
Hope this helps!