Draw NSTableView Alternating Rows Like iTunes 11

Question

I am aware that there are other questions on SO about changing alternating row colors. That's easy and it's not what I want to do.

I want to draw custom alternating-colored rows in a view-based NSTableView that look like those from iTunes 11 (slight bezel at the top and bottom of the row, as shown in this screenshot):

NOTE:

I know I can subclass NSTableRowView and do my custom drawing there. However, this is NOT an acceptable answer because the custom row will only be used for rows that have data in the table. In other words, if the table has only 5 rows, those 5 rows will use my custom NSTableRowView class but the remaining "rows" in the rest of the table (which are empty) will use the standard alternating colors. In that case, the first 5 rows will show the bezel and the remaining ones won't. Not good.

So, how can I hack NSTableView to draw these styled alternating rows for both filled and empty rows?

Kashmiri

Tempted to close this as a dupe of indragie's question, simply because his solution should indirectly solve your question. – Laborer

I saw that post before I wrote mine. The trouble is that he wants to use solid colors for the alternating rows, which is easy. I want to do custom drawing for the alternating rows, which is an entirely different problem. I can't use his approach because I need to draw the bezels; not just fill rows with alternating NSColors. – Kashmiri

The tricks used in that question involve picking colors and filling rects (and more importantly, finding the right method override to do it in). But once you're in a place where you can draw a filled rect, what's preventing you from drawing a white line across the top of that rect and a gray line across the bottom? – Executrix

Answer 1

That "slight bezel", as you put it, can actually be easily done with a little cheating on our part. Because, if you look closely, the top of every cell is a slightly lighter blue color than the dark alternating row, and the bottom of every cell is a dark grayish color, you can subclass NSTableView, then override - (void)drawRow:(NSInteger)row clipRect:(NSRect)clipRect:

- (void)drawRow:(NSInteger)row clipRect:(NSRect)clipRect
{
    //Use the drawing code from https://mcmap.net/q/676340/-change-nstableview-alternate-row-colors, but change the colors to
    //look like iTunes's alternating rows.
    NSRect cellBounds = [self rectOfRow:row];
    NSColor *color = (row % 2) ? [NSColor colorWithCalibratedWhite:0.975 alpha:1.000] : [NSColor colorWithCalibratedRed:0.932 green:0.946 blue:0.960 alpha:1.000];
    [color setFill];
    NSRectFill(cellBounds);

    /* Slightly dark gray color */
    [[NSColor colorWithCalibratedWhite:0.912 alpha:1.000] set];
    /* Get the current graphics context */
    CGContextRef currentContext = [[NSGraphicsContext currentContext]graphicsPort];
    /*Draw a one pixel line of the slightly lighter blue color */
    CGContextSetLineWidth(currentContext,1.0f);
    /* Start the line at the top of our cell*/
    CGContextMoveToPoint(currentContext,0.0f, NSMaxY(cellBounds));
    /* End the line at the edge of our tableview, for multi-columns, this will actually be overkill*/
    CGContextAddLineToPoint(currentContext,NSMaxX(cellBounds), NSMaxY(cellBounds));
    /* Use the context's current color to draw the line */
    CGContextStrokePath(currentContext);

    /* Slightly lighter blue color */
    [[NSColor colorWithCalibratedRed:0.961 green:0.970 blue:0.985 alpha:1.000] set];
    CGContextSetLineWidth(currentContext,1.0f);
    CGContextMoveToPoint(currentContext,0.0f,1.0f);
    CGContextAddLineToPoint(currentContext,NSMaxX(self.bounds), 1.0f);
    CGContextStrokePath(currentContext);

    [super drawRow:row clipRect:clipRect];
}

Which, when done in a quick little tableview, looks like this:

But what to do about the top and bottom of the tableview? After all, they'll still be either an ugly white, or the default alternating rows color. Well, as Apple revealed (in a talk titled, interestingly enough View Based NSTableView, Basic To Advanced), you can override -(void)drawBackgroundInClipRect:(NSRect)clipRect and do a little math to draw the background of the tableview like extra rows. A quick implementation looks something like this:

-(void)drawBackgroundInClipRect:(NSRect)clipRect
{
    // The super class implementation obviously does something more
    // than just drawing the striped background, because
    // if you leave this out it looks funny
    [super drawBackgroundInClipRect:clipRect];

    CGFloat   yStart   = 0;
    NSInteger rowIndex = -1;

    if (clipRect.origin.y < 0) {
        while (yStart > NSMinY(clipRect)) {
            CGFloat yRowTop = yStart - self.rowHeight;

            NSRect rowFrame = NSMakeRect(0, yRowTop, clipRect.size.width, self.rowHeight);
            NSUInteger colorIndex = rowIndex % self.colors.count;
            NSColor *color = [self.colors objectAtIndex:colorIndex];
            [color set];
            NSRectFill(rowFrame);

            /* Slightly dark gray color */
            [[NSColor colorWithCalibratedWhite:0.912 alpha:1.000] set];
            /* Get the current graphics context */
            CGContextRef currentContext = [[NSGraphicsContext currentContext]graphicsPort];
            /*Draw a one pixel line of the slightly lighter blue color */
            CGContextSetLineWidth(currentContext,1.0f);
            /* Start the line at the top of our cell*/
            CGContextMoveToPoint(currentContext,0.0f, yRowTop + self.rowHeight - 1);
            /* End the line at the edge of our tableview, for multi-columns, this will actually be overkill*/
            CGContextAddLineToPoint(currentContext,NSMaxX(clipRect), yRowTop + self.rowHeight - 1);
            /* Use the context's current color to draw the line */
            CGContextStrokePath(currentContext);

            /* Slightly lighter blue color */
            [[NSColor colorWithCalibratedRed:0.961 green:0.970 blue:0.985 alpha:1.000] set];
            CGContextSetLineWidth(currentContext,1.0f);
            CGContextMoveToPoint(currentContext,0.0f,yRowTop);
            CGContextAddLineToPoint(currentContext,NSMaxX(clipRect), yRowTop);
            CGContextStrokePath(currentContext);

            yStart -= self.rowHeight;
            rowIndex--;
        }
    }
}

But then, this leaves the bottom of the tableview that same ugly blank white color! So, we have to also override -(void)drawGridInClipRect:(NSRect)clipRect. Yet another quick implementation looks like this:

-(void)drawGridInClipRect:(NSRect)clipRect {
    [super drawGridInClipRect:clipRect];

    NSUInteger numberOfRows = self.numberOfRows;
    CGFloat yStart = 0;
    if (numberOfRows > 0) {
        yStart = NSMaxY([self rectOfRow:numberOfRows - 1]);
    }
    NSInteger rowIndex = numberOfRows + 1;

    while (yStart < NSMaxY(clipRect)) {
        CGFloat yRowTop = yStart - self.rowHeight;

        NSRect rowFrame = NSMakeRect(0, yRowTop, clipRect.size.width, self.rowHeight);
        NSUInteger colorIndex = rowIndex % self.colors.count;
        NSColor *color = [self.colors objectAtIndex:colorIndex];
        [color set];
        NSRectFill(rowFrame);

        /* Slightly dark gray color */
        [[NSColor colorWithCalibratedWhite:0.912 alpha:1.000] set];
        /* Get the current graphics context */
        CGContextRef currentContext = [[NSGraphicsContext currentContext]graphicsPort];
        /*Draw a one pixel line of the slightly lighter blue color */
        CGContextSetLineWidth(currentContext,1.0f);
        /* Start the line at the top of our cell*/
        CGContextMoveToPoint(currentContext,0.0f, yRowTop - self.rowHeight);
        /* End the line at the edge of our tableview, for multi-columns, this will actually be overkill*/
        CGContextAddLineToPoint(currentContext,NSMaxX(clipRect), yRowTop - self.rowHeight);
        /* Use the context's current color to draw the line */
        CGContextStrokePath(currentContext);

        /* Slightly lighter blue color */
        [[NSColor colorWithCalibratedRed:0.961 green:0.970 blue:0.985 alpha:1.000] set];
        CGContextSetLineWidth(currentContext,1.0f);
        CGContextMoveToPoint(currentContext,0.0f,yRowTop);
        CGContextAddLineToPoint(currentContext,NSMaxX(self.bounds), yRowTop);
        CGContextStrokePath(currentContext);

        yStart += self.rowHeight;
        rowIndex++;
    }
}

When all is said and done, we get nice little fake tableview cell rows on the top and bottom of our clipview that looks a little like this:

The full subclass can be found here.

Laborer

Well, after trying it out, this is close. However, when the tableView in question is an NSOutlineView, the drawing gets all screwed up when expanding/collapsing items in the tree. That's obviously got to do with manipulating the clipRects. I'll keep at it and see if I can tweak things to solve that issue. – Kashmiri

