Mac Catalyst 中的新功能

探究 Mac Catalyst 的最新更新，了解让您的 app 在 macOS 上运行时感受更加自然的方法。了解各种新和增强的 UIKit API，它们使您可以自定义自己的 Mac Catalyst app，以利用 macOS 独有的功能。为了充分了解本节内容，我们建议您要基本熟悉 Mac Catalyst。查看 WWDC19 的“介绍 Mac 的 iPad App”，以熟悉相关知识。关于优化 Mac Catalyst app 的更多信息，请观看 WWDC20 的“优化 Mac Catalyst app 的界面”。

资源

相关视频

WWDC21

WWDC20

优化 Mac Catalyst app 的界面

WWDC19

适用于 Mac 的 iPad App 简介

下载

欢迎收看Mac Catalyst 最新消息专题讲座我是杰森比福待会我的同事尼克泰斯勒会加入我们 Mac Catalyst是种技术让你能将你的既有iOS应用程序带到macOS上让应用程序能善加利用 Mac的较大显示器集成键盘鼠标或触控板数千位开发者已经用Mac Catalyst 将他们的iOS应用程序带到macOS上而且结果十分惊艳让我介绍几个最近获得Apple 设计大奖的 Mac Catalyst应用程序

Shapr3D是工业级CAD工具 Mac和iPad上都可用虽然iPad版本设计为使用多点触控和Pencil的体验新的Mac版本用Mac Catalyst打造全面善用鼠标和键盘支持就像台式机用户预期的

Instapaper是非常受欢迎的应用程序用来脱机阅读文章有赖于Mac Catalyst 它也在Mac上初登场 Notability是极佳的笔记应用程序这个新版本取代了既有的Mac版本让用户可使用iPad上的所有炫酷功能但又经过优化加以利用 Mac的大屏幕键盘和更快的速度它甚至支持用Apple Pencil使用随航我们会先介绍新API概览然后介绍我们在macOS Monterey中加强的API 最后尼克会在演示应用程序中采用这些API 借此展示新API的运作我们先进行 macOS Monterey中的新API概览

之前在macOS Big Sur 我们新增了用showsmenuAsPrimaryAction属性将菜单附加到按钮的功能这让你能创建下拉菜单

现在在macOS Monterey中我们新增了弹出按钮的支持方式是用一个新属性叫做 changesSelectionAsPrimaryAction 它让按钮的标题跟踪菜单中的选择有了这两个属性现在共有四种方式可以配置按钮

两个属性都设定为false时我们会获得一个标准的按钮若设定成单击并按住按钮时会显示菜单它还是可以显示菜单创建那个按钮的代码如下方所示

如果只有 changesSelectionAsPrimaryAction 设置为true 你会获得一个切换按钮可以点击以开启或关闭这可以用来指示应用程序中的状态

如果只有showsmenuAsPrimaryAction 设置为true 你会获得下拉菜单如果两个属性都设置为true 你会获得新的弹出按钮对于主要操作配置为显示菜单的按钮执行主要交互时这在macOS中是左键单击按钮会立刻显示菜单不过对于主要操作不是配置成显示菜单的按钮它的行为取决于应用程序的惯用法在iPad 惯用法里菜单是用次要交互触发在macOS中是右键单击但如果应用程序采用Mac 惯用法菜单是由长按按钮触发

想了解更多按钮的新功能可观看《Meet the UIKit button system》视频我们现在让ToolTip也可用于 Mac Catalyst应用程序 ToolTip是一个浮动的小窗口会在光标悬停在应用程序的视图上时出现它可用来提供关于内容的上下文或额外细节要将ToolTip添加至任何UIView 请用UIToolTipInteraction 你只需要用文字字符串创建一个 UIToolTipInteraction 然后将那个交互添加到你的视图

不过其中一个ToolTip的常见用途是阐明UI控制的行为这个模式很常见因此我们添加了一个方便的属性到UIControl 让你能快速设定ToolTip

iOS应用程序各处都使用文本标签显示不能编辑的字符串当标签的内容太长塞不下标签必须截断文字现在在macOS Monterey中我们添加了扩展ToolTip的支持让标签的完整内容能够显示这个范例UI中标题标签的内容太长放不下通过启用扩展ToolTip 我们将鼠标悬停在标签上时它会显示完整标题你可以用UILabel上的新属性启用它属性叫做 showsExpansionTextWhenTruncated

我们推出了新的info.plist键叫做UIApplicationSupports PrintCommand 你可以将它添加到你的info.plist 如果设置为true 我们会在启动时自动添加“打印” 和“导出为PDF”菜单项目到你的Mac Catalyst应用程序这个plist键也可以添加到 iOS应用程序在iPadOS上的快捷方式提示中只会出现“打印”选项而当iOS应用程序在M1芯片Mac上运行则也会显示“打印” 和“导出为PDF”菜单项目

