CODEWITHSUNDEEP
iphoneimagerounded-cornersshadow
Jackson Tale
Jackson Tale

Reputation: 25812

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

enter image description here

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

Upvotes: 10

Views: 1211

Answers (3)

aopsfan
aopsfan

Reputation: 2441

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!

Upvotes: -1

Devang
Devang

Reputation: 11338

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

Upvotes: 4

ader
ader

Reputation: 5393

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.

Upvotes: 0

Related Questions