优秀小组件的原则

优秀小组件的原则

通过保持小组件的相关性且可定制来探索强大小组件的基础。学习如何通过时间线条目和TimelineReloadPolicies 保持小组件最新。了解如何修改您的小组件，以用于不同的演示环境和物理位置。最后，还要了解如何创建可自定义的小组件，以便用户可以根据喜好进行个性化。

资源
相关视频

WWDC22
- 复杂功能和小组件：重新载入
WWDC21
WWDC20
下载

♪ ♪ 哈啰我是布雷特柯托是系统体验团队的工程师今天我们要谈谈设计出强大小组件的原则深入探讨一些热门主题协助你创造最棒的小组件我们在iOS 14引进了WidgetKit WidgetKit让你创造出美丽动态、适用于多平台的小组件可以出现在用户iOS iPadOS及macOS的主屏幕上
开始之前如果你还没观看 WWDC 2020的影片有一些真的很棒的内容如《为您介绍WidgetKit》便提供了 WidgetKit框架和核心概念的介绍《小组件边看边写》系列分三个部分从基础到进阶渐渐增加设计小组件的复杂度《为小组件构建 SwiftUI视图》详细说明如何充分利用SwiftUI 为小组件制作自适应的视图最后《设计绝妙小组件》使用许多例子探索了人类界面团队的设计考量
今天我们会触及强大小组件的两个主题保持小组件的关联性以及允许自定小组件先从关联性开始讲起我们将深入讨论三种关联性让你的小组件跟上趋势并且可以适应所处环境我们会谈到时间、呈现及位置的关联性时间轴是WidgetKit的核心这是让小组件一整天都保持关联性的核心机制时间轴是由一或多个时间轴条目组成在这个例子里你可以看到三个条目分别在早上9:00、9:30和10:00 系统向你的小组件要求时间轴得到的时间轴会被归档各条目未来会在你所指定的特定时间点呈现这让系统随时预备好你的用户界面在用户需要时就可以马上秀出来我们来看看一些时间轴的例子从最简单的开始看看里面包含哪些内容
这里列出了一个最简易的时间轴例子只有一个条目：屏幕使用时间由于屏幕使用时间无法预测或预知未来的数据完全是以用户装置被使用的数据历史为依据所以真的很难好好在时间轴运用多条目因此就只用了单一条目这是你所能拥有最简易的时间轴话虽如此并非所有的小组件都只能有单一条目大部分的情况下我会鼓励你考虑思考何不在时间轴提供多个条目假如你有未来展望性质的内容有重要的日期或期限或是内容可以预测未来那么你的小组件真的应该在时间轴利用多个条目我们来看天气小组件的例子可以看到天气的时间轴提供了一整天的多个条目第一个条目最准确因为显示的是当下的天气其他后续的条目所显示的则是当天稍晚的预报数据这个额外的预报数据超级有用因为小组件刷新不保证会刚刚好在你指定的时间进行刷新如果刷新没有刚刚好在理想的目标时间出现现在系统也有额外的预报内容可以应付用户体验
这是照片的范例你可以看见照片的时间轴提供了好几张会在一天当中特定时间出现的个人与相关照片这些照片都是我非常美好的回忆小组件虽然一天只刷新几次却真的会让人觉得它很有生命那是因为时间轴的多个条目一直提供新鲜内容这个例子显示即便你没有像天气那样可以预测的数据从照片的例子就可以看出你还是能加入用户觉得有关联的内容带来惊喜的感受方法就是利用时间轴的多个条目
某些小组件被观看的次数比其他小组件多因此我们决定给小组件一个更新公平因子我们把这称作更新预算预算在一整天的期间分配、累积并大大受到用户的观看习惯影响常被观看的小组件一天大约会收到40到70则之间的后台更新若平均分布的话约莫等于用户清醒时间每15到30分钟就会更新一次然而当然不是所有刷新都必须这样平均分布我们的目标是要为不同要求支持不同的更新节奏例如你可能有一个运动小组件平常大致上闲置但如果最爱的球队即将进行一场比赛可能就会在赛前赛中、甚至赛后收到爆量的分数更新
WidgetKit很聪明可能会在用户长时间未使用装置时暂停更新像是用户在睡觉时除此之外小组件更新也可能在特定小组件出现可用预算之前暂停但是说了这么多刷新并不是每秒钟都在进行小组件的重点不是要创造一个主屏幕上的实时运作体验你的小组件有很多方式会在一天当中进行刷新我们会快速一一带过了解这些方式其运作的机制还有刚刚介绍的预算会不会受到影响第一个是TimelineReloadPolicy 也就是WidgetKit的API 这是让刷新自动出现的核心机制当你提供一个时间轴你也会顺带提供刷新政策刷新政策会告知系统你何时希望小组件在后台自动刷新这些自动更新会计入小组件目前可用的预算
下一个是WidgetCenter刷新API 这个API会在某个让小组件现有的数据变得无效的事件发生时刷新小组件正常来说要求使用此API 会消耗可用预算表示更新只会在有可用预算时发生然而有一些特殊例外情况会让这类刷新立刻发生且不消耗预算这指的是你的容器app在用户前台或你的app正在参与用户会话像是导航或现正播放音讯的时候
这个API真的很能补充 TimelineReloadPolicy API的自动后台更新小组件也会在位置发生重大改变时进行更新系统侦测到重大的位置改变且你的小组件有使用位置时系统就会给你不用消耗预算的更新刷新会发生在用户下次观看小组件的时候这样位置才能适当获得解决注意这不保证会发生在位置出现改变的那一刻而是会发生在下次用户观看小组件时我们稍后会提到更多关于位置的部分如果系统的表现环境改变了也会刷新小组件例如可能用户改变了某个无障碍的喜好设定如动态文字或粗体文字语言或地区出现改变 iCloud或App Store出现改变重大的时间改变等等最后基于预算的缘故如果用户有一个小组件很少被看到它收到更新的次数可能没有你这位开发者希望的还要多系统知道你的时间轴的日期你偏好的刷新时间以及用户的整体观看历史系统如果认为用户观看数据时数据已经过时有可能会进行不用消耗预算的刷新当然这些系统主动进行的更新都不会消耗预算刚刚才提过每一个时间轴都有搭配一个刷新政策描述何时应该在后台自动更新 WidgetKit提供了三个选择：atEnd afterDate及never 这三个刷新政策哪一个适合你的小组件？我们就来一一说明使用一些例子阐述然后谈谈每一个应该留意什么陷阱
第一个要讨论的是atEnd刷新政策此政策会让小组件在时间轴来到尾声时合乎刷新的条件也就是最后一个条目出现的时候在这个例子中指的就是10:30 AM 注意这个时间只是小组件合乎刷新条件的时间起始点不代表小组件一定会刚好在这个时间刷新此外如果是时间轴只有单一条目的小组件使用atEnd 像是前面提过的屏幕使用时间那么系统就会为小组件选择适当的时间假如小组件本来就有超出目前时间轴寿命以外的内容就适合使用atEnd 我喜欢把这比喻成从窗口观看内容我们来看一个例子这里列出了6月7日日历小组件目前的时间轴总共有四个条目我有收录过去和未来的内容以便展示窗口我们把时间轴换成6月8日你就可以知道我说从窗口观看内容是什么意思
6月9日的时间轴也是我们只是在改变对用户所提供原本就可用的数据的观点这真的是能让atEnd政策大放异彩的一类内容
使用atEnd政策的小组件包括提醒、日历、照片、提示等同样这些小组件全都拥有无限内容从一个窗口就能观看之这不是很适合单一条目的时间轴因为系统会替你选一个刷新时间而那可能不是你希望的如果你的时间轴具有随着时间过去会失去关联性或准确性的投射内容也不建议使用atEnd 我们希望你的内容能尽量有最大的关联性如果等到时间轴尾声事件已经不再具有关联性了才可以进行更新那就无法带来最棒的用户体验以上讲的是atEnd 现在来谈谈afterDate AfterDate刷新政策会让小组件在指定的日期过后合乎刷新条件这个政策使你可以完全掌控合乎刷新条件的时间在这个例子里我们假设时间轴从9:00 AM到大约 11:00 AM之间是有效的由于小组件的预报数据在9:45 AM左右开始失去准确性所以选择了 9:30 AM做为小组件的刷新政策日期这让小组件在9:30后还有不少时间可以显示预报数据即使它没有马上在9:30刷新
在一整天的期间可能出现无法预测或难以预料的改变的内容抑或是准确性或关联性会出现周期性改变的数据最适合afterDate
使用afterDate的小组件例子包括股票、天气、新闻、邮件等这些小组件的内容全都可能在一整天的期间出现无法预测或难以预料的改变关于afterDate 有一些潜在的问题真的要很小心小心几近立即的刷新指定一分钟左右以后的日期可能有效但通常只限定在非常狭窄的时间窗口要求过多这种解析程度的刷新可能会使你之后没了刷新预算
跨装置设定小组件的刷新日期也要小心举例来说美国股市在东岸的9:30 AM开市你排定刚好9:30 AM进行刷新以便从服务器撷取当天的初始数据别忘了你的小组件可能装在数千甚至数百万个设备上而且还可能每一个设备都有好几次假如你真的非得要拥有像这样时间对齐的数据你真的应该考虑除了具快取服务器之外还要在这些数据添加某些程度的随机抖动这些都是特别重要的考虑因素可避免任何意外或不必要的支出最后来谈谈我最喜欢的刷新政策也就是never Never刷新政策是最简单的因为它从不自动刷新假如小组件的内容只在容器app 在用户前台时或者只通过推送通知之类的离散事件才会发生改变那么never就很适合你的小组件使用never政策时要让小组件更新到最新状态只能使用容器或其他配件外挂的 WidgetCenter刷新API 这会让刷新只在必要时发生对预算和用户的电池寿命造成最小的影响如果小组件要求用户在app内达成一个尚未满足的明确条件这时也很适合使用never 像是登入一项服务或是购买特定内容如果你的小组件在这类app内的条件达成前无法产出有意义的内容就可以考虑never 使用never政策的小组件例子包括TV、笔记、音乐 Podcasts、联络人等等这些小组件和app都要求用户跟app互动来带动内容改变或者他们接收这些内容更新的推播总而言之请善加利用时间轴条目为你的小组件选择正确的刷新政策使用WidgetCenter的刷新API 刷新离散事件的时间轴事件好接着来谈谈呈现的关联性你的小组件可能会要在iOS或macOS的特定背景下呈现导致小组件的外观改变小组件有时可能在没有任何时间轴更新的情况下被重新表现强大的小组件一定要能恰当地适应这些表现环境我们会谈到色彩的部分即浅色和深色模式还有iOS 15 新推出的部分隐私隐匿最后是全面的隐私隐匿
随着系统的设定改变 WidgetKit 会自动处理浅色与深色模式切换所造成的内容变更这是因为我们运用了SwiftUI的力量想想你希望你的小组件在这些背景下分别长什么样子这里以笔记和日历为例看看它们在浅色和深色模式中的样子但是要记住不适所有的小组件都得通过改变背景和文字色彩来顺应浅色和深色模式有几个小组件不会改变颜色像是音乐和股票如果你的小组件设计对于高对比度内容和深色及浅色风格具有高兼容性那你可以继续使用适合你的小组件的颜色
你也可以用Xcode Previews 预览小组件在Xcode的色彩变更这里快速地示范预览浅色模式的systemSmall小组件
切换成深色模式只需要加入colorScheme 环境置换码就能预览小组件在这个环境的样子如果你想要跟这个例子一样使用系统针对浅色和深色模式设计的标准背景色就用BackgroundStyle的色块
小组件也会受制于隐私敏感的表现环境如iOS的锁定屏幕在iOS 15 小组件可以在这些情况下隐匿部分内容这听起来可能很难理解所以我举了一个例子让你明白我到底在讲什么
假设我们有一个银行小组件显示了某个户头的可用余额在这个例子中我的账户有$128.45可以用
现在我们到锁定屏幕锁定装置账户余额还是会显示在iOS 14 因为WidgetKit没办法在装置锁定时动态隐匿余额信息然而这在iOS 15已经不同了你现在可以在这样的情况下标注特定视图来隐匿我来示范要怎么做你只需要在余额的文字插入视图修饰符.privacySensitive 就像这里显示的没有密码锁定时视图仍会如你预期地显示出余额但是当我们锁定了装置余额就被遮蔽起来
另外也要注意这个修饰符可以用在任何视图包括hstack 和vstack等容器视图如果用在容器整个容器都会隐匿
假如你的app运用了完全的数据保护在iOS装置使用密码锁定时不可碰触例如你的app可能有使用到健康数据所以你就不制作或害怕包含小组件因为你以为数据一定会显示在锁定屏幕上那么这个功能就真的很适合你
WidgetKit可以自动以占位内容取代活跃的时间轴内容在装置被密码锁定时完整地隐匿内容它甚至可以在装置被密码锁定的期间阻挡更新当你采取这里所列出的 default-data-protection权限就能做到这些你的时间轴数据会根据你所希望的储存在装置的数据类我们真的很认真看待你的数据隐私最后我想谈谈位置的关联性就像app一样小组件也能提供跟目前实际位置或纯粹在某方面与用户有关联性的位置相关的背景信息
如果你的app有在正常使用位置功能那么你的小组件也应该这么做由于小组件可能在主屏幕和Mac的通知中心拥有多个实例可以考虑让小组件除了使用当下位置之外也提供预先选好甚至是可搜寻的位置就像天气小组件那样借助Intent的力量用小组件撷取当下位置只需要几个步骤首先你需要在 Info.plist指定 NSWidgetUsesLocation 这会让系统知道你将在你的小组件外挂使用位置第二照正常方式使用 CLLocationManager 但这次是从小组件外挂的TimelineProvider 考量小组件所需的分辨率解析粗略位置比较迅速而且不需要超精准位置的话用户体验也会较好大体上位置要求得越精准解析时间就会越久
最后在CLLocationManager 使用isAuthorizedForWidgetUpdates API检查小组件是否授权位置更新这会告诉你用户是否已授权让小组件使用位置既然说到授权我们来深入探讨小组件的位置授权看看是怎么运作的小组件的授权通常是跟 app容器共享的这里列出了设定app 所有的位置授权选项
如果用户选择“使用App时” 就只有在容器app 位于用户前台或导航期间等把app视为使用中的情况下小组件才能取得用户位置
如果用户选择 “使用App或小组件时” 那么可取得位置的时机就跟选择 “使用App时”一样但是还另外容许了小组件取得这授权小组件在最后一次被观看之后还有15分钟可接收位置如果设定这两种授权的任一种都无法解析位置可以考虑替代内容甚至有办法取得的话考虑先前内容或是干脆表明位置无法解析
如果用户选择“一律允许”授权小组件就永远被授权可取得位置最后我们来谈谈制作可自定的小组件这件事我们会讲到大小、类型和配置等让用户能个人化小组件体验的方式小组件有各种大小我们建议你支持越多种大小越好这样用户摆放小组件时才有选择要记住装置之间在大小上的确存在些微差异可以的话最好使用系统标准填充边距、字型和字体大小
看看这个iPad 真的就像是被改造成一个内容展示柜如果你还没看出来 iOS 15多了一种新的大小专门为iPad设计我们叫它“特大”
抓出来让你看清楚一点它的高度跟大号的一样但宽度更宽能展现更多iPad可用的内容这就是把它加到小组件的方法我把它加进本就支持systemLarge 家族的现有小组件配置中在预设的情况下如果你不在小组件配置中指定支持的家族只要你是用iOS 15 SDK 或之后的版本来制作就会自动支持这个新大小
下一个个人化的面向是小组件的类型小组件的类型为数据和内容提供了不同的观点你要想想什么类型的小组件最适合你的app 说明这点最好的方法就是举例我们以时钟为例左边的是城市小组件会追踪单一城市的时间右边则是世界时钟小组件可以在同一个视图容纳许多城市股票是另一个例子左边的是股票符号小组件显示某一股票的价格这里显示Apple的股价右边则是总览小组件总览小组件会显示反映在用户股票app的一系列股票要怎么发表不同类型的小组件？发表多种类型的小组件超级简单
以前面的股票为例我在左上方有一个符号小组件和一个总览小组件要发表这些类型你只要把不同的小组件配置加到WidgetBundle对象并把@main属性放入WidgetBundle 就这么简单注意小组件在组合里被定义的顺序也很重要这个顺序会影响小组件在小组件画廊呈现的方式所以务必确保列出来的第一个小组件是你的英雄使用案例最后一旦app安装好了就不可能动态发表或动态撤回小组件的可用选择因此你应该特别谨慎思考小组件长时间的支持
自定的最后一个面向就是配置小组件支持两种类型：静态和Intent配置静态小组件配置会为所有小组件实例传递同样的内容还记得前面提到的股票总览例子吗？每一个都会显示一模一样的内容就算是在用户装置里的不同位置静态小组件超级简易也是很优雅的小组件定义因为用户完全不需要进行配置或设定
另一方面 Intent小组件配置为每一个实例传递用户配置的内容看看右边的这些股票符号小组件这位用户配置了许多不同的实例每一个都显示不同的股票这东西很美妙用户甚至可以把这全部组成一个叠放放在主屏幕滑动浏览节省空间你可能会问用户要怎么进行配置以用户的观点来说系统会提供所有的周边UI物件轻点小组件进入编辑模式后若有支持Intent 就会出现配置盘上面会列出用户可以配置的 Intent参数在这个例子里符号小组件有一个参数可以追踪这个值目前是AAPL这个字符串代表Apple股票用户轻点参数就会出现输出控制器搜集用户的输入完成后小组件就会自动更新了 Intent可以让你进行一堆自定 WWDC 2020有一个很棒的影片我等一下会分享给你想要 Intent配置的话可以从那里着手现在我们先快速地点出撰写Intent配置的小组件跟撰写静态配置的小组件有哪些差异
静态配置真的很简单只要使用标准的TimelineProvider 放入StaticConfiguration对象我们来比较一下Intent配置有何不同唯一的差别是用IntentConfiguration 取代StaticConfiguration 用IntentTimelineProvider 取代TimelineProvider 这些都会稍微更动界面以便支持Intent 这样在填入时间轴时就可以收到用户配置的Intent 想要更深入了解如何为小组件创造及配置Intent 包括支持的各种数据类型总览和在配置UI中看起来是什么样子请观看WWDC 2020的《为小组件添加配置和智能》影片
总结而言我们讨论了强大的小组件如何运用时间轴的条目掌握刷新政策以及顺应表现和可能的实体环境还有提供不同的大小、类型及配置让客户拥有动态且可以个人化的体验谢谢

