iPad 上的 SwiftUI：添加工具栏、标题及更多功能

利用 SwiftUI 优化您的 iPad App 工具栏。我们将向您介绍如何设计工具栏结构来充分利用 iPad 上的空间，并帮助用户最大限度地提高效率。我们还将了解自定义，探索文档的最新显示方式，等等。该系列讲座包含两个部分，这是第二个讲座。为能更好地理解此视频，我们建议您先观看“iPad 上的 SwiftUI：整理您的界面”。

资源

相关视频

WWDC23

构建更出色的文稿类 App

WWDC22

下载

♪ ♪

Harry：大家好我是 SwiftUI 团队的工程师 Harry 欢迎来到 SwiftUI on iPad 系列的第二部分在本系列的第一部分我的同事 Raj 向您深入介绍了如何使用 list 和 table 选项和拆分视图以便让您的 App 在使用更大的 iPad 屏幕和各种输入设备时表现出众如果您还没有看过那个课程我强烈建议您先从那里开始了解 SwiftUI 我很高兴看到 Raj 构建的 Places App 现在我想给这个程序添加一些我自己的功能所以在本次课程中我会用我最喜欢的工具栏！在 SwiftUI 中 toolbar API 配置了很多系统栏类似于 iOS 上的导航栏或底栏或者 macOS 上的窗口工具栏工具栏为您的大部分常用功能提供了快捷操作建立好的工具栏能够很好地提高使用您的程序的用户的工作效率

我花了很多时间思考工具栏组件以及如何在 Places 中使用 iOS 16 的一些新的工具栏功能我将首先简要介绍我构建的内容让您感受一下现在在 iPad 上可以实现的功能

这是 Places App 在我更新后的样子

您应该会注意到一些新功能例如前导对齐的导航标题标题菜单、标题菜单标头和居中对齐的工具栏项如果您使用过 Mac 您可能还熟悉类似自定义工具栏等功能它允许人们制作自己的自定义工具栏这些强大的 Mac 功能将在 iPad 上首次亮相

在本次课程中我将展示 toolbar API 的一些增强功能然后我将会向您展示一些关于标题和文档的新 API 那么让我们先从工具栏开始吧现在很多人应该已经在自己的 iOS App 中配置了工具栏并针对更小的屏幕进行了优化您可能像我第一次看到 Places 一样添加了菜单

我的菜单代码是这样的

您可以看到我有一个工具栏项它放在主操作位置我在这一层内部添加了更多的菜单并以一些控件作为菜单的选项内容让我们看看在 iPad 上它是什么样子的正如您想象的那样这些菜单栏并没有充分利用屏幕的可用空间不过令人开心的是在 iOS 16 中工具栏可以帮您实现这些类型的菜单我们称他们为溢出菜单为了更好的利用这个控件我将会重组我的工具栏的内容

首先我会将 ToolbarItem (工具栏项) 转换为 ToolbarItemGroup (工具栏项目组) 然后我将删除 Menu 和其内容然后将原来的内容移动到工具栏项目组的里面每个单独的工具栏项都插入到了这个工具栏项目组中在 iPad 和 Mac 上这就是在需要自动将工具栏项移动到溢出菜单时所需的一切我可以在这里做更多的事情但在我做之前我需要考虑工具栏项的位置位置定义了工具栏项的呈现区域不同的呈现位置可以定义到相同的区域您可以将导航栏内部看成三个不同的区域前导区域、中心区域和尾部区域前导和尾部区域通常包含一些控件而中心区域则包含 App 的标题让我们在 Places 的代码中看看这些区域

在 Places 里我主要操作的工具栏项目组放置在 iPad 或 Mac 上的尾部区域主要操作代表用户在特定屏幕上使用的最常用操作在 iOS 16 中有一个称为次要操作的新位置这些工具栏项代表的是不常用的控件但仍然要保证自己属于工具栏项目收藏和编辑等操作在 Places 中是不常用的所以我会让它们成为次要动作

默认情况下次要操作在工具栏中不可见而是隐藏在溢出菜单中您可以用新的工具栏角色修饰符来修改工具栏的行为

