Make a Custom NSToolBar Item in xCode’s Interface Builder.

For my Mac app Pompi Video Editor I decided to make the interface for selecting video operations using NSToolBar.

NSToolBar lets you create NSToolBarItem as a button with either a label, an image or both.

In Pompi Video Editor the toolbar looks like this:


This kind of toolbar can be easily made using xCode’s interface builder.

In the interface builder this tool bar looks like this:


Notice all the items are either NSToolBarItem or a Flexible Space.

There is one exception though… the Custom View.

I wanted to make a custom button which also have a drop down button next to it.

There is a way to add custom NSToolBarItem using NSToolBarDelegate.

The problem with using NSToolBarDelegate is that you cannot make use of the order you placed the items using the Interface Builder.

You will have to make a list of the items in code(Or at least I didn’t find a way to not do this in code using the delegate).

If you look at the screenshot above you will see that I also have a Custom View and this Custom View do display in the app in the same order I palced it in the toolbar.

In order to achieve this you need to create an NSView in the same nib your NSToolbar is at.

The NSView’s content will be the custom button itself(in my case I have put two buttons inside, one square and one more narrow for additional options).

After that you only need to drag your off window NSView under your NSToolbar in the interface builder and xCode will create an NSToolbarItem with your own NSView underneath it.

You can then drag the item with the custom view into the default toolbar items area.

However, your custom view will not display in the tool bar this way and will just leave a blank space.

In order to make your custom NSView display we need to set it’s parent’s(the NSToolbarItem) view property to your actual view. I didn’t find a way to do this from within the interface builder so I subclessed NSToolBaritem and did this in code.

For the sake of completion here is the custom NSToolbarItem code(the customView IBOutlet is refernced into your NSView that is under the CustomToolbarItem) :


#import <Cocoa/Cocoa.h>

@interface CustomToolbarItem : NSToolbarItem
    IBOutlet NSView * customView;

#import "CustomToolbarItem.h"

@implementation CustomToolbarItem

-(instancetype)initWithItemIdentifier:(NSString *)itemIdentifier
    self = [super initWithItemIdentifier:itemIdentifier];
    if (self)
    return self;

    [self setView:customView];