15:46 - Xcode Previews for Widget Views with Color Scheme Overrides

struct MyWidgetEntryView : View {
    var date: Date

    var body: some View {
        ZStack {
            Rectangle().fill(BackgroundStyle())
            VStack {
                Text("Hello")
            }
        }
    }
}

struct MyWidget_Previews: PreviewProvider {
    static var previews: some View {
        MyWidgetEntryView(date: Date())
            .previewContext(WidgetPreviewContext(family: .systemSmall))
            .environment(\.colorScheme, .dark)
    }
}

16:34 - Widget Partial Privacy Redactions - Banking Example

struct MyWidgetEntryView : View {

    var body: some View {
        ZStack {
            Rectangle().fill(BackgroundStyle())
            VStack(alignment: .leading) {
                Text("Balance")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(Color.blue)
                Text("$128.45")
                    .privacySensitive()
                    .font(.title2)
                    .foregroundColor(Color.gray)
            }
        }
    }
}

23:08 - WidgetBundle Example

struct IndividualSymbolWidget : Widget {
    var body: some WidgetConfiguration {
    …
}
}

struct StocksOverviewWidget : Widget {
    var body: some WidgetConfiguration {
    …
    }
}

@main
struct MyWidgetBundle: WidgetBundle {
    var body: some Widget {
        // Order of these widgets defines the order in the Widget Gallery
        IndividualSymbolWidget()
        StocksOverviewWidget()
    }
}