虽然这个plist键告诉操作系统你想要“打印” 和“导出为PDF”菜单项目这只是故事的一半你还是需要在代码中明确实施打印支持要做到这点有个新的UIResponder操作叫printContent 你可以在任何UIResponder上实施它它会用响应链搜索寻找适当的打印目标当你实施的printContent被调用只需设定并使用 UIPrintInteractionController 就跟平常一样我们现在支持添加副标题到窗口这可以用来提供你的应用程序状态的辅助信息这可以用UIScene上叫做副标题的新属性进行设定

macOS Monterey中 Shortcuts应用程序现在可以在Mac上使用如果你的应用程序在iOS上采用自定义意图它们现在也可以在 Mac上的Siri和Shortcuts使用应用程序内意图处理和Intents扩展都可使用所以如果你先前在 Mac Catalyst应用程序中禁用了构建你的Intents扩展你现在可以重新启用它想了解更多请观看《Meet Shortcuts for macOS》视频以上就是macOS Monterey中新的API的概览我们接着进行macOS Monterey中增强的API的概览如果你写过符合你的应用程序主题的自定义按钮或滑块你可以在采用Mac 惯用法时在Mac Catalyst中保留这些方法是选择禁用本地控件但你需要自己缩小到77% 我们并不建议对整个应用程序采取这个做法只建议用于对应用程序体验有关键影响的特定控件新的按钮系统也可以用来以更加跨平台的方式创建符合你的应用程序主题的按钮若想了解更多请看《Meet the UIKit button system》视频 UIBehavioralStyle 是让这件事成真的新枚举 UIButton和UISlider各有两个新属性 preferredBehavioralStyle 是可读可写的而behavioralStyle是这个属性的只读解析值在iOS上 behavioralStyle的解析值不会变所以很容易把这行代码明确设定成 .pad 或.mac 以处理Mac Catalyst案例而不会影响到你的iOS应用程序

对于基于文档的应用程序有个新plist属性叫UIApplicationSupports TabbedSceneCollection 可用来选择禁用窗口选项卡当设置为false 窗口选项卡会被禁用默认的选项卡相关菜单项目不会被添加我们现在支持UIPointerLockState 用来隐藏并锁定光标让它不会移动到Mac窗口外面这在玩游戏时很有帮助让用户不会不小心点到游戏以外的地方让别的应用程序跑到前台它会在你切换应用程序或窗口时暂时解除锁定窗口并在你单击窗口时重新锁定

我们也支持UIPointerShape 它可以用来取得iBeam光标横轴纵轴都可以当你在macOS上用这个API 你会获得典型的NSCursor光标形状之一

最后我们支持可隐藏的指针风格让你能在必要时隐藏应用程序中的光标我们谈了几个全新的和增强的UIKit API 现在我将画面交给尼克他会介绍我们会怎么用这些新的、增强的API 让我们的Mac Catalyst应用程序在Mac上感觉更自然谢谢杰森那些新功能很有趣我已经有机会试用过了我会详细演示一个由Catalyst团队开发的应用程序原来Catalyst团队晚上会摇身成为旅游作家所以我们开发了Trip Planner iPhone和iPad皆可用这是Trip Planner 在M1芯片的13吋MacBook Pro上运行

