How do you vertically centering an image on an NSButton

Question

I'm build a Mac application in the style of the Lion Mail.app. As part of this I'm attempting to create a simular toolbar to the one in the Mail.app but I can't seem to get the image in my toolbar button centered vertically.

Looking at the Mail.app toolbar I see a nice series of buttons with centered icons:

but when I go interface builder I can't seem to recreate the same button. What I get is:

What I've tried doing is, in Interface Builder:

1. Create a new window
2. Add a NSToolbar to that window
3. Add an NSButton to the toolbar with Style - 'Push', Image - 'Envelope', Position - 'NSImageOnly', Scaling - 'Proportionally Down'

As you can see the icon is clearly not centered vertically on the button like those in the Mail.app toolbar.

Anybody have any ideas???

At the moment I'm using XCode 4.2 and laying out this button with Interface Builder. I'm trying to build the toolbar button by ONLY adding the image to the button and not painting the button for each item, ie drawing the border and icon.

Any help would be greatly appreciated as this has been driving me a little nuts.

Thanks in advance - AYAL

Answer 1

Turns out the answer to this problem was much simpler then I had expected. After a lot of teeth gnashing, hair pulling, and twiddling pixels I came across the solution.

Instead of using a 'Push' button I simply had to switch to a 'Round Textured' button. Once I did that any image I added to the button was nicely centered. Next I just had to manually scale my image to look right.

The recipe then for a Mail.app Toolbar is as follows:

1. Add a button to your Toolbar
2. Set the button style to 'Rounded Textured'
3. Set the image of the button
4. Set the position to 'NSImageOnly'
5. Set the button size to 40 x 25 as well as the min and max sizes of the ToolbarItem

The result is a toolbar that can look very simular to the Mail.app toolbar.

Thanks All - AYAL

Answer 2

One way to do it is to have your image actually be the button i.e. take up all of the button's canvas. You will have to use the button's setBordered: method so the button's border is not drawn.

Answer 3

you could make the button image in something like gimp or photoshop then use that as the background or image for the button.

i feel like your going to say "this is what im doing". and maybe you made the little mail icon but i mean for you to make the whole button, outline and everything, then use that for the button image. make sense?

like here, just use this as the background