2

I am trying to make a NSScrollView with clipped corners, similar to the Twitter app:

enter image description here

I have a NSScrollView subclass which I added the following code:

- (void)drawRect:(NSRect)dirtyRect {
    NSBezierPath *pcath = [NSBezierPath bezierPathWithRoundedRect:[self bounds] xRadius:kDefaultCornerRadius yRadius:kDefaultCornerRadius];
    [path setClip];

    [super drawRect:dirtyRect];
}

I expected the content of the NSScrollView to have rounded corners, but it is not respecting the clipped path. How can I do this?




UPDATE & CLARIFICATION
I know how to make a custom NSScroller, I know how to make it transparent overlay. All I am asking is how to make the NSSCrollView clip its corners, including everything it contains. The NSScrollView is inside a NSView which has a background that could change, meaning a view overlay to fake the rounded corners is not an option.

coneybeare
  • 33,113
  • 21
  • 131
  • 183
  • It is possible that the super implementation of drawRect declares sets a news clip. Try drawing the parts one by one rather than calling super and see if that changes anything. – sosborn Mar 11 '11 at 03:10
  • Do you mean draw the contentView and the documentView myself instead of asking super to do it? It seem sI would have to re-implement all of the NSScrollView scrolling logic to do this. I am hoping there is a way without reinventing the wheel. – coneybeare Mar 11 '11 at 03:16
  • Check the docs for NSScroller. Typically an NSScrollView will have two NSScrollers, an x and a y. The NSScroller class exposes methods for drawing. If you are going for the same look as the twitter client you will have to subclass NSScroller anyway. – sosborn Mar 11 '11 at 05:32
  • You're comments aren't pertaining to the question. I already have implemented a custom scroller and know how to draw those parts. What I don't know how to do is ensure that the documentView gets rounded corners by honoring the clippedPath. – coneybeare Mar 11 '11 at 06:11
  • Sorry, but it wasn't clear from your question how far you had progressed. I played around a little with this and it seems clear that you will have to subclass either NSClipView or the underlying documents view for this to work. – sosborn Mar 11 '11 at 06:49
  • I have tried adding the clip to the clipview, the document view… everywhere. I must be missing something, or this is impossible. Starting a bounty... – coneybeare Mar 13 '11 at 22:13
  • I'm not sure if that'll help, but recently I've looked at a nice demo with example of rounded corners, see https://github.com/bobmccune/Core-Animation-Demos – Piotr Byzia Mar 15 '11 at 09:29

3 Answers3

6

After much fiddling, I just discovered that NSScrollView's can be made to have rounded corners by simply giving it a backing layer and setting that layer's corner radius provided you also do the same to it's internal NSClipView. Both are required, which now makes sense, since it's the clip view that actually provides the viewable window into the NSScrollView's document view.

NSScrollView * scrollView = ...;

// Give the NSScrollView a backing layer and set it's corner radius.
[scrollView setWantsLayer:YES];
[scrollView.layer setCornerRadius:10.0f];

// Give the NSScrollView's internal clip view a backing layer and set it's corner radius.
[scrollView.contentView setWantsLayer:YES];
[scrollView.contentView.layer setCornerRadius:10.0f];
Dalmazio
  • 1,835
  • 2
  • 23
  • 40
  • Note however, that this doesn't seem to work for NSScrollView's that contain NSTextView's. In this case, we need to revert back to the masking layer approach. – Dalmazio Apr 03 '12 at 10:11
5

You can apply a mask to a view's layer:

[myScrollView setWantsLayer: YES];
[myScrollView layer].mask = ...;

The mask is another CALayer. So in this case you'd create a CALayer, set its background colour to opaque, set its bounds to match the scrollview, and give it a cornerRadius of, say, 8.0.

The result would be that the scroll view and all its contents would appear to be masked to a roundrect with a corner radius of 8px.

Jonathan Grynspan
  • 43,286
  • 8
  • 74
  • 104
  • This seems to work, but I need more flexibility in the corners. I only need two of the corners rounded, the rounding code from above is just an example. Not only that, but when I do this on the scrollview, all internal contents cease to draw, and I am unsure of how to recreate it all without using drawRect. – coneybeare Mar 14 '11 at 20:33
  • You can set the mask layer's content property to just about anything. Take a look at the Core Animation Cookbook—it shoukd help you with Core Animation drawing. (Don't have the URL handy, unfortunately.) – Jonathan Grynspan Mar 14 '11 at 22:31
  • This works, but is bringing a ton of additional problems with it (nsview flickering in the scrollviews, weird artifacts showing in the clipped corners and issues with resizing the layer in realtime). I am hoping there is another answer as the effort required to do it this way seems quite large. Here is a brief screencast of the issues I am seeing with this implementation: http://screencast.com/t/wKt5vCjoWPu – coneybeare Mar 16 '11 at 04:32
  • I've used this approach as well, and it "sort of" works. Seems to have artifacts though, and depends on what else is in the view hierarchy. In addition, if you're using multiple masks, say in a superview that shares a bounds edge, there appears to be some compounding effect between the masks. I would suggest to file a bug report with Apple, and request the ability to round `NSScrollView`'s via the standard `CALayer` approach of giving it a backing layer and setting its `cornerRadius` property. It seems that there are quite a few useful applications for a rounded `NSScrollView`. – Dalmazio Apr 03 '12 at 08:00
3

Have you tried overriding

- (BOOL)isOpaque {
  return NO;
}

And setting the scroll view's -setDrawsBackground: to NO and just leave the view without clipping and just draw the corners with [NSColor clearColor] since this will also clear the underlying color and simulate a round effect.

  • Just read your updated requirements "background that could change" so I guess my answer is obsolete. –  Mar 18 '11 at 13:19