高亮部分的修饰符通过为工具栏分配语义角色来影响它的行为我在这里传递了一个编辑器角色 (.editor) 它告诉导航栏应该针对编辑内容进行优化导航栏将此解释为工具栏希望拥有更多空间呈现项目并将标题从中央区域移动到前导区域这在移动溢出菜单之前为次要操作腾出了中心区域的空间但在紧凑布局中导航栏不会改变并继续在中心区域呈现标题

使用次要操作和工具栏角色 API 让 Places 真正开始利用 iPad 的屏幕尺寸有了中心区域我可以在工具栏添加更多项目比如声音按钮、舒适度按钮或删除按钮但是如果我开始添加很多项目对某些用户来说可能会觉得工具栏臃肿而蠢笨 MacOS 长期以来一直支持自定义工具栏这让每个人都可以选择最适合他们的工具栏布局我很高兴地介绍现在 iPadOS 也支持用户自定义工具栏您可以使用现有的工具栏自定义 API 该 API 已经采用于 macOS 上现在让我们来看看这个 API 只有工具栏项是可以自定义的所以首先我需要将我的工具栏项目组拆分为单独的工具栏项请注意这种更改与之前的效果是一样的自定义工具栏还需要将每个工具栏项与唯一标识符相关联所以我会为我的每个工具栏项添加 ID 这些 ID 在 App 启动时必须是唯一且一致的这一点很重要当用户自定义他们的工具栏时 SwiftUI 会保留这些 ID 并使用这些 ID 查找与其关联的视图以便于呈现最后我将给整个工具栏修饰符添加一个 ID 总之这将使工具栏支持自定义功能

对于自定义工具栏来说工具栏项最初不能出现在工具栏中这些项目在自定义弹出窗口中开始它们的生命周期并可在之后添加到工具栏因为这些项目最初并不存在所以对特定工作流程中一些更有用的操作是一个不错的选择让我们看一下代码

我想隐藏一些当前的工具栏项以便于新的工具栏项能更容易看到

现在让我们添加一个包含共享链接的工具栏项共享链接是 SwiftUI 中的新功能它依赖于一个称为 transferable 的新协议要查看有关 Transferable 和 ShareLink 的更多信息请查看“Meet Transferable”课程在我的工具栏项到达应有位置后我将为 showsByDefault 参数赋一个 false 值这使得该项目一开始不会出现在工具栏中

现在您可以看到我的共享链接功能在自定义弹出窗口中展示出来而且我可以将它从自定义弹出窗口拖到栏中用户会喜欢这个功能的有了我的分享链接之后我开始思考工具栏项之间的关系将分享链接移入工具栏后我注意到我的图像功能和地图调整功能是分开的但我认为这些工具栏项应该是同一组快速编辑控件我想在工具栏内部制作这种关系

iOS 16 和 macOS Ventura 支持通过使用控制组建立这种工具栏项之间的关系让我来告诉您怎么做您可以看到我有两个单独的工具栏项用于图像功能和地图调整功能的操作要将它们组合在一起首先需要将它们移动到同一个项目里然后我会将它们包含在同一个控制组中

用户现在可以将它们作为一个单独工具栏项从工具栏中添加或删除这很酷但我可以更进一步使用 ControlGroup 上可用的新 API 通过向控制组添加标签这组工具栏项可以在进入溢出菜单之前折叠进自己的小菜单工具栏开始真正关联在一起了我想做最后一个改动添加新地点是一个常见且重要的操作所以我想为其添加一个工具栏项

为此我将在工具栏中添加一个新按钮但这次我将使用主要动作的呈现位置因为我认为这个新按钮的功能是常见操作

这个位置凸显了 iOS 和 macOS 之间的一个重要区别自定义工具栏修饰符中的所有工具栏项都支持在 macOS 上进行自定义但在 iPadOS 上只有次要操作可以自定义因此这里的新按钮呈现在工具栏的尾部区域并且不能由用户自定义哇！关于工具栏的内容非常多而这些并不是仅有的改进导航标题也获得了一些围绕菜单、文档和更多内容的新功能我们以文档为例有很多类型的文档您可能熟悉由文档组 API 管理的文档文档组 API 具有大量用于表示和管理文档的内置功能要说明的是在使用文档组时所有内容都是免费的

