构建桌面级 iPad App

了解如何构建可利用桌面级功能的 iPad App。来自 UIKit 团队的 Mohammed 将和您一起探索最新的导航、集合视图、菜单和编辑 API，学习有关如何构建功能强大的 iPad App 的最佳实践。在观看这个讲座的同时实时编写代码，或下载我们的示例 App 帮助您在更新代码时进行参考吧。

资源

相关视频

WWDC23

构建更出色的文稿类 App

WWDC22

下载

♪ ♪

Mohammed: 大家好我是 UIKit 的 Mohammed 感谢大家和我一起深入探索桌面级 iPad App 的构建在这个视频中我们使用 iPadOS 16 API 来将当前 iPad App 更新为桌面级体验我们首先使用全新的导航工具栏 API 展示其强大的功能增加 UI 密度提供自定义

然后我们应用新的 UICollectionView 和 Menu API 以启用复杂工作流及多重选择的快速活动栏最后以启用新的查找和替换体验结束整个操作使用新的编辑菜单增强文本编辑我们更新的 App 是为 iPadOS 15 构建的 Markdown 编辑器我们查看现代化过程的每个步骤时我会与大家解释该选择背后的最佳实践方法及动机以便您在将 App 应用到类似的流程中时能知道需要考虑的因素有哪些

如果开始前您需要一些入门知识可查看“桌面级 iPad 简介”视频里面有所有 UIKit 全新 iPadOS API 分类以及”iPad App 设计的最新更新”视频了解更多关于设计最佳的桌面级 iPad App 的技巧好了我们开始吧在开始前我们先想一下我们 App 控制的配置由于该 App 是为 iPadOS 15 设计的在导航工具栏中已经展示了最重要的控制功能并在不同的菜单和 popover 弹出框中置入了二级控制功能

在 iPadOS 16 中 UIKit 使当前的导航样式更正式并推出了两个全新的样式布局更紧密自定义程度更高这让 App 可以用最适配内容的布局方式并为前端 UI 带来更多功能

导航 App 有类似的推送或弹出的导航模型这整体来说对展示层级数据的 App 是适用的如设置

诸如 Safari 等浏览器或文件适用于浏览及在多个文档或文件夹结构中往返导航

而编辑器则对集中查看或编辑独立文档非常适用

对 Markdown 编辑器来说这一样式最适配我们的 App

编辑样式的标题在工具栏前端对齐中间是项目组在其它视图或菜单中隐藏的额外功能在这个样式中就能看到我们尽可能利用这种设计做更多的操作首先是自定义内置的返回动作来响应我们的需求然后在标题菜单加上文档信息以及常用的文档操作我们还添加支持使用新内置重命名 UI 来重命名文档最后我们将之前隐藏的功能放到工具栏中间让它们更易于访问首先我们将 view controller 的 navigationItem 样式属性设置为 .editor 以选择编辑样式

这一操作后标题马上调整为向前对齐并留空了中心区域

随后移除后面的完成按钮并用新的 backAction API 进行替换这样样式外观更标准摒弃了这一视图并返回文档选择器

接下来我们看下这一标题菜单对我们的 App 是否有用正如它的名字所述标题菜单正是显示在导航工具栏的标题视图这里显示文档元数据及展示整个文档的操作是非常合适的如果您的 App 不是基于文档的这个地方最适合展示应用完整视图的操作对我们的 App 来说可使用文档菜单的标头来展示关于该文档的更多有用信息我们还可以提供文档的可拖拽表示并让共享功能更易访问现在该是时候写一些代码了

我们的 App 是 UIDocument 支持的所以我们可以使用 UIDocument 的 fileURL 来例举 UIDocumentProperties 对象

接下来我们使用同样的 URL 来创建一个 NSItemProvider

然后我们使用项目提供程序来创建一个从属性对象的 dragItemsProvider 返回的 UIDragItem

我们还可用其构建一个从属性对象的 activityViewControllerProvider 中返回的 UIActivityViewController 最后我们设置属性对象为编辑 view controller 的 navigationItem 的 documentProperties 我们刚刚写的代码显示的是这个文档标头可提供文档快速概览包括其名称文件大小和图标由于我们指定了拖动项目和活动 view controller 提供程序我可以拖动图标将文档复制到 App 之外或点击共享按钮触发 activity view controller

除了展示文档标头标题菜单这一位置也可用于提供应用于整个文档的功能这一菜单中可显示两种操作预设的本地化标题和字符图像的系统提供操作以及 App 提供的自定义操作

由于附带了一些额外功能我们首先看看重命名操作我们可以通过遵照重命名代理协议将这一操作添加到我们的菜单中触发后这一操作会出现在工具栏的内置重命名 UI 中

