4

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:

enter image description here

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

enter image description here

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

Ayal
  • 440
  • 1
  • 5
  • 15

3 Answers3

10

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

Ayal
  • 440
  • 1
  • 5
  • 15
0

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.

TrevorL
  • 495
  • 2
  • 7
-4

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 enter image description here

owen gerig
  • 6,165
  • 6
  • 52
  • 91
  • Good answer but I was hoping to find a way to "build" the button programmatically instead of painting the button by hand. – Ayal Dec 25 '11 at 13:55
  • not really sure i understand what you mean. this png should be a resource then regardless of wether or not u use IB it should be equal to the button.imageview.image. if this doesnt answer your question then i think u need to update your question – owen gerig Dec 27 '11 at 16:00
  • This is not a good idea. Styling of buttons change over different versions of OS X. Even within a single version, there are a number of settings that modify the shape and styling of UI elements. As with most things Cocoa, it's better to find the "Apple way" to do something, instead of trying to invent a solution to simulate what the OS is doing. – Andrew Theken Mar 14 '16 at 13:45