NSTableView with Plus and Minus buttons

Question

How can I do something like that?

I didn't find any appropriate object in the Interface Builder library.

Any thoughts?

Answer 1

Update for OSX Yosemite

I tried to achieve the same look as Mail.app has in the Accounts view (right window on my screenshot).

I did achieve the desired result by following the steps below:

1. Add a NSSegmentedControl
2. Add two segments and set the image to each:
   • NSAddTemplate for the + button
   • NSRemoveTemplate for the - button
3. Set the size of the segments to fixed and set the value to 32 pixels
4. The rectangle next to the buttons is a NSButton with the style Gradient.
5. The Button is enabled but Refuses First Responder is set to true so that it is not clickable.

Answer 2

One answer here suggests using gradient buttons, however these buttons cannot be disabled as this causes the background to change and thus breaks the look. Another one suggested using a segmented control, which is almost perfect but segmented controls don't support autoresizing, e.g. if the table width is dynamic. My suggestion is a combination of both. Use a segmented control for the actual buttons and a gradient button to fill the rest of the table width that now can also be dynamic if the button width is dynamic as well.

See my answer to a similar question (with screenshots): https://stackoverflow.com/a/22586314/15809

Answer 3

Use a NSButton with a gradient style, and for the images use the system provided NSAddTemplate and NSRemoveTemplate.

Answer 4

The best way that i found is to use NSSegmentedControl.

after you dragged it on the canvas, you should configure its style:

Style: Small Square
Mode:  Select Momentary

looks better. Now use "image" field to set NSAddTemplate and NSRemoveTemplate. Make sure that label field is empty.

Ok, we have "+", "-" and one empty segment. To prevent the latest one to be selected by the user, select it from Segment: pop up and turn off Enabled check box (located next to State: label).

And lastly, what we have to do is set width of first two segments to make them square.

1. Go to Size inspector
2. Select Segment 0
3. Turn off "Fixed" checkbox (segment should immediately autoresize to fit image)
4. Select Segment 1 and repeat number 3
5. Now as you resize control, only last segment will change width
6. Put it at the bottom of your table view and resize as well.

Enjoy ;)