为了让我们的应用程序能接触到最多用户我们选择让应用程序能在M1芯片Mac上运行让我介绍一下应用程序的功能 Trip Planner这个应用程序会列出全球各地能造访的好地方并且让你兑换各种常旅客计划的积分它的UI基于一个三列的 Split-view拆分视图控制器利用边栏我可以导航我最爱的国家的住宿、餐厅和景点或是选择奖励计划检视并兑换积分当我选择边栏的某样东西如果它是一个内容分类 Trip Planner会在拆分视图控制器的附属列显示它的内容附属视图控制器写入日本、西班牙、巴西和坦桑尼亚的景点、餐厅和住宿如果我是选择边栏中的叶项或是附属视图控制器中的项目次要视图控制器会显示那个项目的细节我要选我在日本最爱的咖啡厅之一超级抹茶细节视图控制器包含一些关于咖啡厅的文字协助我规划旅程的按钮还有显示超级抹茶位置的地图视图在Trip Planner的例子里一切在M1芯片Mac上都是开箱即用不过因为它是iOS应用程序要让它在Mac上感觉自然我们能做的有限若要更进一步我们需要勾选这个复选框让它成为Mac Catalyst应用程序更准确地说是这个复选框可以放大吗？通过勾选这个复选框增强你的应用程序这是为Mac Catalyst优化后的 Trip Planner 我们添加了Mac特定的功能像是用双击手势识别器打开新窗口自定义标题栏外观我们还全面升级通过为Mac优化让我们有本地控件和清晰文字请看《Qualities of a great Mac Catalyst app》和《Optimize the interface of your Mac Catalyst app》以了解那个过程的完整介绍在Trip Planner的最终版本中我采用了杰森刚刚向你介绍的新API 我会讲解每个的采用我非常建议你下载范例项目我在这里展示的所有片段代码都直接来自那个项目的代码这是为macOS Monterey 全面更新后的应用程序我再次选择超级抹茶你可能注意到UI当中有些颜色是macOS风格按钮的形式有背景色但晚点再说那个我想先谈谈场景副标题我用新的UIScene副标题属性做两件事第一我用副标题用在Mac上更自然的方式显示细节视图控制器的标题比起导航项目的标题窗口副标题比较像Mac会出现的第二我要更改副标题以在用户导航应用程序时提供一些有帮助的上下文在Trip Planner中我选了日本和坦桑尼亚

所以窗口的副标题是“国家” 如果我选择这个小露营地在附属视图控制器这里副标题会变更让我知道我选择了乞力马扎罗山豪华露营如果我选择整个奖励计划部分… 副标题会再次变更成为“国家&奖励计划” 让用户有更多上下文想想副标题也可以如何帮助你的Catalyst应用程序添加上下文也请注意每个UITitlebar toolbarStyle 副标题显示的方式不同试验看看哪个最适合你的应用程序

要设定副标题先从字符串值入手取得场景的引用然后设定副标题属性你可以在场景连接时设定或是之后通过访问视图窗口的场景进行设定接着我会示范我如何在Trip Planner中采用ToolTips macOS一个很常见的交互模式是暂时将鼠标悬停在某个东西上取得那个东西的更多细节这个技巧是确立已久的方法能用来教育用户而不会让应用程序的UI过于拥挤 ToolTips也可以显示被截断标签的完整文字

这里我选择了巴西的伊圭苏瀑布将鼠标悬停在图像上一下子就会出现ToolTip！ “阴天里苍翠繁茂的森林围绕着滔滔的伊圭苏瀑布” 真是不错的描述我们用了新的 UIToolTipInteraction API 将这个功能添加到所有的图像它让应用程序感觉更符合Mac了

我也用了UILabel API 让因为国际化货币格式被截断的标签能够扩展让它们比预期更长一点

就像杰森刚刚介绍过的有不同形式的ToolTip API 对主图来说用UIToolTipInteraction API 而没UITooltipInteractionDelegate 适合我的需求因为我想要将固定文字作为ToolTip添加到任意视图

对于货币文字我用UILabel上的 showsExpansionText WhenTruncate属性如果我想附加一个ToolTip 到任意控件那我应该用的API 是UIControl上的ToolTip属性

我会接着介绍 macOS Monterey上的Catalyst 可用的多种新按钮建议你观看《Meet the UIKit button system》视频那支视频介绍新的iOS 15 UIButtonConfiguration API 新的UIButtonConfiguration属性中很多都在为Mac优化的Catalyst应用程序中有自己的表现形式更好的是就像在iOS上 UIButton上定义的属性可以和UIButtonConfiguration上的进行混搭我会让你看一系列按钮然后我会展示如何在代码中配置各个按钮

我会选一个新的目标展示新的按钮背景色选科帕卡巴纳如何？这里的按钮是用着色配置所以它们会接收环境的色调自动取得匹配图像而且背景模糊效果良好的颜色现在我要导航到奖励细节视图控制器我会从边栏打开我的计划…

并选择钻石达布隆奖励计划这个视图的目的是让我能够兑换我通过旅游获得的积分并选择兑换的项目

我可以用滑块选择要兑换多少积分我可以用这个切换按钮激活积分乘法器甚至用附加菜单选择倍数感觉选择最大的数字作为积分倍数很合理所以我要选六不知道有什么圈套我可以用这些较大的按钮切换以选择兑换的类型

我可以选择兑换兑现或捐出我的积分当我终于准备好提交我可以单击右下角的提交按钮或单击重置按钮以重新开始这里有好几个新按钮我会讲解每一个要如何配置

我会先讲我们都很熟悉的下压按钮在细节视图控制器中这原本是提交按钮这只是系统类型的UIButton 在Big Sur中首次推出角色设定为主要

