Creating a Menu Bar App with Images

A menu bar app is a macOS program that does not display its icon on the Dock when running or show its pull-down menus in the upper left corner of the screen. Instead, a menu bar app displays a title or icon in the upper right corner of the screen so it’s available when you need it. A typical menu bar app is the volume control icon that lets you adjust the volume or the Time Machine icon that lets you access Time Machine.

To create a menu bar app, follow the instructions in this earlier blog post.¬†This post shows how to create a menu bar that displays a text title on the menu bar. In this post, you’ll learn how to use an icon instead.

First, you need to create an icon that’s 32 by 32 pixels in size. As an alternative to creating your own icon, you can visit Flaticon, a site that offers royalty-free icons. You can either purchase a subscription to this site or if you want to use an icon for free, you must give credit to the creator of the icon.

Icons should be stored in the .png file format. Whether you create an icon or download one from a site like Flaticon, the first step is to drag it into the Assets.xcassets folder of your Xcode project.

Click on your icon file name and choose View > Utilities > Show Attributes Inspector.

Make sure the “Mac” check box is selected and all other check boxes are clear.

Change the Render As popup menu to Template image.

Make sure your graphic image appears in the 2x box.

Remember the exact name of your icon file such as “egyptian-cat” without the .png file extension.

If you followed the first part about creating a menu bar app, you used code like this:

item?.title = "TestMe"

This code creates a text title on the menu bar. Delete this line and replace it with the following:

item?.image = NSImage(named: "egyptian-cat")

In the above example, “egyptian-cat” is the name of the icon file stored in the Assets.xcassets folder so replace this name with the actual name of your own icon file.

Now your icon will appear on the menu bar.


January 14th, 2017 by
HTML Snippets Powered By :