Change selection color on view-based NSTableView

Question

Standard highlighting color in OS X applications is blue.

Is it possible to change it to another color, e.g. gray?

Note that I am using the new view-based NSTableView available starting from OS X 10.7.

score 78 · Accepted Answer · answered Mar 07 '12 at 01:28

78

Since you're using the view based NSTableView, you can subclass NSTableRowView, feed it to the table delegate method - (NSTableRowView *)tableView:(NSTableView *)tableView rowViewForRow:(NSInteger)row;, then customize your selection in the row view class.

Here's an example:

- (void)drawSelectionInRect:(NSRect)dirtyRect {
    if (self.selectionHighlightStyle != NSTableViewSelectionHighlightStyleNone) {
        NSRect selectionRect = NSInsetRect(self.bounds, 2.5, 2.5);
        [[NSColor colorWithCalibratedWhite:.65 alpha:1.0] setStroke];
        [[NSColor colorWithCalibratedWhite:.82 alpha:1.0] setFill];
        NSBezierPath *selectionPath = [NSBezierPath bezierPathWithRoundedRect:selectionRect xRadius:6 yRadius:6];
        [selectionPath fill];
        [selectionPath stroke];
    }
}

answered Mar 07 '12 at 01:28

James Chen

10,294
1
38
36

6

[WWDC 2011 session 120 "View Based NSTableView Basic to Advanced"](https://developer.apple.com/videos/wwdc/2011/) gives a similar example, and also describes how to implement different colours depending on whether the table is firstResponder / "active selection" / "emphasized" or not. – Ashley Aug 02 '14 at 16:50
9

It seems that if the table view is declared as a _source list_ `drawSelectionInRect:` is not called at all on OS X 10.10 Yosemite. Only when a table is declared as a _regular_ table will this happen on Yosemite. – Dev Oct 17 '14 at 12:35
2

https://developer.apple.com/library/mac/samplecode/TableViewPlayground/Introduction/Intro.html – johndpope Feb 19 '15 at 04:20
1

As far as I can tell, this also overrides the background color of the "blurred" state of the table (like when you select a row, then click into an `NSTextField` somewhere else in your UI). This background color remains in place but the text goes dark. This doesn't look good if you use a dark highlight color. Any idea how to let the table use its default gray for the "blurred" table state? – Clifton Labrum Aug 14 '17 at 22:52
@Dev's comment is correct and should be added to the accepted answer. – Grimxn Oct 28 '18 at 09:34
[View Based NSTableView Basic to Advanced](https://developer.apple.com/videos/play/wwdc2011/120/) – fractor May 22 '19 at 13:00

score 22 · Answer 2 · answered Sep 30 '16 at 15:19

Here is James Chen's solution in Swift 3. I've also added the delegate method.

class MyNSTableRowView: NSTableRowView {

    override func drawSelection(in dirtyRect: NSRect) {
        if self.selectionHighlightStyle != .none {
            let selectionRect = NSInsetRect(self.bounds, 2.5, 2.5)
            NSColor(calibratedWhite: 0.65, alpha: 1).setStroke()
            NSColor(calibratedWhite: 0.82, alpha: 1).setFill()
            let selectionPath = NSBezierPath.init(roundedRect: selectionRect, xRadius: 6, yRadius: 6)
            selectionPath.fill()
            selectionPath.stroke()
        }
    }
}

NSTableViewDelegate:

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

score 15 · Answer 3 · edited Sep 03 '13 at 21:59

15

Use the following code in response to the NSTableViewDelegate protocol tableViewSelectionDidChange:

Get the NSTableRowView for the selected row and call the method setEmphasized on it. When setEmphasized is set to YES you get the blue highlight, when NO you get the gray highlight.

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

     NSInteger selectedRow = [myTableView selectedRow];
     NSTableRowView *myRowView = [myTableView rowViewAtRow:selectedRow makeIfNecessary:NO];
     [myRowView setEmphasized:NO];
}

edited Sep 03 '13 at 21:59

Scott Allen

1,199
1
12
14

answered Feb 25 '13 at 21:34

Jean-Pierre

562
4
5

Thanks. It is really a useful answer. – Vignesh May 12 '14 at 08:16
1

This gives a dancing effect of blue then gray... bad user experience. – Anoop Vaidya Aug 11 '14 at 12:15
This solution is not work when we click on the row first time. from second click it will work. – CrazyCoder Jun 18 '15 at 13:04
1

if you use same code while SelectionIsChanging method, it works for the first click too – Nininea Nov 10 '16 at 10:48
if I minimize application and open it again it still show blue color – Nininea Nov 10 '16 at 10:49

score 6 · Answer 4 · edited Jul 23 '15 at 15:09

Some modifications to Jean-Pierre answer

Use the following code in response to the NSTableViewDelegate protocol tableViewSelectionDidChange:

Get the NSTableRowView for the selected row and call the method setEmphasized on it. When setEmphasized is set to YES you get the blue highlight, when NO you get the gray highlight.

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

 NSInteger selectedRow = [myTableView selectedRow];
 NSTableRowView *myRowView = [myTableView rowViewAtRow:selectedRow makeIfNecessary:NO];
[myRowView setSelectionHighlightStyle:NSTableViewSelectionHighlightStyleRegular];
[myRowView setEmphasized:NO];
}

