Implementation of an inspector tab bar

Written by Stephan Michels on 29. Mai 2012. Posted in Uncategorized

For my own project I tried to create a similar tab bar like I have seen in the Xcode
inspector. Some of you might be interested in the source code, so I made it free and without any
restriction.

It took some time to find out how to create NSButtons witch look and work identical to
the tab bar buttons like in Xcode. First I created an custom NSButtonCell subclass to
draw the shadows left and right of the button to mimic the shadow of the selected
button.

    - (void)drawBezelWithFrame:(NSRect)frame inView:(NSView *)controlView {
        // Draw background only if the button is selected
        if (self.state == NSOnState) {
            [... draw shadow ...]
        }
    }

To get the etched look of icons you have to use template images and set the bezel style
of the button cell.

    self.bezelStyle = NSTexturedRoundedBezelStyle;

For the functional part, I have struggled a long time with the button action which has been
sent on the mouse up event. I wanted to switch the views on the mouse down event. Following
statement allows the button to send the action of the mouse down event.

    [button sendActionOn:NSLeftMouseDownMask];

The next problem was that button changed it’s state even if the button has already been
selected. To prevent this behavior I overrode the following method in the button cell.

    // prevent automatic state changes
    - (NSInteger)nextState {
        return self.state;
    }

Everything else was straight forward. I hope you find the tips and tricks useful. You
can find the source code on GitHub.

Trackback from your site.

Leave a comment

Current month ye@r day *