CODEWITHSUNDEEP
cocoainterface-builder
edward
edward

Reputation: 295

NSTableView with Plus and Minus buttons

How can I do something like that?

Screenshot

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

Any thoughts?

Upvotes: 24

Views: 5868

Answers (4)

ratijas
ratijas

Reputation: 724

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 ;)

Upvotes: 40

Besi
Besi

Reputation: 22939

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.

Screenshot

Upvotes: 11

Mecki
Mecki

Reputation: 133059

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

Upvotes: 3

mattyohe
mattyohe

Reputation: 1814

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

Upvotes: 8

Related Questions