NSTableRowView/NSTableCellView how to set custom color to selected row?

Question

I am trying to implement custom row color when table row is selected.

-(void)tableViewSelectionDidChange:(NSNotification *)notification{


    NSInteger selectedRow = [_mainTable selectedRow];

    NSTableCellView *cell = [_mainTable rowViewAtRow:selectedRow makeIfNecessary:NO];

    cell.layer.backgroundColor = [NSColor redColor].CGColor;

    NSLog(@"selected");
}

But this is not working. I find that Apple documentation very confusing (maybe I am wrong). I am not experienced with Mac programming.

Can someone suggest any solution? Basically I need that selection Color to be transparent.

your question has been already answered.. go here http://stackoverflow.com/questions/11920156/custom-uitableviewcell-selection-style — Rana Tallal, Oct 27 '14 at 17:18
you can apply the same logic as ios.. set selectionstyle to non, and on selection change the color to your desired color. and change back with an animation maybe — Rana Tallal, Oct 27 '14 at 17:31
I am trying with drawSelectionInRect but that is not called. — Johnny, Oct 27 '14 at 17:34
It's not just Apple's documentation that is confusing. How about your topic itself? You want to colorize what? Text? Or cell background? And you don't even mention whether you are using cell-based or view-based. — El Tomato, Oct 27 '14 at 17:34
@ElTomato I quote my self "I am trying to implement custom row color when table row is selected." — Johnny, Oct 27 '14 at 17:35
@ElTomato and please do not comment if you do not have anything to constructive say. Read question please. — Johnny, Oct 27 '14 at 17:36
@Johnny The accepted answer will not properly deselect the row (it needs to be handled manually). To prevent this issue, please try using my answer below. — minimalpop, Dec 19 '16 at 16:55

minimalpop · Answer 1 · 2016-12-19T17:00:52.263

Solution

This should be done by subclassing NSTableRowView and then returning your subclass in with the NSTableView delegate method
-(NSTableRowView*)tableView:(NSTableView *)tableView rowViewForRow:(NSInteger)row

Subclassing NSTableRowView provides much more flexibility when modifying your row view. Returning your subclass in the NSTableView delegate method above will also automatically remove the background selection color when clicking from one row to the next (which is an open issue in the other answer provided).

Steps

First, subclass NSTableRowView and override drawSelectionInRect to change its background color when selected:

@implementation MyTableRowView

- (void)drawSelectionInRect:(NSRect)dirtyRect
{
    [super drawSelectionInRect:dirtyRect];
    [[NSColor yellowColor] setFill];
    NSRectFill(dirtyRect);
}

Next, return your subclassed row view using the rowViewForRow NSTableView delegate method:

- (NSTableRowView*)tableView:(NSTableView *)tableView rowViewForRow:(NSInteger)row
{
    static NSString* const kRowIdentifier = @"MyTableRow";
    MyTableRowView* myRowView = [tableView makeViewWithIdentifier:kRowIdentifier owner:self];
    if (!myRowView) {
        myRowView = [[MyTableRowView alloc] initWithFrame:NSZeroRect];
        myRowView.identifier = kRowIdentifier;
    }
    return rowView;
}

Using this approach, you can also easily override other elements like the separator color. To do this, override the drawSeparatorInRect method in your NSTableRowView subclass like so:

- (void)drawSeparatorInRect:(NSRect)dirtyRect
{
    // Change the separator color if the row is selected
    if (self.isSelected) [[NSColor orangeColor] setFill];
    else [[NSColor grayColor] setFill];
    // Fill the seperator
    dirtyRect.origin.y = dirtyRect.size.height - 1.0;
    dirtyRect.size.height = 1.0;
    NSRectFill(dirtyRect);
}

Resources

Overriding NSTableRowView display settings https://developer.apple.com/reference/appkit/nstablerowview

NSTableview rowViewForRow delegate method https://developer.apple.com/reference/appkit/nstableviewdelegate/1532417-tableview

3

This should be the answer. – Ke Yang Jan 31 '18 at 07:35