接着我有积分倍数菜单按钮这个按钮能在主要单击时切换状态并在长按时显示菜单我知道我终究会想要自定义背景色所以我会使用着色配置并将标题设定为“积分倍数”

要获得切换的行为我会用杰森告诉我们的新布尔属性 changesSelectionAsPrimaryAction 设定为true 现在按钮的背景色会在应用程序的色调和标准无色外观间切换

我也会附加一个菜单配置好倍数值和一些UIAction

最后在菜单的操作处理器中如果用户选择最大积分倍数我们会有条件地将切换按钮的背景色变更为系统红

现在要配置重置按钮

我可以用普通配置获得无框架的外观这个配置看起来十分类似 iPadOS的外观

我会将按钮的角色设定为破坏性这会告诉系统进行一些活动处理预防不小心触发操作并将它的tintColor设定成systemRed 这个按钮讲完了至于视图左下角的弹出按钮能让我选择兑换、兑现和捐出的那个不需要使用按钮配置API 我只需要创建一个系统按钮并将changesSelection AsPrimaryAction 设定为true 语义上那就是弹出按钮的作用

接下来我想将 showsMenuAsPrimaryAction 设定为true 因为那也是语义上弹出按钮的作用但怎么会这样？按钮没有改变其实有我们达成了另一个切换按钮但当然默认状态是关闭的

我们缺少一个非null菜单属性那是在Mac Catalyst中获得新的弹出外观的关键现在我们已经将菜单设定好我们的弹出按钮功能完善

最后把焦点放在这些像面板的大型切换按钮这个布局善用iPad风格按钮会延展填满它的所在空间的特色使用Mac风格的按钮不会这样做我能够保有iPad行为就算Trip Planner设定成为Mac优化方法如下我先是又用了一个着色按钮配置

然后我用这个配置设定一个图像不需要为这个图像指定按钮状态

通过指定.pad行为风格我获得了iPad上会获得的布局行为更明确地说按钮的背景会延展填满它的框架

符号需要再大一点所以我在按钮上设定字体较大的首选符号配置

跟之前一样我将 changesSelectionAsPrimaryAction 设定为true 并提供了一个 colorUpdateHandler 以基于按钮的isSelected属性指定选择和未选择的颜色

我知道你跟我一样看到这么多新选项很兴奋推出已久的UIButton API 和全新的属性可以许多方式混搭创建许多种在Mac上很自然的按钮我想示范最后一项 Trip Planner的功能那就是打印有了新的内置命令键支持在Catalyst上打印比以前更容易我能够增强 Trip Planner中的打印体验方法是用响应链选择最适合处理打印的对象让我示范这是什么意思回到最新版本的Trip Planner 我选了我在西班牙最爱的餐厅之一无聊熟食店我要通过单击Catalyst 特定的缩放控制和地图视图交互

应用程序焦点和第一响应对象状态已移动到这个细节视图控制器当我从菜单选择文件打印会出现打印对话框…

提议打印就这一个项目我现在也要选择高迪公园和巴塞罗那酒店以完成这一天的规划

我会用内置快捷方式command+P打印

现在跳出的打印对话框提议打印全部三个已选项目…

不只是目前的细节视图控制器最后如果我按Shift+Tab 把焦点移到边栏中的国家而且在附属视图或细节视图控制器并未选择任何东西…

然后尝试打印 Trip Planner知道该怎么做它会打印我在边栏中选择的所有项目

所以要怎么做到？首先杰森介绍的新info.plist键一定要设定让系统知道Trip Planner 支持打印并想添加那个菜单项目细节视图控制器中我推翻来自UIResponder的两个方法 printContent负责实际打印而UIKit会在响应链中寻找能执行这个操作的对象某些情况下受到应用程序业务逻辑指示细节视图控制器可能不想要打印

所以我用 canPerformAction这个方法告知响应链细节视图控制器是否可以打印这个方法叫做在printContent之前如果它返回false 细节视图控制器会被跳过随着UIKit爬响应链寻找可以执行这个操作的对象在BrowserSplitViewController中这是应用程序的根视图控制器因此几乎总是在响应链的顶端我实施了另一个UIResponder方法 targetForAction:withSender 这让拆分视图控制器选择哪个对象应该负责打印这很有用当用户的选择和业务逻辑指示我们应该打印某一组页数但实施那项特定打印的对象不在响应链里面这是比较好的作法相较之下通过将becomeFirst Responder传送到那个对象将对象塞进响应链就没那么适合在这个场景里那会是反模式以上就是打印的部分看来我准备好开始脱离世俗去旅行了在这支视频中杰森向我们介绍了新的Mac Catalyst API 和增强的Mac Catalyst API 它们能帮忙把你的应用程序带到Mac上而且比从前做得更好然后我示范了如何在Trip Planner中采用那些API 大多数案例中它们只是新属性只要设定一行代码就能将典型的Mac特色带进你的Catalyst应用程序试试看吧对代码做出一些微小的改变看着你的Mac Catalyst应用程序获得大幅改善感谢收看 [打击音乐]

