How do you vertically center an image in NSButton

Question

I am creating a Mac application in the style of Lion Mail.app. As part of this, I am trying to create a simulation toolbar in the one that is in Mail.app, but I can not imagine the image in my toolbar with a vertical orientation.

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

but when I go as an interface designer, I cannot recreate the same button. I get:

What I tried to do in Interface Builder:

• Create a new window
• Add NSToolbar to this window
• Add NSButton to the toolbar with the style - "Push", "Image" - "Envelope", "Position" - "NSImageOnly", "Scaling" - "Proportionally down"

As you can see, the icon is clearly not vertically centered on the button, as on the Mail.app toolbar.

Does anyone have any ideas???

I am currently using Xcode 4.2 and posting this button using Interface Builder. I am trying to create a toolbar button by ONLY adding an image to the button, rather than drawing a button for each element, i.e. Drawing border and icon.

Any help would be greatly appreciated, as it made me cool a bit.

Thanks in advance - AYAL

Answer 1

It turns out the answer to this problem was much simpler than I expected. After many teeth grinding, hair pulling and pixel smoothing, I came across a solution.

Instead of using the "Push" button, I just had to switch to the "Round Textured" button. Once I did this, any image I added to the button was well focused. Then I just had to manually scale the image to look right.

The recipe for the Mail.app toolbar is as follows:

• Add button to toolbar
• Set the Style of the Rounded Textured Button
• Set button image
• Set the position to "NSImageOnly"
• Set the button size to 40 x 25, as well as the minimum and maximum sizes of the ToolbarItem.

The result is a toolbar that can look very simulated on the Mail.app toolbar.

Thanks to everyone - AYAL

Answer 2

One way to do this is to make your image actually a button, that is, take the entire canvas of the button. You will need to use the setBordered: method button so that the button frame is not drawn.

Answer 3

you can make the button image as gimp or photoshop, and then use it as a background or image for the button.

I feel like you're going to say "this is what I do." and you may have created a small mail icon, but I mean that you do the whole button, the outline and that’s it, and then use that to display the button. meaning?

like here, just use it as a background