Catalyst Tutorial: Running iPad apps on macOS

Installing a Mac App Icon

By default, Catalyst uses the iOS icon in the dock and Finder, but your iOS icon may look a bit flat on macOS. You can supply a dedicated icon for macOS.

Locate and open Assets.xcassets in Resources subfolder from the Project navigator. In the asset list select AppIcon. The attributes inspector provides the option to have dedicated Mac resources:

When you check that box extra slots open up in the asset description:

You can place your dedicated icon resources there. To save you some time, there’s a pre-built set in the materials folder that you downloaded to start the tutorial, and to make it even easier, you’re going to replace the entire AppIcon set instead of updating them one at a time. Locate the assets folder inside the materials folder. There’s a folder called AppIcon.appiconset inside.

• In the Xcode assets inspector, select AppIcon asset in the left sidebar and press delete on your keyboard to remove it.
• Drag AppIcon.appiconset from Finder to Xcode into the assets inspector left sidebar.

This should restore your AppIcon asset list with a complete set of both Mac and iOS icons.

Build and run to see your new, shiny, Mac-specific icon in the dock!

Configuring the Touch Bar

Some MacBook Pros have a touch bar screen at the top of the keyboard for extra contextual UI. You can configure the touch bar using the NSTouchBar API. For now Catalyst exposes some but not all the NSTouchBar functionality. You need to use the inbuilt set of widgets. Trying to use NSCustomTouchBarItem results in a compiler error.

In this section, you’ll add a color picker to allow you to pick custom colors for the text background.

The first step is to add another extension to MarkupViewController. Select the Primary Views folder and add a new file by pressing Command-N. Select iOS ▸ Swift File and click Next. Name the file MarkupViewController+NSTouchbar.swift and click Create.

Add this code to the new file:

import UIKit

#if targetEnvironment(macCatalyst)

//1
let ColorPickerTouchBarIdentifier = NSTouchBarItem.Identifier("colorpicker")

//2
extension MarkupViewController: NSTouchBarDelegate {
  //3
  override func makeTouchBar() -> NSTouchBar? {
    let tbar = NSTouchBar()
    tbar.defaultItemIdentifiers = [ColorPickerTouchBarIdentifier]
    tbar.delegate = self
    return tbar
  }
  
  //4
  func touchBar(
    _ touchBar: NSTouchBar, 
    makeItemForIdentifier identifier: NSTouchBarItem.Identifier) 
      -> NSTouchBarItem? {
    if identifier == ColorPickerTouchBarIdentifier {
      let item = NSColorPickerTouchBarItem(
        identifier: ColorPickerTouchBarIdentifier)
      item.target = self
      item.action = #selector(updateBackgroundColor)
      return item
    }
    return nil
  }
  
  //5
  @objc func updateBackgroundColor(_ sender: NSColorPickerTouchBarItem) {
    guard let template = currentContent else {
      return
    }
    template.textBackgroundColor = sender.color
    currentContent = template
  }
}

#endif

In this extension, you do the following:

1. Create an NSTouchBarItem.Identifier to identify your widget.
2. Conform MarkupViewController to NSTouchBarDelegate.
3. Override makeTouchBar() to allow your view controller to construct your custom touch bar. In this case, you have an array of one identifier.
4. Implement touchBar(_: makeItemForIdentifier:) from NSTouchBarDelegate and return a NSTouchbarItem for the identifiers that you registered in makeTouchBar().
5. Create the action to change the color when you press the item.

If you don’t have a MacBook with a touch bar, you can show a virtual touch bar from Xcode ▸ Window ▸ Show Touch Bar.

Build and run. Tap on the Color button to select an arbitrary color for the background behind the rendered text. Apple provides some built-in color swatches.

Where to Go From Here?

The final version of the project is available via the Download Materials button at the top or bottom of the tutorial. In this tutorial you covered:

• Converting your project to build for Catalyst.
• Free cross-platform behavior like drag and drop.
• Modifying the UI to be more Mac-like.
• Implementing some Mac specific features such as NSToolbar & NSTouchbar.

Some areas you could continue to explore are accessibility features like Dynamic Type for iOS and the new voice control API for macOS.

Catalyst is a new system for developers, and there’s no doubt Apple will continue to improve and add new features to the system.

Do try to view the following WWDC 2019 sessions that cover all the aspects of creating a great experience on both platforms.

• 205 – Introducing iPad Apps for Mac
• 235 – Taking iPad Apps for Mac to the Next Level
• 809 – Designing iPad Apps for Mac

If you have any questions or comments about this tutorial, please leave them in the comments below, or in the forums!