2:26 - Push Button
```
let button = UIButton(type: .system)
```

2:29 - Toggle Button

let button = UIButton(type: .system)
button.changesSelectionAsPrimaryAction = true

2:40 - Pull-down Menu

let button = UIButton(type: .system)
button.menu = UIMenu()
button.showsMenuAsPrimaryAction = true

2:48 - Pop-up Button

let button = UIButton(type: .system)
button.menu = UIMenu()
button.showsMenuAsPrimaryAction = true
button.changesSelectionAsPrimaryAction = true

3:50 - UIToolTipInteraction

let toolTipInteraction = UIToolTipInteraction(defaultToolTip: string)
view.addInteraction(tooltipInteraction)

4:06 - UIControl ToopTip
```
control.toolTip = "Enable updates"
```

4:44 - ToolTips: UILabel

label.showsExpansionTextWhenTruncated = true

4:52 - Printing APIs

<key>UIApplicationSupportsPrintCommand</key>
</true>

5:44 - Print Support

func printContent(_ sender: Any?) {
    let printInteractionController = UIPrintInteractionController.shared
    ...
}

6:01 - Window Subtitle
```
scene.subtitle = "My subtitle"
```

7:34 - Behavioral Style

let button = UIButton(configuration: config)
button.preferredBehavioralStyle = .pad

7:43 - Window Tab Opt-Out

<key>UIApplicationSceneManifest</key>
	<dict>
		<key>UIApplicationSupportsMultipleScenes</key>
		<true/>
		<key>UIApplicationSupportsTabbedSceneCollection</key>
		<false/>
	</dict>

8:23 - UIPointerShape

UIPointerShape.beam(preferredLength:0 axis: .horizontal)
UIPointerShape.beam(preferredLength:0 axis: .vertical)

8:33 - Hidden Cursor
```
UIPointerStyle.hidden
```

13:25 - Scene subtitles

let subtitle: String = "..."
let scene: UIScene = ...
scene.subtitle = subtitle

14:54 - ToolTips

// ToolTip Interaction
let imageView: UIImageView = UIImageView(frame: .zero)
let interaction = UIToolTipInteraction(defaultToolTip: "...")
imageView.addInteraction(interaction)

// ToolTips - Label Expansion Text
let label: UILabel = UILabel()
label.text = "..."
label.showsExpansionTextWhenTruncated = true

// ToolTips — On UIControls
let switchControl = UISwitch()
switchControl.toolTip = "..."

17:49 - Primary button

let submitButton = UIButton(type: .system)
submitButton.role = .primary
submitButton.setTitle("Submit", for: .normal)

18:06 - Toggle button with menu

// Toggle button with menu
let toggleButton = UIButton(configuration: .filled(), primaryAction: nil)
toggleButton.configuration?.title = "Points Multiplier"
toggleButton.changesSelectionAsPrimaryAction = true
toggleButton.menu = ...

// Elsewhere...
toggleButton.configuration?.baseBackgroundColor = .systemRed

19:09 - Plain, destructive button

let resetButton = UIButton(configuration: .plain(), primaryAction: nil)
resetButton.configuration?.title = "Reset"
resetButton.role = .destructive
resetButton.tintColor = .systemRed

19:36 - Pop-up button

let popup = UIButton(type: .system)
popup.changesSelectionAsPrimaryAction = true
popup.showsMenuAsPrimaryAction = true
popup.menu = ...

21:01 - iPad behavioral style toggle

let button = UIButton(configuration: .filled(), primaryAction: nil)
button.configuration?.image = UIImage(systemName: "leaf")
button.preferredBehavioralStyle = .pad
button.configuration?.preferredSymbolConfigurationForImage =   
    UIImage.SymbolConfiguration(pointSize: 60)
button.changesSelectionAsPrimaryAction = true
button.configurationUpdateHandler = colorUpdateHandler

24:21 - Printing

override func printContent(_: Any?) {
    ...
}

override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
    if action == #selector(self.printContent(_:)) {
        ...
    } else {
        return super.canPerformAction(action, withSender: sender)
    }
}

override func target(forAction action: Selector, withSender sender: Any?) -> Any? {
    switch action {
    case #selector(UIResponder.printContent(_:)):
        ...
    default:
        return super.target(forAction: action, withSender: sender)
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。