iOS 14 widget 小组件开发

1、基本介绍

iOS 14 中新增了 WidgetExtension,用来取代之前的 TodayExtension。相比之前的简单变了很多,但Widget Extension 只支持 SwiftUI。

2、WidgetExtension 创建

打开 File -> New -> Target -> Widget Extension


1.png
2.png

2.1、Live Activity 简介

通过调用Live Activity(实时活动) 来实现锁屏下方和 Dynamic Island(灵动岛)区域的功能。

只不过之前这个行为是 iOS 内置的,并且相关的UI 也都是固定的, 没有提供给我们接口去自定义它。

Live Activity 对应的 ActivityKit 就是 iOS 16.1 版本中引入的新库。

3.png
4.png

2.2、Include Configuration Intent

小组件提供用户可配置的属性,实现动态布局

3、结构介绍

@main 是主入口,这里可以设置小组件的 Provider(可以理解为控制器) 以及 WidgetEntryView(可以理解为主视图 View),以及长按后弹出框的 APP 信息设置。

Provider:控制器,这里可以用来做小组件的刷新操作

SimpleEntry: 这个是数据模型,Provider 里如果想更新数据到 WidgetEntryView,必须通过 SimpleEntry 来实现,但是这个必须继承 TimelineEntry。可以新增参数,变量,用来传递自己需要的数据类型。

WidgetEntryView: 主视图,在这里自定义页面用来显示在手机桌面。

3.1、 主函数入口

@main  // 通过这个注解来声明这个结构体是主函数入口
struct WidgetDemo: Widget {
    // 小组件的唯一标识
    let kind: String = "WidgetDemo"

    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
            WidgetDemoEntryView(entry: entry)
                                // 小组件跳转URL
                .widgetURL(URL(string: "Scheme://openPage"))
        }
        // 小组件标题
        .configurationDisplayName("My Widget")
        // 小组件的描述
        .description("This is an example widget.")
        // 用户选择小部件、中版本或大版本的组件
        .supportedFamilies([.systemMedium, .systemSmall, .systemLarge])
    }
}

3.2、 provider

// 声明一个遵守TimelineProvider协议的结构体 实现里面的3个方法
struct Provider: IntentTimelineProvider {
    // 占位视图,例如网络请求失败、发生未知错误、第一次展示小组件都会展示这个view
    // 在编辑小组件的时候 会调用这个方法 返回一个SimpleEntry实例 然后用这个实例去创建 前面说到的自定义view 然后显示那个view
    // 因为编辑小组件的时候只是一个样式展示 数据不需要真实的 所以用固定的数据初始化一个SimpleEntry对象直接返回就好了 不需要网络请求等异步处理
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), configuration: ConfigurationIntent())
    }

    // 这是第一次显示小组件的时候 调用这个方法 这里就是要显示真实的数据了 所以可以在代码块里 做网络请求的异步的操作
    // 在completion回调中把实例好的entry对象传出去 之后系统就会用这个实例去初始化一个TestWidgetEntryView对象并显示
    func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), configuration: configuration)
        completion(entry)
    }

    // 决定 Widget 何时刷新
    // 这个方法返回一个时间线 用来描述小组件的刷新规则
    func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate, configuration: configuration)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

3.3、 SimpleEntry 数据模型

// 渲染 Widget 所需的数据模型,需要遵守TimelineEntry协议
struct SimpleEntry: TimelineEntry {
    let date: Date
    let configuration: ConfigurationIntent
}

3.4、 WidgetEntryView

// 渲染的view
struct WidgetDemoEntryView : View {
    var entry: Provider.Entry

    // 判断小组件的类型
    @Environment(\.widgetFamily) var family: WidgetFamily

    var body: some View {
        switch family {
            case .systemSmall:
            VStack(alignment: .center, spacing: 0) {
                Text("小")
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }
            case .systemMedium:
            VStack(alignment: .center, spacing: 0) {
                Text("中")
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }
            default:
            VStack(alignment: .center, spacing: 0) {
                Text("大")
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }
        }
    }
}
5.gif

3.5、预览

// 这个view是用来预览swiftUI的 点击xcode顶部菜单的 Editor->Canvas会显示实时画布 如果不需要预览 这段代码可以直接删除
struct WidgetDemo_Previews: PreviewProvider {
    static var previews: some View {
        WidgetDemoEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent()))
        .previewContext(WidgetPreviewContext(family: .systemLarge))
    }
}

4、小组件点击交互及传值

4.1 Widget Extension 发送数据

以 URL 的形式发送交互参数,有 widgetURL,Link 两种发送方式。

widgetUrl 是针对整个小组件 点击小组件响应(如果有Link 就响应Link)