score 7 · Accepted Answer · edited Apr 15 '18 at 22:24

7

first set tableview selection highlight style to

 NSTableViewSelectionHighlightStyleNone

then in your tablView delegate implement

tableView:shouldSelectRow:

and write this code inside it:

NSTableViewRow *row= [_mainTable rowViewAtRow:selectedRow makeIfNecessary:NO];
row.backgroundColor = [your color];
return YES;

read these also https://developer.apple.com/library/mac/documentation/Cocoa/Reference/NSTableViewDelegate_Protocol/index.html#//apple_ref/occ/intfm/NSTableViewDelegate/tableView:rowViewForRow:

for selection style https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSTableView_Class/index.html#//apple_ref/occ/instp/NSTableView/selectionHighlightStyle

edited Apr 15 '18 at 22:24

Léo Natan

56,823
9
150
195

answered Oct 27 '14 at 17:57

Rana Tallal

424
7
15

1

for NSTableRowView I needed to set tableRowView.needsDisplay = YES to ensure the view will be redrawn after changing its color. – sust86 Feb 16 '15 at 10:00
3

how do you the unselection process? – bithavoc May 27 '16 at 00:18
2

Why do you give an iOS sample (UITableViewRow... UI* is iOS only) when being asked about a NSTableView? – Mecki Jun 22 '16 at 13:41
dont know abt now but back then it was the same syntax you just needed to change UI to NS and vice versa it worked – Rana Tallal Jun 24 '16 at 17:58
1

This leaves all previously-selected rows colored. – Ky - Oct 03 '16 at 13:21

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

This is to set the custom color to the selected row and also the highlighted text color. The output should look something like this,

In the above screenshot, we are doing

Setting the background selected color to white

Adding the corner radius

Changing the text color to blue

Adding the blue stroke color

You can do a lot more customization but this answer covers above-mentioned points.

1. Start with subclassing NSTableRowView

class CategoryTableRowView: NSTableRowView {

override func drawSelection(in dirtyRect: NSRect) {
    if selectionHighlightStyle != .none {
        let selectionRect = bounds.insetBy(dx: 2.5, dy: 2.5)
        NSColor(calibratedRed: 61.0/255.0, green: 159.0/255.0, blue: 219.0/255.0, alpha: 1.0).setStroke()
        NSColor(calibratedWhite: 1.0, alpha: 1.0).setFill()
        let selectionPath = NSBezierPath(roundedRect: selectionRect, xRadius: 25, yRadius: 25)
        selectionPath.fill()
        selectionPath.stroke()
    }
  }
}

2. Return custom CategoryTableRowView() in the NSTableViewDelegate method

func tableView(_ tableView: NSTableView, rowViewForRow row: Int) -> NSTableRowView? {
      return CategoryTableRowView()
}

3. Make sure you have selectionHighlightStyle to regular in your ViewController class

override func viewDidLoad() {
     super.viewDidLoad()
     self.tableView.selectionHighlightStyle = .regular
}

4. To set the textColor, create a subclass of NSTableCellView

class CategoryCellView: NSTableCellView {

@IBOutlet weak var categoryTextField: NSTextField!

override var backgroundStyle: NSView.BackgroundStyle {
    willSet{
        if newValue == .dark {
            categoryTextField.textColor = NSColor(calibratedRed: 61.0/255.0, green: 159.0/255.0, blue: 219.0/255.0, alpha: 1.0)
        } else {
            categoryTextField.textColor = NSColor.black
        }
    }
  }
}

override the backgroundStyle property and set the desired color for the text.

Note: In my case, I have a custom cell which has a categoryTextField outlet.So to set the text color I use: categoryTextField.textColor = NSColor.black

5. Set custom class inside storyboard

I hope this helps. Thanks.

For objc you can use override `NSTableCellView.setBackgroundStyle:` to adjust the row based on selection. See [docs](https://developer.apple.com/documentation/appkit/nstablecellview/1483206-backgroundstyle?language=objc). — C. Bess, Dec 24 '21 at 17:20

NSTableRowView/NSTableCellView how to set custom color to selected row?

3 Answers3