Rounded rect on NSView that clips all containing subviews

coneybeare picture coneybeare · Feb 23, 2011 · Viewed 15.6k times · Source

I am creating a NSView subclass that has rounded corners. This view is meant to be a container and other subviews will be added to it. I am trying to get the rounded corners of the NSView to clip all of the subview's corners as well, but am not able to get it.

- (void)drawRect:(NSRect)dirtyRect {
    NSRect rect = [self bounds];
    NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:self.radius yRadius:self.radius];
    [path addClip];

    [[NSColor redColor] set];
    NSRectFill(dirtyRect);

    [super drawRect:dirtyRect];     
}

The red is just for example. If I add a subview to the rect, The corners are not clipped: enter image description here

How can I achieve this?

Answer

Jason Harwig picture Jason Harwig · Oct 6, 2011

Using Core Animation layers will clip sublayers correctly.

In your container NSView subclass:

- (id)initWithFrame:(NSRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.layer = _layer;   // strangely necessary
        self.wantsLayer = YES;
        self.layer.masksToBounds = YES;    
        self.layer.cornerRadius = 10.0;    
    }    
    return self;
}