Implementation of an inspector tab bar

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.

InspectorTabBar-Screen

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.

Back