Using a patternimage for a View inside an NSScrollView

Question

I have a quite big problem, I am really not able to solve myself.

The result should look like this:

enter image description here

This image was made with photoshop and is part of the interface I try to build.

In the middle you see something, that should be a list of projects, you should be able to scroll, if it the list is bigger then the view.

So I am making a scrollview like this: (for some reason I cannot do this in the interface builder and want this to work programmatically)

NSScrollView *projectsListView = [[NSScrollView alloc] initWithFrame:NSMakeRect(15, 2, 801, 588)];
[projectsListView setHasVerticalScroller:YES];

Then I create the content view and set a pattern image as backgroundcolor:

NSClipView  *contentView      = [[NSClipView  alloc] initWithFrame:NSMakeRect(0, 0, 
[projectsListView frame].size.width, [projectsListView frame].size.height+(98*2))];
[contentView setBackgroundColor:[NSColor colorWithPatternImage:[NSImage imageNamed:@"BoxLineBackground"]]];
[contentView setDrawsBackground:YES];

Then set the view as document view:

[projectsListView setDocumentView:contentView];

Should work, right? However the content view gets clipped and looks like this while scrolling:

enter image description here

I tried this to fix it, but it does nothing:

[[projectsListView documentView] setCopiesOnScroll:NO];

I also tried this, but it causes the contentview not to scroll at all. The image stays the same, but I can move the scroller normally.

[[projectsListView contentView] setCopiesOnScroll:NO];

If I try to set the contentview with setContentView: instead of using setDocumentView: it may work, but the scroller is gone, so it is also not working correctly.

I would really like to use the patternimage method, because I cannot tell how long the list will be. It depends on the user.

An additional problem then would be to get the whole thing rounded, but that does not matter that much. I tried to use a transparent border image and to overlay the NSScrollView with it using an NSImageView, but again this causes corruption, because it clips and moves the overlaying parts of the image view together with the content of the scrollview.

Anyone having an idea, how to achieve this?

Thanks

Rob Keniger Rob Keniger · Accepted Answer · 2011-12-14T03:54:01

Rather than re-inventing the wheel, this interface should be implemented with a view-based NSTableView. The table cell UI could then be created in Interface Builder and you could control the background of the cells using the various NSTableView delegate methods. NSTableView will handle redraws upon scrolling correctly.

To handle the pattern color, just make the background of your cell a custom subclass of NSTableCellView and implement your pattern drawing code.

Regardless of all this, the problem you are having is due to an NSScrollView drawing optimisation. You can turn this off by calling [[yourScrollView contentView] setCopiesOnScroll:NO] on your NSScrollView instance. You can also set this in Interface Builder, just un-check the Copies on Scroll checkbox.

Using a patternimage for a View inside an NSScrollView

2 Answers