带有图像和文本的NSMenuItem

Question

I have a question regarding NSMenuItems.

What I'm trying to do is replicate a java GUI using native OS X components, therefore the language I am using is Cocoa. What I am trying to do is to get every menu item to have an image and then, beside it, some text.

I have already done some research into it and my first port of call (as always it seems lol) was the apple docs which had this handy example which illustrates how to embed views inside menuitems:

https://developer.apple.com/library/mac/#samplecode/MenuItemView/Listings/MyWindowController_m.html#//apple_ref/doc/uid/DTS10004136-MyWindowController_m-DontLinkElementID_8

Being relatively new to cocoa, I was thinking I would have to override one of the drawing methods from NSMenuItem. Not really sure though. Another idea that I was toying with was creating a custom view that held a image and some text.

Any other ideas/validation or discussion would be most appreciated.

Thanks all!

Oh and the GUI creation is being done by hand no interface builder.

Answer 1

Okay, so I now have menu items with icons beside them. For anyone who is interested here it is ( i've not done a leak analysis on it or anything).

First things first, put all of the images you want into the "Resources" folder (thats what its called in xcode 3.1.4).

Now, for example, after we have all the images, we want to use images called "eraser.png" and "eraser_on.png" and I want to attach these to the 3rd menu item. In order to achieve this we do the following :

The code below will get the menu item at position 3 in the menu

NSMenuItem *item = [ nameOfPopUpButton itemAtIndex:2];

The code below will set the image for the menu item to be "eraser.png"

[ item setImage: [ NSImage imageNamed:@"eraser"] ];

That's you set the image for the menu item (which will be on the left hand side of the text aka before the text).

If you want different images for the different states, eg when the user presses it, use this method (not tested myself but its sounds sensible :D and the function is straight out the api)

[item setOnStateImage: [ NSImage imageNamed:@"eraser_on" ] ]

You can however leave it nil or not set it at all and it will go the default color

Hope this helps someone.

Pieced this together from: https://developer.apple.com/library/mac/#samplecode/MenuMadness/Listings/Controller_m.html#//apple_ref/doc/uid/DTS40008870-Controller_m-DontLinkElementID_4

Thanks :)

Answer 2

If you need to do this you have the right idea in creating a view with image and label subviews.

BUT: don't do this. Creating a "native" application is not primarily about your choice of language (which is Objective-C, btw, not Cocoa; the latter is a collection of development frameworks implemented in Objective-C). It's about conforming to the platform.

On OS X (and iOS), more than probably any other platform, consistency in UI design is paramount. Users know when an application looks strange, and having icons next to each menu item (something I certainly have seen in Java apps) is definitely strange and unnatural on OS X. Users will be irritated at best, confused at worst.

So my advice is to either follow the Human Interface Guidelines (and save yourself a lot of work as a nice side effect) or just stick with your existing Java application.

If you want to provide quick iconic access to common functions, the recommended approach on OS X is to use a toolbar.