Using the TouchBar

The TouchBar replaces the largely useless row of function keys on some of the MacBook Pro laptops. Since Apple recently updated their iWork office suite to take advantage of the TouchBar, it’s likely that the TouchBar will eventually find its way to other Macintosh models including on an external keyboard for the iMac, mac mini, and Mac Pro.

Since the TouchBar will likely be another user interface accessory, it’s important to know how to write macOS programs that offer a TouchBar. If you’re writing macOS programs and don’t have a TouchBar, you can simply use the TouchBar Simulator.

To use the TouchBar Simulator, open Xcode and choose Window > Show Touch Bar (or press Shift+Command+5). If you run any macOS program that supports the TouchBar, you’ll be able to see how those programs offer shortcuts on the simulated TouchBar.

To add TouchBar support to your macOS programs, click on your Main.storyboard file to display your user interface, then open the Object Library window. In the search field, type touchbar and the Object Library will display all the touch bar items you can add, including NSTouchBar, which is the touch bar itself.

Drag the NSTouchBar from the object Library over the Window Controller in your storyboard. The TouchBar will appear directly beneath this Window Controller.

Now you can drag other TouchBar items from the Object Library window on to the TouchBar such as NSTouchBar Slider or NSTouchBar Button. For this example, drag NSTouchBar Color Picker on to the TouchBar.

Now the TouchBar needs its own class file, so choose File > New > File. Click macOS and then click the Cocoa Class icon. Then click the Next button. A new window appears, asking for your class name and subclass.

The name can be anything you want, such as TouchClass. What’s far more important is that the Subclass is NSWindowController.

Click the Next button and then click the Create button. This adds the TouchClass.swift file to the Navigator pane, Now the next step is to link this TouchClass.swift file to the TouchBar.

Click on Main.storyboard and click on the blue icon that appears in the top, middle of the Window Controller where you added the TouchBar. Choose View > Utilities > Show Identity Inspector. Click in the Class popup menu and choose TouchClass (or whatever name you chose for your class file).

Once you’ve connected the TouchBar to a class file, choose View > Assistant Editor > Show Assistant Editor. You want the assistant editor to display the TouchClass.swift file, but you may need to manually choose this TouchClass.swift file to make it appear in the assistant editor.

When opening the TouchClass.swift file, you may see an error message. Just let Xcode correct this error and it will likely add a @available line such as the following:

@available(OSX 10.12.2, *)

Now with the TouchBar displaying a color picker, control-drag from the TouchBar color picker to the  top of the TouchClass.swift file.

When a popup menu appears, choose the following:

  • Connection: Outlet
  • Name: colorIcon
  • Type: NSColorPickerTouchBar

This creates an IBOutlet to the color picker on the TouchBar with code that looks like this:

@IBOutlet weak var colorIcon: NSColorPickerTouchBarItem!

Modify the windowDidLoad functions follows:

    override func windowDidLoad() {
        colorIcon.isEnabled = true = self
        colorIcon.action = #selector(colorPicked)


When a popup menu appears, choose the following:

  • Connection: Action
  • Name: colorPicked
  • Type: NSColorPickerTouchBar

This creates an IBAction method. Now edit this IBAction method with one line of code like this:

    @IBAction func colorPicked(_ sender: NSColorPickerTouchBarItem) {
        window?.backgroundColor = colorIcon.color as NSColor

Choose Product > Run and you should see your program’s user interface, but probably not any sign of the simulated TouchBar. To display the TouchBar, go back into Xcode and choose Window > Show Touch Bar (or press Shift+Command+5).

Go back to your TouchBar program and you should now see the simulated TouchBar visible. Click on the color picker on the TouchBar to display a range of colors. Each time you click on a color, the background of the window should display that color.

TouchBar Example

April 20th, 2017 by
HTML Snippets Powered By :