复杂功能和小组件：重新载入

我们将在探索 watchOS 和 iOS 锁屏时再次推出“小组件边看边写”活动。了解 WidgetKit 的最新改进，它们可为 watchOS 上的复杂功能提供支持，帮助您为 iPhone 构建锁屏小组件。我们将介绍如何整合最新的 SwiftUI 视图以提供一目了然的数据，探索每个平台如何渲染内容，并学习如何在小组件或复杂功能中对您的内容的设计和外观进行自定义。

资源

相关视频

WWDC23

小组件的新位置

Tech Talks

面向企业开发者的新功能

WWDC22

WWDC21

优秀小组件的原则

WWDC20

为你介绍 WidgetKit

下载

♪ 柔和乐器演奏的嘻哈音乐 ♪ ♪ Devon Endicott：嗨我的名字叫 Devon 我是 watchOS 团队的工程师今天我将谈谈 iOS Graham Perks：我是 iOS 工程师 Graham 今天我将谈谈 watchOS Devon：我们将讨论向 WidgetKit 添加的 API 它们使您能为 watchOS 的锁屏和复杂功能编写附件小组件我们将展示如何同时开发这两者以及 SwiftUI 的新增功能以帮助您完成开发过程如果您不熟悉小组件时间线和重新加载我鼓励您查找以前的 WidgetKit 讲座首先我们将谈谈复杂功能的历史及其演变过程然后我们将讨论为您的小组件着色的新 API 以及新环境中的复杂功能之后 Graham 将演示如何开始制作您自己的小组件并将现有的小组件扩展移动到 watchOS 接下来 Graham 将带您了解如何充分利用这些较小的视图最后我们将讨论您的小组件可能出现的不同隐私环境复杂功能是 watchOS 平台的关键部分可在表盘上呈现快速一目了然的信息它们传达可立即访问的高价值信息您可以一键访问 App 中的相关位置在 watchOS 2 中 ClockKit 让您可以创建自己的复杂功能从那时起复杂功能走过了漫长的道路

watchOS 5 推出了丰富的复杂功能包括图形内容和一套新的小组件系列 watchOS 7 推出了 SwiftUI 复杂功能和多个其他复杂功能使您能够将复杂功能提升到一个新的水平并提供比以往更多的选项如今我们通过 WidgetKit 对复杂功能进行了重新构思和重新制作并将 SwiftUI 纳入到复杂功能中以小组件的形式为 iOS 带来了一目了然的复杂功能体验通过 iOS 16 和 watchOS 9 中的 WidgetKit 您能够在两个平台上构建一目了然的优质小组件和复杂功能从而可以只编写一次代码并与现有的主屏幕小组件共享基础结构为此我们在以“accessory” 一词为前缀的现有 WidgetFamily 类型中添加了新的小组件系列新的 accessoryRectangular 系列可用于显示多行文本或小图形和图表类似于现有的 ClockKit graphicRectangular 系列 accessoryCircular 系列非常适合简要的信息仪表和进度视图该系列还取代了 graphicCircular ClockKit 系列全新的 accessoryInline 是一个文本槽出现在 watchOS 的许多表盘上以及 iOS 的时间上方内嵌槽有多种尺寸稍后我们将讨论如何充分利用它们

watchOS 特有的是新的 accessoryCorner 系列它将一小圈小组件内容与仪表和文本混合在一起本讲的重点是 iOS 和 watchOS 之间通用的系列如要详细了解这个新的 watchOS 系列以及复杂功能的特性请查看 “进一步了解 WidgetKit 复杂功能”讲座让我们谈谈颜色和渲染模式您可能已经注意到附件小组件呈现出几种不同的外观附件系列小组件的外观由系统控制我们提供了一些工具以帮助它们适应渲染风格您的小组件可能会显示在三种不同的渲染模式中即全彩、强调或鲜艳模式我们引入了 WidgetRenderingMode 类型来表示这三种不同的呈现方式您可以使用 widgetRenderingMode 键路径从 Environment 访问此值之后您可以有条件地更改内容以确保它在出现的任何地方看起来都恰到好处在 watchOS 的全彩模式下您的内容完全按照您指定的方式显示许多现有的复杂功能在全彩模式下会呈现出丰富多彩的外观例如天气仪表中的梯度或活动环的颜色在强调渲染模式下您的视图分为两组并独立着色两个着色组都是单色的仅保留原始不透明度您可以告诉系统如何使用 .widgetAccentable() 视图修饰符对视图进行分组或者根据 Widget Rendering Mode 环境值切换内容以确保在展平时呈现完美的外观请注意系统可以通过多种方式为您的内容着色其中一些方式是颠倒的有些是黑色背景而另一些则是 watchOS 9 提供的新的全彩背景在 iOS 的鲜艳渲染模式下您的内容会降低饱和度并适当着色以适应锁屏背景系统将您的灰度内容映射到材料外观这种材料适应其背后的内容在环境中看起来恰到好处此外可以对锁屏进行配置赋予鲜艳渲染模式一个彩色的色调光源色最终大部分不透明且更亮另一方面暗源色在其背后的背景中显得不太突出只有少量变亮为确保可识别性请避免在此模式下使用透明色反之请使用较深的颜色或黑色来表示不太突出的内容同时保持可识别性为了帮助您了解其中的一些细微差别我们还引入了 AccessoryWidgetBackground 视图以便为需要它的小组件提供一致的背景比如这个圆形日历虽然大多数附件小组件没有背景但某些样式可通过其中之一来增强背景视图在各种小组件渲染模式中呈现出不同的外观并由系统进行调整以适合表盘或锁屏的样式它在全彩和强调模式下是一个柔和透明的视图在鲜艳环境中是一个黑色视图这会导致低亮度和完全模糊 Graham 非常高兴能够开始为 watchOS 的锁屏和复杂功能制作一些新的小组件下面由 Graham 为大家讲解 Graham：嗨我们又见面了我将为现有的 App Emoji Rangers 添加对新小组件系列的支持某些人可能通过 WWDC 2020 的 “Widgets 边看边写”讲座熟悉了该 App 在我开始之前对于无小组件项目的开发者我想说明一点您可以通过向您的项目添加小组件扩展目标来入手小组件扩展目标已存在于 iOS 上并且已被引入 watchOS 但我知道开发者中的许多人已经有了含小组件的 App 所以我们今天就从这开始讨论如何添加新的小组件和复杂功能

