iOS开发之WidgetKit补充

在 iOS 14 正式版发布之前我写了一篇博文《iOS开发之WidgetKit》,iOS 14 正式版发布以后,经测试,Apple 改变了 Widget 的 API,所以本文进行一个补充说明(在前文的基础上做了修改,尤其是代码部分)。

介绍

  • WidgetKit 通过在 iOS 主屏幕或 macOS 通知中心放置小部件,让用户可以随时访问 App 中的内容。Widget 可以保持更新,从而让用户获得最新信息。当需要查看 App 的更多细节时,Widget 会直接跳转到 App 中的适当位置。
  • Widget 有三种不同的尺寸(小号、中号和大号),可以对 Widget 进行个性化定制。
  • 要实现一个 Widget,需要给应用添加一个 Widget 扩展并只能使用 SwiftUI 来实现 Widget 的内容。

App实现

Widget 寄宿于 App,所以首先必须将 App 功能实现。

添加Widget

  1. 点击项目,选择File > New > Target
  2. Application Extension中,选择Widget Extension,然后点击Next
  3. 输入扩展名的名称。
  4. 单击Finish
  5. 此时会生成一个新文件夹,包含以下内容
    • 扩展名.swift
    • 扩展名.intentdefinition
    • Assets.xcassets
    • Info.plist

数据共享

App 与 Widget 可以通过网络数据和本地数据两种方式进行数据的共享。

  • 网络数据可通过 URLSession 完成数据的请求与解析。
  • 本地数据共享可以通过 App Groups,它是 iOS 8 之后推出的在 App 之间共享数据的方式,只需要简单的配置就可以实现数据的共享。(本文以此为例)

配置

  1. App 在Signing&Capabilities中打开App Groups,内容一般为group.Bundle Identifier
  2. Widget 必须在Signing&Capabilities中打开App Groups,内容与 App 保持一致。
配置App Groups.jpg

如果文件需要共享,可以选中 App 中需要共享给 Widget 的文件,然后勾选 Widget 的 Target。

实现

配置完成以后,可以通过UserDefaultsFileManager来实现 App 与 Widget 的数据共享,这里以UserDefaults为例,因为 SwiftUI 提供了@AppStorage来简化操作。

  • App
// 包含App Groups的UserDefaults
@AppStorage("contact", store: UserDefaults(suiteName: "group.cn.abc.yf.SwiftUI-Widget"))

// 然后在后面保存数据
  • Widget
@AppStorage("contact", store: UserDefaults(suiteName: "group.cn.abc.yf.SwiftUI-Widget"))

// 然后在后面取出数据

编写Widget

  1. 原理:开发者通过 SwiftUI 构建 Views,定义Timelines为 Views 提供对应时间所需的数据,当数据变化时,通过reload更新数据。TimelineProvider提供一组TimelineEntryReloadPolicy,用来后续刷新页面。
  2. 实现 Widget 的代码相对比较模版,可以从 Widget 的入口开始,缺什么补什么。

入口

@main
struct UserWidget: Widget {
    private let kind: String = "UserWidget"
    
    public var body: some WidgetConfiguration {
    
    }
}
  • kind:字符串,唯一标识 Widget。
  • WidgetConfiguration:有两类配置,分别为
    • StaticConfiguration : 可以在不需要用户任何输入的情况下自行解析,可以在 Widget 的 App 中获取相关数据并发送给 Widget。
    • IntentConfiguration:依赖于 App 的 Siri Intent,会自动接收这些 Intent 并用于更新 Widget,用于构建动态 Widget。
  • .configurationDisplayName:设置 Widget 在添加界面中显示的标题。
  • .description::设置 Widget 在添加界面中显示的描述。
  • .supportedFamilies:设置支持的不同尺寸,可以支持 3 种尺寸,示意图如下。
不同尺寸.jpg

内容

不论是哪种配置,都需要提供以下内容。

Entry

渲染 Widget 所需的数据模型,需要遵守TimelineEntry协议。

struct Model: TimelineEntry {
    let date: Date
    // 显示的内容Model
}

Provider

遵守TimelineProvider协议,告诉 WidgetKit 何时渲染与刷新 Widget。需要实现以下 3 个方法:

struct Provider: TimelineProvider {
    // 占位视图,是一个标准的 SwiftUI View,当第一次展示或者发生错误时都会展示该 View。
    func placeholder(in context: Context) -> TimelineEntry {
    }
    
    // 编辑屏幕在左上角选择添加Widget、第一次展示时会调用该方法
    func getSnapshot(in context: Context, completion: @escaping (TimelineEntry) -> Void) {
    }

    // 进行数据的预处理,转化成Entry
    // 最后一定要调用 completion,进而刷新Widget
    func getTimeline(in context: Context, completion: @escaping (Timeline<TimelineEntry>) -> Void) {
    }
}
  1. getTimeline 是最重要的方法,后面的数据刷新都会在其中完成,所以可能会在其中完成最新的网络数据和本地数据的获取,然后转成 Model 以供使用。
  2. getTimeline 的方法里有一个 policy 参数,表示刷新的时机,可以选择.never(不刷新),.atEnd(Entry 显示完毕之后自动刷新) 或 .after(date)(到达某个特定时间后自动刷新)
  3. Widget 刷新的时间由系统统一决定(有时候设置了也不会自己刷新),如果需要强制刷新 Widget,可以在 App 中使用 WidgetCenter 来重新加载所有时间线:WidgetCenter.shared.reloadAllTimelines()

EntryView

屏幕上 Widget 显示的内容,可以针对不同尺寸的 Widget 设置不同的 View。

struct EntryView: View {
    
    var entry: Provider.Entry // 数据模型
    
    @Environment(\.widgetFamily) var family // 尺寸环境变量

    @ViewBuilder
    var body: some View {
        switch family {
        case .systemSmall:
            // 小尺寸
        case .systemMedium:
            // 中尺寸
        default:
            // 大尺寸
        }
    }
}
  1. Widget 能且只能使用 SwiftUI 构建界面。
  2. Widget 本质:一个随着时间线而更新的 SwiftUI View。

运行

  • 先运行 App
  • 再运行 Widget

交互

只能点击,点击会打开 App。也可以通过.widgetURL(myDeeplink)方法配置当 Widget 被点击时触发哪个 Deep Linking,也可以通过使用链接使 Widget 的不同部分触发不同的 Deep Linking(可以直接理解为 Widget 只是一个按钮,点按这个按钮会跳转到指定 URL 对应的页面)。

  • Widget点击
// 某个Widget内容
var body: some View {
    VStack {
        Link(destination: homeDeepLink) {
            Text("主页")
        }
        Link(destination: settingsDeepLink) {
            Text("设置")
        }
    }.widgetURL(myDeeplink)
}
  • App处理
@main
struct SwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onOpenURL(perform: { url in
                    print(url)
                })
        }
    }
}

源代码

Widget案例

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342