Fade effect at top and bottom of NSTableView/NSOutlineView

Question

I'm looking for a way to draw a fade effect on a table view (and outline view, but I think it will be the same) when the content is scrolled. Here is an example from the Fantastical app:

Also a video of a similar fade on QuickLook windows here.

---

To make this I tried subclassing the scrollview of a tableview with this code:

#define kFadeEffectHeight 15

@implementation FadingScrollView

- (void)drawRect: (NSRect)dirtyRect
{
    [super drawRect: dirtyRect];

    NSGradient* g = [[NSGradient alloc] initWithStartingColor: [NSColor blackColor] endingColor: [NSColor clearColor]];

    NSRect topRect = self.bounds;
    topRect.origin.y = self.bounds.size.height - kFadeEffectHeight;
    topRect.size.height = kFadeEffectHeight;

    NSRect botRect = self.bounds;
    botRect.size.height = kFadeEffectHeight;

    [NSGraphicsContext saveGraphicsState];
    [[NSGraphicsContext currentContext] setCompositingOperation: NSCompositeDestinationAtop];
    // Tried every compositing operation and none worked. Please specify wich one I should use if you do it this way

    [g drawInRect: topRect angle: 90];
    [g drawInRect: botRect angle: 270];

    [NSGraphicsContext restoreGraphicsState];
}

...but this didn't fade anything, probably because this is called before the actual table view is drawn. I have no idea on how to do this :(

By the way, both the tableview and the outlineview I want to have this effect are view-based, and the app is 10.7 only.

Answer 1

In Mac OS X (as your question is tagged), there are several gotchas that make this difficult. This especially true on Lion with elastic scrolling.

I've (just today) put together what I think is a better approach than working on the table or outline views directly: a custom NSScrollView subclass, which keeps two "fade views" tiled in the correct place atop its clip view. JLNFadingScrollView can be configured with the desired fade height and color and is free/open source on Github. Please respect the license and enjoy. :-)