我们将继续进行 Emoji Rangers 项目这个 App 会跟踪我们最喜欢的 Emoji Rangers 并使用主屏幕小组件让您及时了解其健康状况和充电时间我们已经将 Emoji Rangers 引入 watchOS 将我们最喜欢的 App 带到我们的手腕上今天我们将扩展 Emoji Rangers 以支持我们的新小组件系列并在手表中引入其小组件扩展首先我们将小组件扩展添加到手表上我们将添加一个与现有 iOS 目标共享代码的新 watchOS 目标我们将复制 iOS 小组件扩展目标

给它一个更好的名称

将捆绑标识符改为以 Watch App 的标识符为前缀把 watchOS 设为目标

并将新扩展嵌入到 Watch App 中现在我们需要在 watchOS 上构建我们的代码让我们继续吧

浏览 EmojiRangerWidget 代码我们可以看到系统重新加载内容时使用的时间线提供程序

使用 SwiftUI 为不同系列生成内容的视图

小组件配置和 Xcode 预览提供程序 Emoji Rangers App 已经支持 iOS 主屏幕小组件它提供了中小系列的系统这里在小组件配置中我将添加新的系列

由于系统系列在手表上不可用我们需要使用平台宏来指定我们的 supportedFamilies

在预览提供程序中我将为新系列添加预览

接下来我们需要实现新的 IntentRecommendation API 然后才能为 watchOS 成功构建小组件虽然意图在 iOS 的小组件编辑 UI 中是完全可配置的但在 watchOS 上我们需要提供一个预配置的列表我们可以通过覆盖 IntentTimelineProvider 上的新推荐方法来做到这一点

现在我们正在成功构建小组件让我们继续预览看看我们的圆形小组件是什么样子

即使是小组件的内容也不适合我们的新外形尺寸新的小组件系列比主屏幕上的 iOS 小组件更小您需要考虑复杂功能的内容现在我们谈谈可以突出复杂功能的一些新视图我们来看视图我们可以看到 systemSmall 和其他小组件的代码让我们为 accessoryCircular 案例添加代码我觉得只要有头像就够了

这提供了进入 App 的快捷方式但不向用户提供任何信息让我们在边缘添加一个进度视图这将使用户了解游侠何时准备好再次战斗

问题是把这个进度视图制作成实时动画效果需要在短时间内连续输入大量时间线条目但我们可以使用 SwiftUI 新的自动更新 ProgressView 这需要一个日期区间在此期间我们的游侠将完全康复系统会不断更新我们的进度视图这意味着我们在这里只需要一个时间线条目

好多了现在让我们添加矩形系列

我们将选择矩形预览这给了我们更多的空间所以我们将制作一个复杂功能样式的三行视图首先是角色的名字其次是他们的等级然后是完全康复的时间为此我们将使用自动更新的日期字段我想突出角色的名字所以我将使用标题字体样式调整文字大小并添加调整颜色的 widgetAccentable 修饰符

我们的视图在鲜艳模式下看起来很棒现在让我们看看它在手表的其他渲染模式下的样子

您可以看到角色的名字如何呈现强调色为了使您的小组件和复杂功能非常适合这一环境请使用默认字体参数并利用字体样式这很重要 iOS 和 watchOS 的字体样式和大小不同 iOS 使用的是常规的文字设计而 watchOS 使用的是字体更粗的圆润设计您的小组件和复杂功能将在屏幕上与其他小组件和复杂功能相邻因此它们看起来一致我们建议使用字体样式 Title Headline Body 和 Caption

Xcode 的预览显示我们还有剩余空间来添加头像

我们看看它在 iPhone 上的样子

看起来很棒最后我们来添加第三种样式 accessoryInline 它显示一行文字并选择性地显示图像请注意内嵌附件是根据系统定义的颜色和字体绘制的我们选择预览

