Can't set cornerRadius AND shadow on layer that has an image view stretched to its bounds?

22,076

Solution 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?.

Solution 2

Normally you have to set clipsToBounds to have rounded corners, but since you want to retain the shadow you have to round the corners of the shadow as well. Have you tried setting the shadow path using a bezier path? Keep clipsToBounds/masksToBounds to the default, NO. Something like:

  [[parent layer] setCornerRadius:6.0f];
  [[parent layer] setShadowPath:
             [[UIBezierPath bezierPathWithRoundedRect:[parent bounds] 
                   cornerRadius:6.0f] CGPath]];
Share:
22,076
Ben Zotto
Author by

Ben Zotto

Updated on July 26, 2022

Comments

  • Ben Zotto
    Ben Zotto almost 2 years

    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.)