25:43 - Static Widget Configuration Example

@main
public struct SampleWidget: Widget {
    public var body: some WidgetConfiguration {
        StaticConfiguration(kind: "com.sample.myStaticSampleWidgetKind",
                            provider: Provider()) { entry in
                                SampleWidgetEntryView(entry: entry)
                            }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

public struct Provider: TimelineProvider {
    public func timeline(with context: Context,
                         completion: @escaping (Timeline<Entry>) -> ()) {
        let entry = SimpleEntry(date: Date())
        // TODO: Generate a timeline entry
        completion(timeline)
    }
}

25:55 - Intent Widget Configuration Example

@main
public struct SampleWidget: Widget {
    public var body: some WidgetConfiguration {
        IntentConfiguration(kind: "com.sample.myIntentSampleWidgetKind",
                            intent: SampleConfigurationIntent.self
                            provider: Provider()) { entry in
                                SampleWidgetEntryView(entry: entry)
                            }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

public struct Provider: IntentTimelineProvider {
    public func timeline(for configuration: SampleConfigurationIntent, with context: Context,
                         completion: @escaping (Timeline<Entry>) -> ()) {
        let entry = SimpleEntry(date: Date(), configuration: configuration)
        // generate a timeline
        completion(timeline)
    }
}

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

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC22

WWDC21

WWDC20