You didn't specify that. I'd have to redo the drawing code for an outline view. TableView or nothing, basically. – Laborer

CodaFi's solution is close, but not exact. Some smug neckbeards closed this thread, so if anyone in the future is looking for how to do this, I've worked out a bulletproof method that I'll share if you contact me. (I'd post it here, but the thread is obviously closed.) – Kashmiri

@Bryan, I'd love a gist (or for you to post a suggestion/comment on the linked gist). Or, twitter? – Laborer

Sure thing. I'll put up a gist when I get a few minutes. The solution involved multiple angles, including some informal delegate methods to handle the case where an NSOutlineView expands/collapses. But I've got a 100% bulletproof and (most importantly) performant solution in place. – Kashmiri

@Kashmiri - did you ever do the gist? I'd really like to see it. – Cannery

Answer 2

you can use

- (void)setUsesAlternatingRowBackgroundColors:(BOOL)useAlternatingRowColors

with useAlternatingRowColors YES to specify standard alternating row colors for the background, NO to specify a solid color.

Danyelledanyette

This is the correct answer. There is no need to subclass anything. It is already provided by the original NSTableView class. You can either do it by coding as what it says above, or do it in Interface Builder: Check "Alternating rows" in NSTableView, not the scroll view where table view resides. – Heywood

Answer 3

I found that you can draw both the top and bottom part in drawBackgroundInClipRect -- essentially in the missing else clause of @CodaFi's solution.

So here's an approach in Swift, assuming you have access to backgroundColor and alternateBackgroundColor:

override func drawBackground(inClipRect clipRect: NSRect) {

    // I didn't find leaving this out changed appearance at all unlike
    // CodaFi stated.
    super.drawBackground(inClipRect: clipRect)

    guard usesAlternatingRowBackgroundColors else { return }

    drawTopAlternatingBackground(inClipRect: clipRect)
    drawBottomAlternatingBackground(inClipRect: clipRect)
}

fileprivate func drawTopAlternatingBackground(inClipRect clipRect: NSRect) {

    guard clipRect.origin.y < 0 else { return }

    let backgroundColor = self.backgroundColor
    let alternateColor = self.alternateBackgroundColor

    let rectHeight = rowHeight + intercellSpacing.height
    let minY = NSMinY(clipRect)
    var row = 0

    while true {

        if row % 2 == 0 {
            backgroundColor.setFill()
        } else {
            alternateColor.setFill()
        }

        let rowRect = NSRect(
            x: 0,
            y: (rectHeight * CGFloat(row) - rectHeight),
            width: NSMaxX(clipRect),
            height: rectHeight)
        NSRectFill(rowRect)
        drawBezel(inRect: rowRect)

        if rowRect.origin.y < minY { break }

        row -= 1
    }
}

fileprivate func drawBottomAlternatingBackground(inClipRect clipRect: NSRect) {

    let backgroundColor = self.backgroundColor
    let alternateColor = self.alternateBackgroundColor

    let rectHeight = rowHeight + intercellSpacing.height
    let maxY = NSMaxY(clipRect)
    var row = rows(in: clipRect).location

    while true {

        if row % 2 == 1 {
            backgroundColor.setFill()
        } else {
            alternateColor.setFill()
        }

        let rowRect = NSRect(
            x: 0,
            y: (rectHeight * CGFloat(row)),
            width: NSMaxX(clipRect),
            height: rectHeight)
        NSRectFill(rowRect)
        drawBezel(inRect: rowRect)

        if rowRect.origin.y > maxY { break }

        row += 1
    }
}

func drawBezel(inRect rect: NSRect) {

    let topLine = NSRect(x: 0, y: NSMaxY(rect) - 1, width: NSWidth(rect), height: 1)
    NSColor(calibratedWhite: 0.912, alpha: 1).set()
    NSRectFill(topLine)

    let bottomLine = NSRect(x: 0, y: NSMinY(rect)   , width: NSWidth(rect), height: 1)
    NSColor(calibratedRed:0.961, green:0.970, blue:0.985, alpha:1).set()
    NSRectFill(bottomLine)
}

And in case you don't draw in a NSTableRowView subclass:

override func drawRow(_ row: Int, clipRect: NSRect) {

    let rowRect = rect(ofRow: row)
    let color = row % 2 == 0 ? self.backgroundColor : self.alternateBackgroundColor
    color.setFill()
    NSRectFill(rowRect)
    drawBezel(inRect: rowRect)
}

Brisbane