Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I add shadow to a circle UIImageView or UIView?

Tags:

I am trying to make a circle UIImageView, and it works. Below is the way I use to make it:

[self.pic.layer setMasksToBounds:YES]; [self.pic.layer setCornerRadius:50.0]; 

I would like to add some shadow to the UIImageView. The below code does add some shadow to my image view, however, the image view changes back to square shape. Can someone give me some pointers to solve this problem? Below is the code I use to add the shadow:

self.pic.layer.shadowColor = [UIColor purpleColor].CGColor; self.pic.layer.shadowOffset = CGSizeMake(0, 1); self.pic.layer.shadowOpacity = 1; self.pic.layer.shadowRadius = 1.0; self.pic.clipsToBounds = NO; 
like image 686
Newbie Avatar asked Aug 23 '13 13:08

Newbie


People also ask

How do I add inner shadow to UIView with rounded corners?

Add subview with the same color which will be centered on the parent and will be with several pixels smaller. Like this you will have space from each side of the parent. On the parent turn on clipping subviews and add shadow to the inner view. Like this, you can have an inner shadow.


1 Answers

Use the CALayer's shadowPath property and add a UIBezierPath with rounded rect

self.pic.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.pic.frame cornerRadius:50.0].CGPath; 

EDIT

For a square-ish image view this technique does not work directly because, as you said, the image view goes back to square. Reason: You set clipsToBounds = NO to show the shadow which removes the clipping for corner radius, where imageView is subview of container.

Workaround:
Add your imageview in a container view and then apply the layer shadow to this container. Following is the code I tried.

[self.imageView.layer setCornerRadius:60.0]; [self.imageView.layer setMasksToBounds:YES]; self.imageView.clipsToBounds = YES;  self.container.backgroundColor = [UIColor clearColor]; self.container.layer.shadowColor = [UIColor blackColor].CGColor; self.container.layer.shadowOffset = CGSizeMake(5,15); self.container.layer.shadowOpacity = 0.5; self.container.layer.shadowRadius = 2.0; self.container.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.container.bounds cornerRadius:100.0].CGPath; 

The resultant effect is as shown in the screenshot,

enter image description here

like image 173
Amar Avatar answered Feb 28 '23 12:02

Amar