featured software



wordmake



pianopub



recipe manager

Simple Selectable Toolbar Class

Posted: January 14th, 2011 | Author: | Filed under: Cocoa, OS X, Programming | No Comments »

In many Cocoa applications you may see a very similar layout for the preferences window. It involves a selectable toolbar, but very inconveniently, Interface Builder does not provide a built-in way to create such a toolbar. Until just recently, I was using BWToolkit to create such a toolbar, but in the newest version of Interface Builder, it seems to be broken (version 3.2.5 as of writing). So here is a quick solution I came up with, that tries to use as little code as possible. The only code is a small class (only two methods) called SelectableToolbar. Download it here

Include the class in your project, then create a new window in Interface Builder. Add a NSToolbar to the window, and set the toolbar’s class to SelectableToolbar.
Remove the default items from the toolbar and add new ones, being sure to set them as ‘Selectable’, and set their action to the change: method in the SelectableToolbar
In the window, add a tab view, and make the number of tabs equal to the number of items in your toolbar, and set the tabs to be at the bottom. Set your new tab view to resize with the window, position it in the top left corner and make it fill the whole window, also connect the SelectableToolbar’s tabview outlet to it. Now, populate your tab view’s tabs with appropriate controls and whatnot. When you finish a tab, select all its contents, and choose Layout > Embed Objects In > Custom View. This puts the contents of the tab in its own view, that the SelectableToolbar will use to determine the size of the window. So position the view in the top left corner, and change it’s autosizing so that it stays in the top left corner.

Completed Window (View from Interface Builder)

Keep in mind that, the size of the tab view and of the window doesn’t matter, so you can change it to help you lay things out, just keep the tab view in the top left corner. If you’ve set it up correctly, it should look something like to the right in Interface Builder
Download the Sample Project



Leave a Reply