LinK 给元素添加点击事件, Link 对 systemSmall样式的组件不生效(systemSmall 样式的小组件只响应widgetUrl)

数据发送方式 支持类型
widgetURL systemSmall,systemMedium,systemLarge
Link systemMedium,systemLarge
// 渲染的view
struct WidgetDemoEntryView : View {
    var entry: Provider.Entry

    // 判断小组件的类型
    @Environment(\.widgetFamily) var family: WidgetFamily

    var body: some View {
        //        Text(entry.date, style: .time)
        switch family {
            case .systemSmall:
            VStack(alignment: .center, spacing: 0) {
                Link(destination: URL(string: "Scheme://openTitlePage")!){
                    Text("小")
                }
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }.widgetURL(URL(string: "Scheme://openPage"))
            case .systemMedium:
            VStack(alignment: .center, spacing: 0) {
                Link(destination: URL(string: "Scheme://openTitlePage")!){
                    Text("中")
                }
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }.widgetURL(URL(string: "Scheme://openPage"))
            default:
            VStack(alignment: .center, spacing: 0) {
                Link(destination: URL(string: "Scheme://openTitlePage")!){
                    Text("大")
                }
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }.widgetURL(URL(string: "Scheme://openPage"))
        }
    }
}

Link(destination: URL(string: "Scheme://openPage")!){
            Text("text")
        }

4.2 APP 端接收数据

这里需要注意,以前这种值传递是使用 AppDelegate 中的 openURL 方法来处理的。但是 iOS 14 的小组件数据交互只能用 SceneDelegate 来接收,交互事件会走到 SceneDelegate 中的 openURLContexts 方法中。

// AppDelegate
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
    NSLog(@"交互 = %@",url);
    return YES;
}

// SceneDelegate
- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts
{
    NSLog(@"交互 = %@",URLContexts.allObjects.firstObject.URL);
}

5、和app本地数据进行交互 AppData

小组件和app交互是通过AppGroups的交互的

主项目和子项目都需要创建AppGroups

6.png

OC 需要创建桥接文件

创建WidgetKitManager.swift 第一次的话会自动配置

import WidgetKit

@objc
@available(iOS 14.0, *)
class WidgetKitManager: NSObject {

    @objc
    static let shareManager = WidgetKitManager()

    /// MARK: 刷新所有小组件
    @objc
    func reloadAllTimelines() {
        #if arch(arm64) || arch(i386) || arch(x86_64)
        WidgetCenter.shared.reloadAllTimelines()
        #endif
    }

    /// MARK: 刷新单个小组件
    /*
    kind: 小组件Configuration 中的kind
    */
    @objc
    func reloadTimelines(kind: String) {
        #if arch(arm64) || arch(i386) || arch(x86_64)
        WidgetCenter.shared.reloadTimelines(ofKind: kind)
        #endif
    }
}

OC

#import "WidgetController.h"
#import "StudyOC-Swift.h"

@interface WidgetController ()

@end

@implementation WidgetController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self initWidget];
}

- (void)initWidget{
    UIButton *btn = [UIButton new];
    [btn setTitle:@"刷新" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    btn.frame = CGRectMake(0, 100, 100, 100);
    [btn addTarget:self action:@selector(clicktBtn1) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)clicktBtn1{
//    [WidgetCenter];
    //使用 Groups ID 初始化一个供 App Groups 使用的 NSUserDefaults 对象
    NSUserDefaults *userDefaults = [[NSUserDefaults alloc] initWithSuiteName:@"group.zhahntest"];

    //写入数据
    [userDefaults setValue:@"123456789" forKey:@"userID"];

    //读取数据
    NSString *userIDStr = [userDefaults valueForKey:@"userID"];
    NSLog(@"zzr123 = %@",userIDStr);
    [[WidgetKitManager shareManager] reloadAllTimelines];
}

6、刷新机制

刷新分被动刷新和主动刷新

6.1、主动刷新

WidgetCenter.shared.reloadAllTimelines()
 // 刷新指定的kind
// WidgetCenter.shared.reloadTimelines(ofKind: <#T##String#>)

6.2、被动刷新

func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
    var entries: [SimpleEntry] = []

    let timeline = Timeline(entries: entries, policy: .atEnd)
    completion(timeline)
}

7、要注意的点

7.1、getTimeline中的时间线设置

官方文档中有提到 每个小组件的一天的刷新次数、频率是有限制的 ,可能为了避免所有APP不停的刷新会影响手机性能吧。而且刷新不会很及时 比如我自己设置的3分钟的间隔,一般刷新的时间是在3~4分钟之间,如果时间设置的是十几秒的话就完全不刷新,但是官方文档又有说测试环境不限制,但是不知道为什么频率高了刷新直接无效。

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

推荐阅读更多精彩内容