8

Desired look

I wish to make a toolbar for my app that will contain some simple buttons, each with a single monochromatic icon. Here is an example of some toolbar buttons similar to I'm trying to achieve, from Mail's compose window:

Mail compose window toolbar buttons

Notice these buttons have a consistent size, inner padding, padding, and shading. This is a pretty consistent style across macOS, present in Mail, Safari, Finder, etc. This leads me to suspect there's a standardized UI component for creating such buttons.

If I use a segmented control, each button looks correct, with each icon being correctly padded:

Segmented control

Now I would like to add individual buttons that match the style.

Attempt 1

My first attempt was to add a "Push Button" (NSButton) to the toolbar:

This resulted in a wide button that's a bit too short, and not lined up with the segmented control:

Attempt 1

Attempt 2

My second attempt was to use a segmented control, with only 1 segment.

This resulted in a button that's the right shape, size, etc., but it was off center relative to its label.

Attempt 2

Naturally, I can manually adjust the button to match the goal, but I feel like I'm missing something. What's the proper way to create these standard buttons?

Community
  • 1
  • 1
Alexander
  • 59,041
  • 12
  • 98
  • 151

1 Answers1

9

This is actually quite easy to do and you were close already. You can use NSButton for that. Note that it has different styles (defined in NSButton.BezelStyle) to choose from. The default one is the one to use inside windows and modals. But for toolbars, to match the style of segmented controls and search bars, you can choose the style .texturedRounded.

You can also set the style via Interface Builder. Note that you have to select the button itself, not the toolbar item around it.

enter image description here

To get the correct size, you seem to set the icon within the toolbar item, not the button itself.

Here is my result:

enter image description here

enter image description here

mangerlahn
  • 4,746
  • 2
  • 26
  • 50
  • I tried that, but it doesn't quite line up, and also the button isn't sized automatically to the icon within it. https://i.imgur.com/tRLXaQi.png – Alexander Sep 09 '17 at 18:19
  • That is strange, I updated my answer. Maybe this fixes it for you. – mangerlahn Sep 09 '17 at 18:57
  • Are you sure that sized it automatically? I couldn't replicate the results. And from what I can see, the "Image name" of the `NSToolbarItem` is shared with the `NSButton`'s "Image" – Alexander Sep 10 '17 at 22:38
  • Ah ok, sorry. I misunderstood Xcode's behaviour there. I have measured the width of some buttons in Finder and Mail etc. They have a width of 38, which I have set manually on the toolbarItem. (min and max width are the same). After that I have set the image of the toolbar item and the new size was only then represented by Interface Builder. – mangerlahn Sep 11 '17 at 08:30
  • Were you able to fix the height offset? – mangerlahn Sep 11 '17 at 08:30
  • Nope, the height is still a little off, just as it is in your screenshot. – Alexander Sep 11 '17 at 16:39
  • Yeah, but that is only in Interface Builder. Compile and run, the icons should be lined up properly. Its worthy of a bug report though. – mangerlahn Sep 12 '17 at 08:51
  • Would you mind sharing this sample project you made? – Alexander Sep 12 '17 at 13:31
  • Well, there is nothing special to it, but I can surely send it around after the Keynote today ;) – mangerlahn Sep 12 '17 at 14:09
  • I'm sorry, I totally forgot about this. Here is my sample: https://github.com/mangerlahn/StackOverflow-ToolbarItem-Test – mangerlahn Sep 16 '17 at 08:23