首先我们将 view controller 指定为其导航项的 renameDelegate

然后我们执行 navigationItemDidEndRenamingWithTitle 来进行所展示文档实际重命名操作

这一功能在重命名操作提交后调用 App 负责重命名文档处理此操作有意打开的 API 最后可支持您 App 可能有的各种数据模型接着看另一个系统提供操作我们首先需要在我们的编辑 view controller 中重写它们的功能这里我们应用了复制和移动功能 UIKit自动在 navigationItem 的 titleMenuProvider 中作为建议 UIMenuElements 的数组展示系统提供操作包括重命名操作要将其置入我们的标题菜单中只需将它们添加到返回菜单的 children 中

除了系统指定操作我们可以添加完整的自定义操作甚至整个菜单层级这里我添加了 Export 子菜单包括导出为 HTML 和 PDF 的子 Action

因此点击标题视图可调出包含文档标头以及新添加的所有操作的菜单我选择重命名时可激活内置重命名 UI 我可以重命名文档

现在我们开始建立 App 的基础结构我们用 Mac catalyst 搭建 App 时就可以查看其外观了当我们在 Mac 上运行 App 时会发现编辑样式中的标题向前对齐已经被完美转译

我们的返回动作也可继续单击后会调出文件浏览器

系统提供动作和重命名功能自动显示在 App 的文件菜单中 Mac Catalyst 不会调用 titleMenuProvider 所以我们的自定义操作并不包含在文件菜单中要显示此操作我们需要使用主 UIMenuSystem 手动添加到 App 的主菜单中

好了我们继续现代化进程我们继续在 Mac 中查看以逐步达成目标我们想想工具栏中间区域提供的可用选项 iOS 15 版本的 App 有一个菜单可显示许多二级控制功能和工具使用中间项目我们可以让这些工具更容易被搜索和发现

由于中间区域是可自定义的我们可以加入一大组控制按钮而无需担心用不常用按钮充填 UI 每个人都可以自定义工具栏内容使其适应自己的工作流启用自定义的第一步是在 navigationItem 中指定一个 customizationIdentifier

接下来我们将中间项定义为 UIBarButtonItemGroups Groups 是一个现有概念扩展到 UINavigationBar 并增强了对 iOS 16 自定义的支持这一屏幕快照展示了一组我们想要默认显示的中间项左边的同步滚动按钮提供了其它任何方式都无法企及的重要功能因此可以用 UIBarButtonItem 新创建的 creatingFixedGroup() 功能来将其置于固定组中固定组不可自定义也不能被用户移动

另一方面添加链接按钮不提供关键功能同样的任务可以通过在编辑器中输入链接标签来实现所以我们使用 creatingOptionalGroup 来创建一个完整的自定义项目我们为其指定一个独特的 customizationIdentifier 这样在 App 的登陆期间自定义操作能保持一致

我们用类似的流程在默认组中定义剩余的项目然后继续操作无需默认的低优先级项目其中之一就是文本格式组包括粗体斜体下划线项目

这些项目不是特别重要无需在默认中显示但我们希望能在自定义的 popover 弹出框中显示这样能被拖入工具栏中

要实现这一效果我们可以使用 UIBarButtonItemGroup 的 optionalGroup 初始化器 isInDefaultCustomization 设置为 false

我们也要为该组指定代表项目因此在 popover 弹出框中能显示标题以及在工具栏空间有限时能显示缩略的信息

回到 iPad 中我们定义的中间项会显示在工具栏的中间区域如果我点击新增的“更多”按钮会显示一个带有 “自定义工具栏”的菜单单击后自定义模式会被激活

我们标记为固定的同步滚动按钮不再强调且变为静态其它所有项目都弹起并抖动表示它们都是可自定义的

可选项如格式组在 popover 弹出框中显示可被拖入工具栏中

我们在 Mac 中运行 App 时会发现中间项已经被转换为完全自定义的 macOS 工具栏按钮

我们继续下一步前先暂时回到 iPad 重新调整 App 的大小现在我们工具栏上的可用空间更少了中间项已不可见 UIKit 会自动处理中间项的显示和隐藏来适应不同的可用空间无法包含的额外项目都会在溢出菜单中显示标准工具栏按钮项将自动转换为对应的菜单选项但如果需要的话我们也可以提供自定义菜单选项由于 UIKit 对自定义视图项的目的没有对应方案我们的滑块项并不会自动转译我们需要手动指定菜单项目

这是我们的滑块项这是有自定义视图的单一工具栏按钮项隐藏于可选工具栏按钮组之下为了提供滑块的核心功能我们将 menuRepresentation 定义为带有减少重置和增加动作的 UIMenu

使用 UIMenu 的新 preferredElementSize 属性我们可以为菜单提供更紧凑的并行动作

