xcodecocoanssegmentedcontrol

How to draw segmented control with blue tint like Xcode?


I'm trying to recreate the segmented control used in Xcode where the images are drawn with a blue tint.

For example in Interface Builder:

Interface Builder example

So far I have a custom NSSegmentedCell overriding - (void)drawSegment:(NSInteger)segment inFrame:(NSRect)frame withView:(NSView *)controlView, but I'm stuck at how to draw the segment image (1) with the gray tint and (2) with the blue tint if it is selected.

Also, it looks like the images are drawn with a bezel or gradient effect. When I draw the segment image myself it is simply black (because I use template images).

How can I recreate the segment from above?


Solution

  • Segmented Control - with on-state appearance

    Use an NSSegmentedControl object with style NSSegmentStyleTexturedRounded and mode NSSegmentSwitchTrackingSelectAny.

    Segmented Control - on-state appearance


    Toggle-Style Toolbar Button

    The way in which this is achieved for single buttons differs slightly from that of segmented controls:

    Non-Segmented Toolbar Buttons

    ↳ For example I have three .png images in my resources, MiddlePanelIconTemplate.png, CardPanelIconTemplate.png, and ReturnPanelIconTemplate.png using Round Textured Button Cell Style.

    OS X Human Interface Guidelines | Window-Frame Controls