Question

This is stumping me. I have a UIView (call it “parent”). The bottommost subview of that view is a UIImageView (call it “child”), whose frame occupies the entirety of the “parent” bounds.

I want to round the corners on the “parent” view, and set a drop shadow. I do this on the CALayer of “parent” as usual:

[[parent layer] setShadowOffset:CGSizeMake(5, 5)];
[[parent layer] setShadowRadius:6];
[[parent layer] setShadowOpacity:0.4];    
[[parent layer] setCornerRadius:6];

This shows the shadow correctly, but does not round the corners.

Here’s the kicker:

1. If I remove the “child” image view, or shrink it so it doesn’t occupy the whole bounds of the “parent” view, I get the rounded corners and shadow correctly on the parent.
2. If I leave the “child” alone but set “clipsToBounds” on the “parent” view, I get the corners correctly. But now the shadow’s gone.
3. Setting the corner radius on the layer of the child as well seems to have no effect.

It seems like the “child” image view is just obscuring the rounded corners on the “parent” view since it takes up the whole rect, and clipping based on the parent view gets the corners but also masks off the shadow. Not sure why #3 doesn’t work.

What am I missing? Have I been overlooking something obvious by staring at this too long?

Thanks.

(Shockingly, the tag “roundedcorners-dropshadow” already exists. Awesome.)

Answer 1

You will need two nested views, the inner one setting rounded corners and clipping to bound, and the outer view having the shadow (and therefore not clipping). In your case inner and outer view will probably be “child” and “parent”, but I guess you didn’t set the right clipping values for these views?

See the answer in Why masksToBounds = YES prevents CALayer shadow?.