使用新的 keepsMenuPresented 属性我们可以保证每个动作后的菜单展示都能正常运行在不取消或重新显示菜单的情况下让字体大小可以多次修改让我们再次在 iPad 中运行看看现在我们调出溢出菜单滑块显示为有三个并行行动的内联菜单包含了滑块的全部功能

由于 Mac 中不存在小元素尺寸动作将显示为标准 mac OS 菜单项以上是 UI 配置和自定义接下来我们看看如何在 App 中使用新的集合视图和菜单 API 加速一些工作流程我们的 App 有一个侧边栏内容表格可用于快速导航文档或操作顶层标签在 iOS 16 之前增加编辑多重项目的能力不一定意味着执行不同的编辑模式将批量操作降低为工具栏中的按钮

iOS 16 推出多项目菜单的全新设计有一系列的项目明确指出了菜单影响是哪个项目提供了多项目拖拽的直接转换在桌面级 iPad App 中这个新的菜单设计与轻量型选择样式最为匹配这里的“轻量型” 是指选择多重项目时无需在编辑模式中开启集合视图或对 App 的 UI 做出重大改变我们使用当前 API 即可实现并启动键盘聚焦首先我们将 allowsMultipleSelection 设置为 true

然后将 allowsFocus 设置为 true 启动键盘聚焦

我们可以设置 selectionFollowsFocus 为 true 将聚焦转变为驱动选择

如果在 iPad 上运行我们马上就能注意到每个项目都添加到了选择中但仍然触发了选择动作导致编辑器视图滚动我们回到代码看下是什么原因

找到了 didSelectItemAtIndexPath 中的代码尝试在编辑模式中通过检查collectionView 的 isEditing 属性来禁止滚动现在我们已经允许了编辑模式外的多重选择这一代码在每次选择时都会运行我们可以通过使用新的 UICollectionViewDelegate 方法来修正我们执行 performPrimaryActionForItemAtIndexPath 将滚动代码移动到这个新功能中由于这个功能仅在点击单个项目时才会调用集合视图并没有编辑我们不需要检查编辑模式

由于我们没有与选择相关的行为就可以将 indexPath 中所做的选择项操作移除

回到 iPad 编辑器视图中选择多重项目不再滚动到对应的文本中完成这一操作后我们将其真正添加到菜单支持中

在 iPadOS 16 中 UICollectionViewDelegate 当前单一项菜单方法已不适用其替代方法支持在任意位置从 0 到多重项目显示菜单指定 indexPaths 数组中的项目数量取决于项目是如何选取的以及菜单是在何处激活的

如果数组为空则菜单在单元格之间的空白区激活

如果有单一的 indexPath 则在取消选择或单一选择项目上激活

如果有超过一个项目则菜单在多重选择部分激活

如果我回到 iPad 中再次选择上面的四个项目双指单击其中一个选择项目会出现新的多项菜单

当我在 Mac 中做同样的操作时在选择单元格周围会绘制一个圆环以突出强调

多项菜单完成后我们看看使用新的查找和替换和编辑菜单功能增强文本编辑体验我们的 App 使用 UITextView 作为编辑器无需任何自定义的查找和替换行为因此我们启用默认系统功能只需要将文本视图的 isFindInteractionEnabled 属性设置为 true 这一设置完成后编辑文本时按 Command+F 调出查找和替换 UI

在文本视图的编辑菜单中增加自定义行动并不需要多大成本但却能启动一些强大快速的编辑功能我们只用执行新的 UITextViewDelegate 方法在范围建议行动内编辑文本菜单在执行操作中我们可以构建和返回结合自定义行动的与系统菜单的 UIMenu 如这个隐藏行动

结果如下当我选择文本调用编辑菜单时自定义操作和系统提供操作都会显示您可观看“采用桌面级编辑交互”视频以获取更多关于查找和替换及编辑菜单的信息就是这样有了这些改变我们就能通过一些重大的基础步骤制作桌面级 App 并将其无缝转译到 Mac 中使用 iPadOS 16 提供的 API 用类似的流程操作您的 App 首先选择适合您 App 的导航样式用文档属性和标题菜单增强文档工作流程用中间项显示重要功能提供自定义功能在多项目菜单中启动多重项目的快速活动栏用查找和替换以及全新的编辑菜单增强 App 的文本编辑体验不管您是构建一个新的 App 还是更新现有 App 我都迫不及待想使用您应用了这些新工具的 App 了感谢大家的观看

3:36 - Enable UINavigationBar editor style.
```
navigationItem.style = .editor
```

3:52 - Set a back action.

navigationItem.backAction = UIAction(…)

4:48 - Create a document properties header.

let properties = UIDocumentProperties(url: document.fileURL)

