How to draw segmented control with blue tint like Xcode?

Question

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:

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?

Apgar

I forget the exact recipe, but it's a combination of template images (custom ones are possible) and bezel style setting. – Semicolon

Answer 1

Segmented Control - with on-state appearance

Use an NSSegmentedControl object with style NSSegmentStyleTexturedRounded and mode NSSegmentSwitchTrackingSelectAny.

• Place a Segmented Control object in your toolbar or bottom bar
• In the Attributes pane of the inspector, set the style to Textured Rounded and the mode to Select Any.
• Be sure to provide an image for the control (in Interface Builder, select an image from the Image combo box in the Attributes inspector).

---

Toggle-Style Toolbar Button

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

• Use an image with the name IconTemplate or Template appended to its (original) name
• Select the NSTexturedRoundedBezelStyle Button Style

↳ 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

Undine

Answer 2

Answer provided by 'L'l worked ok for me, but appending IconTemplate to your image name it's not working on Xcode 7.3 anymore. Instead of that, you have to go to your Assets catalog, choose the image you want to use and on the right panel you have to select the Attributes Inspector and on the combo that says 'Render As' select 'Template Image'.

Avunculate

Answer 3

To make an NSButton programmatically (macOS 10.13 / Xcode 9) with Blue Tint when ON and not when OFF (like some of the buttons in Xcode toolbar) I do the following:

1. Add PNG to asset catalog with transparent background and white line drawing (pdf with black lines also works).
2. Set image in asset catalog to render as "template" (setting is in right sidebar).
3. Set only 1 image (do not use alternate image) or will not work.
4. bezelstyle = NSTexturedRoundedBezelStyle.
5. buttontType = NSToggleButton.
6. yourButton.cell.controlTint = NSBlueControlTint (on) or NSDefaultControlTint (off) according to state.

Fernald