I Love Code - Free Coding Tutorials and Resources

Mac OS X 10.5 Leopard introduced a new user interface concept called Bottom Bars. This interface element is very handy for displaying peripheral information and providing easy access to key actions. Many of the standard applications that come with a Mac, such as Finder and iTunes, display such bottom bars, albeit in very varying ways. Here’s an example:

So how do you put a bottom bar into your application? Unfortunately Interface Builder doesn’t have a way to do this just yet (without BWToolkit), so you’ll have to open up Xcode to get this working. Just create a basic Cocoa Application project and create your standard AppDelegate class, remembering to insert it into your MainMenu NIB file. Make sure that it has an IBOutlet (or other connection) to an NSWindow, and then use this method:

When talking about bottom bars, the second argument to this method will always be NSMinYEdge, since that specifies the bottom of the window. The HIG specifically states 32.0 should be the thickness (second parameter) when using normal-sized controls, but when using small controls, it states a value that just seems downright incorrect, so you should use 24.0 instead. So call this method:

Run the application and you’ll see something that looks a lot like this:

There’s a few benefits and gotchas that come with this code, which you should be aware of:

The application automatically knows that bottom bars can be used to drag the window, so you generally shouldn’t need to mess with -[NSWindow setMovableByWindowBackground:] at all.

The window does not need to be a Textured Window. In fact, if you try to make it a Textured Window and just use that as your bottom bar, it will look entirely different and non-standard. Not to mention, doing this messes up any toolbars you have when they are in a ‘hidden’ state (see Interface Builder’s Document window for a live example).

When placing a text field on the bottom bar, make sure that it’s size is “Small” and somewhere in your code (probably -awakeFromNib), call this:

So there you have it. One line of code and you have a very useful (and attractive) user interface element right in your window!

Related posts:

1. Integrating iSight into your cocoa application… Having iSight integrated into you app can be useful in...
2. Integrating WebView into a Cocoa app When using a WebView object inside a Cocoa application,...
3. Adding a Handle Bar Separator to Your Application This tutorial will teach you how to make the small...