if let itemProvider = NSItemProvider(contentsOf: document.fileURL) {
    properties.dragItemsProvider = { _ in
        [UIDragItem(itemProvider: itemProvider)]
    }
    properties.activityViewControllerProvider = {
        UIActivityViewController(activityItems: [itemProvider], applicationActivities: nil)
    }
}

navigationItem.documentProperties = properties

6:36 - Adopt rename title menu action and rename UI

override func viewDidLoad() {
    navigationItem.renameDelegate = self
}

func navigationItem(_ navigationItem: UINavigationItem, didEndRenamingWith title: String) {
    // Rename document using methods appropriate to the app’s data model
}

7:09 - Adopt system provided title menu actions.

override func duplicate(_ sender: Any?) {
    // Duplicate document
}

override func move(_ sender: Any?) {
    // Move document
}

func didOpenDocument() {
    ...
    navigationItem.titleMenuProvider = { [unowned self] suggested in
        var children = suggested

        ...

        return UIMenu(children: children)
    }
}

7:10 - Add custom title menu actions

func didOpenDocument() {
    ...
    navigationItem.titleMenuProvider = { [unowned self] suggested in
        var children = suggested
        children += [
            UIMenu(title: "Export…", 
                   image: UIImage(systemName: "arrow.up.forward.square"), 
                   children: [
                UIAction(title: "HTML", image: UIImage(systemName: "safari")) { ... },
                UIAction(title: "PDF", image: UIImage(systemName: "doc")) { ... }
            ])
        ]
        return UIMenu(children: children)
    }
}

9:35 - Enable customization for center items

navigationItem.customizationIdentifier = "editorView"

10:00 - Define a fixed center item group.

UIBarButtonItem(title: "Sync Scrolling", ...).creatingFixedGroup()

10:23 - Define an optional (customizable) center item group.

UIBarButtonItem(title: "Add Link", ...).creatingOptionalGroup(customizationIdentifier: "addLink")

10:56 - Define a non-default optional center item group.

UIBarButtonItemGroup.optionalGroup(customizationIdentifier: "textFormat",
																	 isInDefaultCustomization: false,
																	 representativeItem: UIBarButtonItem(title: "Format", ...)
																	 items: [
																	      UIBarButtonItem(title: "Bold", ...),
																	      UIBarButtonItem(title: "Italics", ...),
																	      UIBarButtonItem(title: "Underline", ...),
																	 ])

13:16 - Define a custom menu representation for a bar button item group.

sliderGroup.menuRepresentation = UIMenu(title: "Text Size",
                                        preferredElementSize: .small,
                                        children: [
    UIAction(title: "Decrease",
             image: UIImage(systemName: "minus.magnifyingglass"),
             attributes: .keepsMenuPresented) { ... },
    UIAction(title: "Reset",
             image: UIImage(systemName: "1.magnifyingglass"),
             attributes: .keepsMenuPresented) { ... },
    UIAction(title: "Increase",
             image: UIImage(systemName: "plus.magnifyingglass"),
             attributes: .keepsMenuPresented) { ... },
])

15:10 - Enable multiple selection and keyboard focus in a UICollectionView.

// Enable multiple selection
collectionView.allowsMultipleSelection = true

// Enable keyboard focus
collectionView.allowsFocus = true

// Allow keyboard focus to drive selection 
collectionView.selectionFollowsFocus = true

16:11 - Add a primary action to UICollectionView items.

func collectionView(_ collectionView: UICollectionView, 
                    performPrimaryActionForItemAt indexPath: IndexPath) {
  
    // Scroll to the tapped element
    if let element = dataSource.itemIdentifier(for: indexPath) {
        delegate?.outline(self, didChoose: element)
    }
}

16:56 - Add a multi-item menu to UICollectionView.

func collectionView(_ collectionView: UICollectionView, 
                      contextMenuConfigurationForItemsAt indexPaths: [IndexPath], 
                      point: CGPoint) -> UIContextMenuConfiguration? {

    if indexPaths.count == 0 {
        // Construct an empty space menu
    } 
    else if indexPaths.count == 1 {
        // Construct a single item menu
    } 
    else {
        // Construct a multi-item menu
    }
}

18:12 - Enable Find and Replace in UITextView.
```
textView.isFindInteractionEnabled = true
```

18:34 - Add custom actions to UITextView's edit menu.

func textView(_ textView: UITextView,
              editMenuForTextIn range: NSRange,
              suggestedActions: [UIMenuElement]) -> UIMenu? {
    
    if textView.selectedRange.length > 0 {
        let customActions = [ UIAction(title: "Hide", ... ) { ... } ]
        return UIMenu(children: customActions + suggestedActions)
    }
    
    return nil
}

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