Make a UIImageView round, add a border, and a shadow around the border

Question

I know there are similar questions out there, but haven't found an answer that has helped me resolve my issue. If you've seen one, feel free to mark this as duplicate, but please make sure it answers the entire question and not just similar parts.

I have a UIImageView, and I am rounding the corners and adding a border to it. However, I'm starting to add some drop shadows to give my UI some depth. I'm adding a shadow to my profile picture, and the following code works great for a perfectly square image, which gets cropped into a perfect circle. However, for non-square rectangular images, the shadow is applied to the image itself rather than the image view, so I end up with a round border around a cropped rectangular image, which has a shadow around the edges that don't reach the circular border. Any insight into how I can modify my code to apply this shadow to be around the border, instead of the image within the UIImageView?

Thanks

//Set profile image view to be rounded (default appears rounded due to alpha background, need rest to appear rounded as well
[self.profileImageView layoutIfNeeded];
CALayer *imageLayer = self.profileImageView.layer;
[imageLayer setCornerRadius:self.profileImageView.frame.size.width/2];
[imageLayer setBorderWidth:1];
[imageLayer setBorderColor:[[UIColor colorWithRed:78.0/255.0 green:82.0/255.0 blue:85.0/255.0 alpha:1] CGColor] ];
[imageLayer setMasksToBounds:YES];

//Apply shadows to necessary views for the job badge
[self.profileImageView.layer setShadowColor:[[UIColor blackColor] CGColor]];
[self.profileImageView.layer setShadowRadius:4.0f];
[self.profileImageView.layer setShadowOffset:CGSizeMake(0, -3)];
[self.profileImageView.layer setShadowOpacity:0.5f];

Could you provide a screenshot of the behavior you don't like? — charmingToad
I actually just completed the fixed implementation and am bad and didn't commit between, so can't easily roll back. But basically, if I had an image wider than tall, the shadow would only be at the top of the image, which was clipped by the circle, instead of going around the circle. The shadow was inside the circle. If a picture was taller than it was wide, the shadow would go around the edge of the circle, but would stop at the edge of the image. I used an approach similar to Alex's below. — Jake T.

alexburtnik alexburtnik · Accepted Answer · 2016-11-18T22:45:33

The problem is that shadow is masked together with other content when you set cornerRadius.

You can use an intermediate conteiner view with shadow and masked imageView inside. Here is the code, but you can do the same with Interface Builder and autolayouts as well:

UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
[containerView.layer setShadowColor:[[UIColor blackColor] CGColor]];
[containerView.layer setShadowRadius:4.0f];
[containerView.layer setShadowOffset:CGSizeMake(0, -3)];
[containerView.layer setShadowOpacity:0.5f];
[self.view addSubview:containerView];

UIImageView *imageView = [[UIImageView alloc] initWithFrame:containerView.bounds];
imageView.image = [UIImage imageNamed:@"rgb"];
[imageView.layer setCornerRadius:imageView.frame.size.width/2];
[imageView.layer setBorderWidth:1];
[imageView.layer setBorderColor:[[UIColor colorWithRed:78.0/255.0 green:82.0/255.0 blue:85.0/255.0 alpha:1] CGColor] ];
[imageView.layer setMasksToBounds:YES];
[containerView addSubview:imageView];

Output:

Make a UIImageView round, add a border, and a shadow around the border

1 Answers