Cdd2e210e0240ba7bbe0071ec1d5052a
WWDC20 10028 - WidgetKit 速览

本主题基于 https://developer.apple.com/videos/play/wwdc2020/10028/ 梳理

概述

WidgetKit 是 WWDC20 备受关注的新特性,支持在 iOS、iPadOS 主屏幕,今日视图以及 macOS 通知栏展示动态信息和个性化内容。

众所周知,Apple 对 iOS 主屏幕的改进一直保持克制,这次引入 Widget 是一次巨大的改动。Widget 如何提供一致的跨平台体验?如何提供实时的个性化内容?如何引入 Widget 同时最大可能减少主屏幕的性能、电量开销?本文作为 WidgetKit 速览,带你快速了解这些内容。

《WWDC20 内参》Widget 相关链接(完善整理中)

优秀 Widget 的三要素

设计优秀的 Widget,包含如下三个要素

  • Glanceable 一目了然
  • Relevant 高相关性
  • Personalized 个性化

Glanceable 一目了然

Widgets are not mini-apps

Widget 并不是(常驻桌面的)微型应用程序,这句话被反复提起。
在一闪而过的快速切换应用的主屏幕里,设计交互复杂的应用界面并不能切合用户的需要。一目了然的内容才是用户关心的唯一要素

通过强大的 SwiftUI,你可以快速实现跨平台体验一致的 Widget,同时非常方便的支持 Dynamic Type、DarkMode 等系统特性,提供一目了然、快速响应的桌面体验。

Relevant 高相关性

一般用户每天进入主屏幕的次数超过 90 次,但停留的总时长不过几分钟。用户可不想在主屏幕见到枯燥的加载界面

一般用户每天进入主屏幕的次数超过 90 次,但停留的总时长不过几分钟。用户可不想在主屏幕见到枯燥的加载界面

WidgetKit 会在正确的时机显示即时的内容,避免每个 Widget 启动、加载、渲染的漫长过程。
为了达成这一目标,WidgetKit 统一管理所有 Widget,支持预渲染、复用,并提供合适的更新策略,灵活可控的更新时机。

智能叠放

智能叠放是 Widget 与用户高相关性的又一体现。它是支持多个 Widget 叠放的智能组件。用户可以上下滑动手动切换,更巧妙的是:基于用户的使用场景以及开发者的配置,系统也会智能地为用户展示最需要的 Widget。

Personalized 个性化

在天气 widget 中,基于不同地理位置,语言、摄氏度单位,提供个性化的使用体验。同时支持三种尺寸,更小的尺寸展示核心内容,更大的尺寸则展示更多的相关信息,满足不同用户的需要。

快速开发一个 Widget

配置信息

Configuration

  • Static configuration :静态配置,无用户配置项
  • Intent configuration :支持用户配置及用户意图推测功能(Intents Extension)

SupportedFamilies


Widget 支持 small、medium、large三种尺寸 ,建议开发者同时提供三种尺寸。

  • Placeholder UI

Placeholder UI 是 Widget 加载中所显示的占位信息,它应该清晰的表达 Widget 所属类型。
绝大多数场景下,用户不会看到 Placeholder UI ,只有在修改设备环境配置等个别场景下会碰到。

Widget 交互

Widgets are not mini-apps

Widget UI 是无状态的,不支持滚动,不能展示视频和动态图像。
Widget 为用户提供一目了然的内容展示,在用户需要进一步查看或编辑的时候,通过轻点启动 app 完成顺畅的体验。

用户点击 Widget 中的特定专辑后,通过 Deep links,App 启动后快速展示对应专辑,方便用户的进一步操作。


注意:systemSmall 只支持一个 link ,systemMedium,systemLarge 支持多个

WidgetKit 执行原理

开发者通过 SwiftUI 构建 Views,定义 Timelines 为 Views 提供对应时间所需数据。数据变化时,通过 reload 更新数据。
WidgetKit 统一管理多个 Widgets:序列化 Widget Views 和 Timelines 数据,处理预渲染和复用,响应并处理 System reloads、App-driven reloads,为桌面、Widget Gallery 预览等场景提供高效、即时的 widget 体验。

值得一提的是:WidgetKit 会把 Timelines 所定义的 Entries 对应的 Views 结构信息缓存到磁盘,仅在需要的时候实时渲染特定的 View。这使得系统可以在极低电量开销下为众多 Widgets 处理 Timelines 信息。

Views

  • Placeholder UI:(上文已经介绍)Widget 占位 UI
  • Snapshot

以最快速度返回的视图。并非截图,而是真实体验。

top Created with Sketch.