And to avoid dancing effect of blue then gray set

[_tableView setSelectionHighlightStyle:NSTableViewSelectionHighlightStyleNone];

I works , but it I minimize application and open it again, it again it blue — Nininea, Nov 10 '16 at 12:36

score 3 · Answer 5 · answered Feb 11 '15 at 16:44

When using Swift you can do this on 10.10 for view based Cells

Subclass the NSTableCellView and implement this:

//override to change background color on highlight
override var backgroundStyle:NSBackgroundStyle{
    //check value when the style was setted
    didSet{
        //if it is dark the cell is highlighted -> apply the app color to it
        if backgroundStyle == .Dark{
            self.layer!.backgroundColor = yourColor
        }
        //else go back to the standard color
        else{
            self.layer!.backgroundColor = NSColor.clearColor().CGColor
        }
    }
}

Note that the NSTableView highlight style must be set to Regular if it is on SourceList it will cause some strange clipping.

This is not the cleanest solution but it works good on yosemite

It doesn't work. 10.10; view based cell; nstablecellview subclass with your code (but i had to use ? instead of ! after 'layer', otherwise i get crash); regular highlight style. — surfrider, May 03 '15 at 19:23
This works except when you have space between your cells. The default highlight color shows behind the cell backgrounds. Screenshot: http://d.pr/i/QzMu1I *(Xcode 8.3.3, Swift 3.1)* — Clifton Labrum, Aug 14 '17 at 23:02

score 3 · Answer 6 · edited Apr 24 '18 at 16:49

I've mixed all methods described before and got code that exactly do what I want.

Selection not change color of textfields inside;
Rows remember selection and color of one;

Any strange outer borders and other leftovers appear.

class AudioCellView: NSTableRowView {

    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        self.wantsLayer = true
        self.layer?.backgroundColor = NSColor.white.cgColor
    }

    override var isEmphasized: Bool {
        set {}
        get {
            return false
        }
    }

    override var selectionHighlightStyle: NSTableView.SelectionHighlightStyle {
        set {}
        get {
            return .regular
        }
    }

    override func drawSelection(in dirtyRect: NSRect) {
        if self.selectionHighlightStyle != .none {
            let selectionRect = NSInsetRect(self.bounds, 2.5, 2.5)
            NSColor(calibratedWhite: 0.85, alpha: 0.6).setFill()
            let selectionPath = NSBezierPath.init(rect: selectionRect)
            selectionPath.fill()
        }
    }
}

score 2 · Answer 7 · answered Jan 28 '16 at 20:27

As already mentioned, set emphasized attribute to false, but do it in the custom NSTableRowView class to avoid side effects (like dancing color effect):

    override func drawRect(dirtyRect: NSRect) {
       super.drawRect(dirtyRect)
       self.emphasized = false

    }

score 1 · Answer 8 · answered Jan 05 '17 at 12:03

Okay, So I do know that it already has an accepted answer, but for anyone like me working with an NSOutlineView and has .selectionHighlightStyle = .sourceList can use this code to make the selection grey. This method will not flicker when changing the selection and will also stay grey if the app is minimised.

NSTableView/NSOutlineView Delegate:

func outlineView(_ outlineView: NSOutlineView, rowViewForItem item: Any) -> NSTableRowView?
{
     let row : CustomRowView = CustomRowView.init()
     row.identifier = "row"

     return row
}

And then create a new CustomRowView.swift file with this:

class CustomRowView : NSTableRowView
{
    override var isEmphasized: Bool {
        get { return self.isEmphasized }
        set(isEmp) { self.isEmphasized = false }
    }
}

This will keep the selection grey at all times.

