Catalyst Tutorial: Running iPad apps on macOS
In this Catalyst tutorial, you’ll learn how to take an iPad app and configure it to run on macOS and add Mac-specific features like contextual menus. By Warren Burton.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Catalyst Tutorial: Running iPad apps on macOS
25 mins
- Getting Started
- Enabling Your Build for Mac
- Free Functionality
- Compiling Conditionally
- Improving the App for all Platforms
- Adding a Contextual Menu
- Mac Exclusive Features
- Modifying the Menu Bar
- Adding a Toolbar
- Hiding Unwanted UI
- Building the Toolbar
- Installing a Mac App Icon
- Configuring the Touch Bar
- Where to Go From Here?
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:
- Create an
NSTouchBarItem.Identifier
to identify your widget. - Conform
MarkupViewController
toNSTouchBarDelegate
. - Override
makeTouchBar()
to allow your view controller to construct your custom touch bar. In this case, you have an array of one identifier. - Implement
touchBar(_: makeItemForIdentifier:)
fromNSTouchBarDelegate
and return aNSTouchbarItem
for the identifiers that you registered inmakeTouchBar()
. - 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!