NSTableView with rounded corners

3
votes

I'm trying to customize the UI of my application and I want my NSTableView to have rounded corners. So I subclassed NSTableView and got this:

Imgur

However, when I populate the table and select a row, the selection is drawn over the border like this:

Imgur

I've tried adding a clip in the table view drawing code and it doesn't work. Any suggestions for how I can fix this?

Edit:

My drawing code in the NSTableView is the following:

- (void)drawRect:(NSRect)dirtyRect {
    [NSGraphicsContext saveGraphicsState];
    NSRect frame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
    [[NSBezierPath bezierPathWithRoundedRect:frame xRadius:3.6 yRadius:3.6] addClip];
    [super drawRect:dirtyRect];
    [NSGraphicsContext restoreGraphicsState];
}

The actual rounded frame is drawn in the NSScrollView drawRect method. The interesting thing is that this does clip the selection of the very first and very last rows:

Imgur

But not when the table is scrolling:

Imgur

So the question remains: how can I clip all drawing inside the rounded frame of the NSScrollView?

2
macoscocoanstableviewrounded-corners
Would you post your code that does the clipping? – paulmelnikow
Did you override drawRect and initWithRect? – Ethan Reesor
@FireLizzard what would I put in the initWithRect method? I posted my drawRect method in the NSTableView above. The actual drawing of the frame takes place in the drawRect method of the NSScrollView. – danjonweb
I don't know all that much about subclassing NSView. You likely don't have to override initWithRect, I just put it out there as a possibility. I wonder if your problem has something to do with the fact that you call [super drawRect:] after you clip. Just ideas. – Ethan Reesor

2 Answers

6
votes

I found that you can call this on the container scroll view of the table view.

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

That's all I needed and it works. No subclassing needed.

3
votes

I was able to solve this pretty nicely using CALayer. After trying subclassing everything from NSScrollView to NSTableView to NSClipView, and still getting the rendering problems shown above, I finally simply added this code to the drawRect of the NSScrollView subclass:

if (!self.contentView.wantsLayer) {
    [self.contentView setWantsLayer:YES];
    [self.contentView.layer setCornerRadius:4.0f];
}

And then I draw the frame in the same drawRect method of the NSScrollView. It solves all the problems above.