然后显示英雄的名字和充电倒计时

这段文字对于表槽来说太长了所以现在是向您展示 ViewThatFits 的好时机我可以提供多个视图从冗长到简洁 ViewThatFits 将选择适合可用空间的第一个内容视图该视图不会发生截断或剪裁的情况让我们缩短文本

即使这样对于最短的表槽来说可能也太长了所以我们通过切换这个名字的头像来提供第三种选择

我们看看它是什么样子的

有关此内容的更多信息请参阅 “使用 SwiftUI 编写自定义布局”讲座太棒了 Emoji Rangers 也希望享有一些隐私下面请 Devon 继续为大家讲解 Devon：大家好下面我们谈谈隐私到目前为止我们在本讲中讨论了小组件和复杂功能的活动状态但是在我们的平台上您需要考虑设备是在编辑内容还是处于低亮度状态在 iOS 锁屏上默认行为是即使在设备锁定时也显示您的内容这是此网格中左上单元格的状态但是这可以在“设置”中进行配置用户可以选择在锁定时编辑小组件就像通知一样在 watchOS 上只要手表处于佩戴状态设备就会保持解锁状态不活动时手表转换为永远在线状态内容以低亮度显示更新节奏较慢默认情况下您的内容不会在低亮度下编辑这是左下角的状态与锁屏一样用户可以将复杂功能内容配置为在永远在线状态下编辑在这种状态下您需要确保您的内容已准备好进行编辑和进入低亮度状态合起来这些平台涵盖了此处显示的所有四种状态请考虑所有这些可能的状态并确保您的复杂功能和小组件在所有情况下都能正常工作我们谈谈如何做到这一点在手表上您的小组件需要支持永远在线的显示体验您可以使用 \.isLuminanceReduced 环境值调整内容以实现永远在线如果您来自 ClockKit 请注意您现在可以为每个时间线条目准备永远在线的内容而不是仅仅一个时间线条目在永远在线状态下时间相关文本和进度视图将变为低保真度模式以支持永远在线状态的低更新节奏要支持此模式请使用环境值删除任何对时间敏感的内容并优化您的内容以适应较低的更新频率现在我们谈谈编辑默认情况下隐私模式将显示 TimelineProvider 创建的占位符视图的编辑版本如果您有一些敏感的元素和不需要编辑的其他元素可以使用 .privacySensitive 修饰符只标记一些要编辑的视图在这个例子中我们在小组件中编辑了心率但是没有编辑图像现在您可以为锁屏和 WidgetKit 复杂功能制作优质的小组件了有关 SwiftUI 新功能的更多信息请查看 “使用 SwiftUI 编写自定义布局”讲座两位：谢谢观看 ♪

4:07 - widgetAccentable

VStack(alignment: .leading) {
    Text("Headline")
        .font(.headline)
        .widgetAccentable()
    Text("Body 1")
    Text("Body 2")
}.frame(maxWidth: .infinity, alignment: .leading)

5:24 - AccessoryWidgetBackground

ZStack {
     AccessoryWidgetBackground()
     VStack {
        Text("MON")
        Text("6")
         .font(.title)
    }
}

9:02 - Xcode Previews

EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryCircular))
                .previewDisplayName("Circular")
            EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryRectangular))
                .previewDisplayName("Rectangular")
            EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryInline))
                .previewDisplayName("Inline")

#if os(iOS)

9:38 - recommendations method

return recommendedIntents()
            .map { intent in
                return IntentRecommendation(intent: intent, description: intent.hero!.displayString)
            }

11:05 - ProgressView

ProgressView(interval: entry.character.injuryDate...entry.character.fullHealthDate,
                         countdown: false,
                         label: { Text(entry.character.name) },
                         currentValueLabel: {
                Avatar(character: entry.character, includeBackground: false)
            })
            .progressViewStyle(.circular)

11:26 - Rectangular

case .accessoryRectangular:
        HStack(alignment: .center, spacing: 0) {
            VStack(alignment: .leading) {
                Text(entry.character.name)
                    
                Text("Level \(entry.character.level)")
                Text(entry.character.fullHealthDate, style: .timer)
            }.frame(maxWidth: .infinity, alignment: .leading)
            Avatar(character: entry.character, includeBackground: false)
        }

14:03 - ViewThatFits

ViewThatFits {
                Text("\(entry.character.name) is resting, combat-ready in \(entry.character.fullHealthDate, style: .relative)")
                Text("\(entry.character.name) ready in \(entry.character.fullHealthDate, style: .timer)")
                Text("\(entry.character.avatar) \(entry.character.fullHealthDate, style: .timer)")
            }

16:18 - isLuminanceReduced

@Environment(\.isLuminanceReduced)
var isLuminanceReduced

var body: some View {
    if isLuminanceReduced {
        Text("🙈").font(.title)
    } else {
        Text("🐵").font(.title)
    }
}

16:52 - privacySensitive

VStack(spacing: -2) {
    Image(systemName: "heart")
        .font(.caption.bold())
        .widgetAccentable()
    Text("\(currentHeartRate)")
        .font(.title)
        .privacySensitive()
}

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