不过在 Places 中一个独立的控件也可以认为是一个文档尽管 Places 没有使用文档组您可编辑它的属性也可以在 Places App 中进行添加或删除操作也可以和您的朋友分享一个感兴趣的地点让我们看看如何在基于非文档组的 App 中展示这种关系我已经将视图的导航标题变为地点名称所以我已将一个地点名称的一部分与我的工具栏的标题相关联在 iOS 16 中我可以使用新的导航标题修饰符再次进行修改导航标题栏现在支持显示菜单您可以把它想象成 macOS 上的文件菜单要创建菜单导航标题栏提供一组操作这些操作您感觉像创建一个普通的菜单一样请注意标题栏现在附加了一个菜单标志它呈现以您的操作选项构成的菜单这并不是所有导航标题都可以做到的我最喜欢的新功能之一是它支持可编辑标题您可以将一个绑定信息传递给导航标题这将告诉工具栏支持编辑标题您所缺少的只是一种真正开始编辑的方法您可以在标题菜单操作中使用新的 RenameButton 来实现这一点

点击“重命名”按钮可以重命名标题就像您可以将导航标题关联到您的视图一样您现在还可以关联文档例如我的位置当提供文档时标题菜单将呈现用于显示该文档预览的专用标题可以拖动预览并且可以快速访问共享文档要获取这些标题之一请使用新的导航文档修饰符将导航文档与视图关联起来您可以通过提供符合 transferable 的类型数据或直接提供 URL 来完成此操作在这里我将提供一个 URL 它将打开地图 App 并导航到我正在查看的地方导航文档修饰符还将在提供 URL 时配置 macOS 上的窗口工具栏的代理图标

最后我想我应该休息一下不再更新 App 的工具栏您能相信所有功能都是我这一次添加的吗？我迫不及待地想开始使用它们在这段示例中我做了很多事情来改善 iPad 上的 Places 体验感受比如溢出菜单和用户自定义功能使用次要操作放置和自定义 API 真正充分利用 iPad 和 Mac 上更大的可用空间

标题获得了一些在工具栏中表示呈现自己的新方法使用导航标题功能创建标题菜单或支持标题重命名并记得在适当的时候使用导航文档修饰符希望您喜欢 SwiftUI on iPad 系列随着表格、选择功能工具栏等方面的所有改进走出去让您的 iPad App 更上一层楼谢谢祝您度过愉快的 WWDC

0:01 - Explicit More Menu

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItem(placement: .primaryAction) {
            Menu {
                FavoriteToggle(place: $place)
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label(
                    "More", 
                    systemImage: "ellipsis.circle")
            }
        }
    }

0:02 - Menu in ToolbarItemGroup

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .primaryAction) {
            Menu {
                FavoriteToggle(place: $place)
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("More", systemImage: "ellipsis.circle")
            }
        }
    }

0:03 - ToolbarItemGroup with Menu Content

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .primaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }

0:04 - Secondary Action ToolbarItemGroup

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .secondaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }

0:05 - Toolbar Role

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .secondaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)

0:06 - Individual ToolbarItems

PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItem(placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)

0:07 - Customizable ToolbarItems

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(id: "map", placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)

0:08 - ShareLink ToolbarItem

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(id: "map", placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
        ToolbarItem(id: "share", placement: .secondaryAction) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

0:09 - Non-default ShareLink ToolbarItem

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(id: "map", placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

0:10 - ControlGroup in ToolbarItem

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            }
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

0:11 - ControlGroup in ToolbarItem with Label

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("Edits", systemImage: "wand.and.stars")
            }
        }
    }
    .toolbarRole(.editor)

0:12 - NewButton ToolbarItem

PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "new", placement: .primaryAction) {
            NewButton()
        }
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("Edits", systemImage: "wand.and.stars")
            }
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)

0:13 - Navigation Title

PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle(place.name)

0:14 - Navigation Title with Menu

PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle(place.name) {
        MyPrintButton()
    }

0:15 - Editable Navigation Title with Menu

PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle($place.name) {
        MyPrintButton()
    }

0:16 - Editable Navigation Title with RenameButton

PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle($place.name) {
        MyPrintButton()
        RenameButton()
    }

0:17 - Navigation Document

PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle($place.name) {
        MyPrintButton()
        RenameButton()
    }
    .navigationDocument(place.url)

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