This solution will obviously result in a stack overflow. You are setting the `isEmphasized` property in the setter of the `isEmphasized` property. Simply use the setter to set a private variable instead. With this minor change the solution works great. — inexcitus, Aug 13 '20 at 06:51

score 1 · Answer 9 · answered Feb 27 '12 at 11:53

1

It seems to me there is an option available to change this coz the documentation says three selection style and the default style in regular is blue, look at the image below.. you need to send it a message which I cant figure out as I have never developed apps for mac before.. hoping this helps...!

enter image description here

answered Feb 27 '12 at 11:53

Ankit Srivastava

11,975
9
57
111

Hello, `selectionHighlightStyle` _has_ the value `NSTableViewSelectionHighlightStyleRegular`, but I don't know *how* to tell it how to use the _alternate_ or _secondary_ selected color... – Dev Feb 27 '12 at 13:15
The blue color is shown when the tableview is in focus. If not in focus gray color is displayed. There is no simple method to change the selection color. – jemeshsu Aug 27 '12 at 18:30
1

That would make too much sense. – Keith Smiley Jan 06 '13 at 18:26

score 0 · Answer 10 · edited Oct 25 '12 at 03:14

0

You have to subclass NSTableView, and rewrite the functions below in order to change the alternating colors.

(void) drawRow: (NSInteger) row clipRect: (NSRect) clipRect
(void) drawBackgroundInClipRect: (NSRect) clipRect ** This one to change the main and alternate color **

Use a for loop and insert this conditional (i % 2 == 0) to detect odd and even rows.

edited Oct 25 '12 at 03:14

eboix

4,853
1
24
37

answered Oct 25 '12 at 02:52

Julian

25
2

2

To clarify, this is not the correct answer for view-based NSTableviews which the question was asking about. You should only override the above for cell based. – dbainbridge Mar 04 '13 at 14:44

RickJansen · Answer 11 · 2021-01-22T21:44:59.037

Could not find this in IB either. The answers above that tell you to set this in the tableview delegate tableViewSelectionDidChange: do work, but the disadvantage is that you (I) still see a brief blue flicker on selection when you select the row.

I do the setEmphasized:NO in the datasource: tableView:viewForTableColumn:row:

NSTableRowView *rowView = [tableView rowViewAtRow:row makeIfNecessary:YES];
[rowView setEmphasized:NO];

So this setting is applied before any selection is made, and the blue never appears. Subclassing seems over the top for this problem.

EDIT1: the blue selection returns if you've scrolled and clicked around in the table, or went to another Application, and returned, so my suggestion is to do the [rowView setEmphasized:NO]; procedure in both the delegate and the datasource. The brief blue flicker still happens now and then though. (macOS 10.15.7 Catalina)

EDIT2: View based NSTableView selection highlighting suggests to add:

tableView.selectionHighlightStyle = NSTableViewSelectionHighlightStyleNone;

That seems to get rid of the blue selection completely, even without fiddling with setEmphasized!

EDIT 3(final): You can set this in IB after all, it's the setting "Highlight", under "Style", above the checkbox "Alternating rows". Set to "None", et voila.

score -2 · Answer 12 · answered Mar 22 '17 at 13:15

This is Jean-Pierre's answer in Swift3:

func tableViewSelectionDidChange(_ notification: Notification)
    { 
        index = tableView.selectedRow
        let rowView = tableView.rowView(atRow: index, makeIfNecessary: false)
        rowView?.isEmphasized = false
...

It has the two limitations listed above -- first click doesn't work, second click does. And, there is a "dancing effect". I don't mind the first and actually like the second.

score -3 · Answer 13 · answered Jan 02 '14 at 08:09

- (void)tableViewSelectionDidChange:(NSNotification *)notification
{
    [tblCategory enumerateAvailableRowViewsUsingBlock:^(NSTableRowView *rowView, NSInteger row){
        CustomMainCell *cellView = [rowView viewAtColumn:0];
        if(rowView.selected){
            cellView.txtFieldTitle.textColor=[NSColor colorWithCalibratedRed:245.0/255.0 green:110.0/255.0 blue:65.0/255.0 alpha:1.0];
        }else{
            cellView.txtFieldTitle.textColor=[NSColor whiteColor];
        }
    }];
}

[tblCategory setSelectionHighlightStyle:NSTableViewSelectionHighlightStyleNone];

score -3 · Answer 14 · answered Jan 02 '14 at 08:55

-3

  Use this Notification for NSTableView:

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

                 //You Logic stuff
             }

answered Jan 02 '14 at 08:55

Mritunjay

169
6

Change selection color on view-based NSTableView

14 Answers14

Linked