Cocoa: Masking NSTableView with rounded bottom corners

Question

I'm trying to figure out how to mask an NSTableView with bottom rounded corners - but only at the bottom.

In this image, no effects are applied:

The bottom corners are square

In these images, you can see the corners rounded, I've used this code for the corners:

self.scrollView.wantsLayer = TRUE;
self.scrollView.layer.cornerRadius = 6;

top corners and bottom corners rounded

What I cannot figure out is how to get rid of the rounded corners on the top left and top right:

corners are rounded

I've tried a few different options to no avail:

//creating a path
//this is a category from github.com/iccir/XUIKit
NSBezierPath * path = [NSBezierPath bezierPathWithRoundedRect:self.tableView.bounds byRoundingCorners:XUIRectCornerBottomLeft|XUIRectCornerBottomRight cornerRadii:CGSizeMake(6, 6)];
CAShapeLayer * layer = [CAShapeLayer layer];
layer.fillColor = [[NSColor blackColor] CGColor];
layer.path = [path CGPath];

//attempt 1
self.scrollView.contentView.wantsLayer = TRUE;
self.scrollView.contentView.layer.mask = layer;
self.scrollView.contentView.layer.masksToBounds = TRUE;

//attempt 2
((NSView*)self.scrollView.documentView).wantsLayer = TRUE;
((NSView*)self.scrollView.documentView).layer.mask = layer;
((NSView*)self.scrollView.documentView).layer.masksToBounds = TRUE;

//attempt 3
self.scrollView.wantsLayer = TRUE;
self.scrollView.layer.mask = layer;
self.scrollView.layer.masksToBounds = TRUE;

What ends up happening is everything disappears:

table view content is gone

Anyone have any idea how to properly handle this? Thanks!

What's the parent view of your scroll view? Have you tried rounding its bottom corners? It should clip anything it contains. — jatoben

gngrwzrd gngrwzrd · Accepted Answer · 2014-06-21T00:21:55

i figured it out. This code works:

//creating a path
//github.com/iccir/XUIKit
NSBezierPath * path = [NSBezierPath bezierPathWithRoundedRect:CGRectMake(0,0,325,80) byRoundingCorners:XUIRectCornerBottomLeft|XUIRectCornerBottomRight cornerRadii:CGSizeMake(6, 6)];
CAShapeLayer * layer = [CAShapeLayer layer];
layer.path = [path CGPath];
self.scrollView.wantsLayer = TRUE;
self.scrollView.layer.mask = layer;

My issue was the path I was creating originally had a .height of 0.

Also note that if the table view changes size, the layer mask has to change as well.

Cocoa: Masking NSTableView with rounded bottom corners

1 Answers