How to prevent from clipping the subviews when I set the cornerRadius of a UIView?

Question

I am trying to set the cornerRadius of a subclass view of UIButton, the round corner shows in a right way, but when I try to add a subView(the flower icon) on it, the subview seems to be clipped like the picture on the right side below, this is not what I expected. I try to make the correct appearance like the picture shows on the left side, the icon not be clipped. The code I use:

button.layer.cornerRadius = button.frame.width / 2;
button.layer.masksToBounds = Yes;    

Hope someone can help me to understand how to prevent from clipping.
Thanks!

Answer 1

If you are making the button rounded using your above mentioned code then your button will definitely get chopped from the corners so if you only want to chop it from 3 corners then do this:

#import <QuartzCore/CoreAnimation.h>

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:button.bounds 
                                           byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft
                                                 cornerRadii:CGSizeMake(7.0, 7.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = button.bounds;
maskLayer.path = maskPath.CGPath;
button.layer.mask = maskLayer;

Answer 2

You shouldn't add the overlay as a subview then. Subviews will be clipped if you set clipsToBounds to YES.

Instead add it as a sibling, like so:

- container view
  - image view (clips)
  - overlay view