iOS桌面小插件 Widget Extension

  • 这个插件时iOS14以后才出现的，基于SwiftUI
  • 旧项目新建时可能一堆错误，其中一个时要把插件target 开发sdk版本设置为14.0以上

新建target

  • File - Target - Widget Extension

项目结构

  • @main 这里是主入口，这里可以设置小组件的 Provider以及 WidgetEntryView，以及长按后弹出框的 APP 信息设置。
  • Provider：控制器，这里可以用来做小组件的刷新操作
  • SimpleEntry: 这个是数据模型，Provider 里如果想更新数据到 WidgetEntryView，必须通过 SimpleEntry 来实现，当然命名随意了，但是这个必须继承 TimelineEntry。同时也可以新增参数，变量什么的，用来传递自己需要的数据类型。
  • WidgetEntryView: 这就是主视图了，在这里自定义页面用来显示在手机桌面。

  2. import WidgetKit
  3. import SwiftUI
  4. import Intents
  6. // 控制器，类似Controller，这里可以用来做小组件的刷新操作
  7. struct Provider: IntentTimelineProvider {
  8.     func placeholder(in context: Context) -> SimpleEntry {
  9.         SimpleEntry(date: Date(), configuration: ConfigurationIntent())
  10.     }
  12.     func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
  13.         let entry = SimpleEntry(date: Date(), configuration: configuration)
  14.         completion(entry)
  15.     }
  17.     func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
  18.         var entries: [SimpleEntry] = []
  20.         // Generate a timeline consisting of five entries an hour apart, starting from the current date.
  21.         let currentDate = Date()
  22.         for hourOffset in 0 ..< 5 {
  23.             let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
  24.             let entry = SimpleEntry(date: entryDate, configuration: configuration)
  25.             entries.append(entry)
  26.         }
  28.         let timeline = Timeline(entries: entries, policy: .atEnd)
  29.         completion(timeline)
  30.     }
  31. }
  33. // 数据模型，数据显示在View上必须经过这里
  34. struct SimpleEntry: TimelineEntry {
  35.     let date: Date
  36.     let configuration: ConfigurationIntent
  37. }
  39. // View，小组件的界面
  40. struct WidgetExtensionEntryView : View {
  41.     var entry: Provider.Entry
  43.     var body: some View {
  44.         Text(entry.date, style: .time)
  46.     }
  47. }
  49. // 程序入口，初始化相关信息，如Provider，View等
  50. @main
  51. struct WidgetExtension: Widget {
  52.     let kind: String = "WidgetExtension"
  54.     var body: some WidgetConfiguration {
  55.         IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
  56.             WidgetExtensionEntryView(entry: entry)
  57.         }
  58.         .configurationDisplayName("小组件")
  59.         .description("This is an 测试一下 widget.")
  60.     }
  61. }
  62. // 自定义样式
  63. struct WidgetExtension_Previews: PreviewProvider {
  64.     static var previews: some View {
  66.         // 设置小组件尺寸 systemSmall systemMedium systemLarge
  67.         WidgetExtensionEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent()))
  68.             .previewContext(WidgetPreviewContext(family: .systemSmall))
  69.     }
  70. }

自定义UI

自定义小组件尺寸

  1. // 自定义样式
  2. struct WidgetExtension_Previews: PreviewProvider {
  3.     static var previews: some View {
  5.         // 设置小组件尺寸 systemSmall systemMedium systemLarge
  6.         WidgetExtensionEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent()))
  7.             .previewContext(WidgetPreviewContext(family: .systemSmall))
  8.     }
  9. }

HStack、VStack、ZStack

  • HStack、VStack相当于UIStackView，H是水平方向，V是竖直方向。ZStack可以理解为相对于屏幕里外方向，也就是相当于以前superView和subView的方式。
  1. // View，小组件的界面
  2. struct WidgetExtensionEntryView : View {
  3.     var entry: Provider.Entry
  5.     var body: some View {
  6.         // 深度布局，屏幕深度
  7.         ZStack(alignment: .center, content: {
  8.             // 背景图
  9.             Image("2").resizable().aspectRatio(contentMode: .fit)
  10.             //  水平
  11.             HStack(alignment: .center, spacing: 5, content: {
  12.                 // 左侧图
  13.                 Image("1").frame(width: 80, height: 80, alignment: .center).aspectRatio(contentMode: .fit).cornerRadius(10.0)
  14.                 // 垂直
  15.                 VStack(alignment: .center, spacing: 5, content: {
  16.                     // 右侧文字
  17.                     Text("小组件1").foregroundColor(.blue)
  18.                     Text("小组件2").foregroundColor(.blue).lineLimit(2)
  19.                 })
  21.             })
  22.         })
  23.     }
  24. }

传递数据

  • 通过widgetURL 和Link
  • 在主应用添加 URL Types
  1. // View，小组件的界面
  2. struct WidgetExtensionEntryView : View {
  3.     var entry: Provider.Entry
  5.     var body: some View {
  6.         // 深度布局，屏幕深度
  7.         ZStack(alignment: .center, content: {
  8.             // 背景图
  9.             Image("2").resizable().aspectRatio(contentMode: .fit)
  10.             //  水平
  11.             HStack(alignment: .center, spacing: 5, content: {
  12.                 // 左侧图
  13.                 Image("1").frame(width: 80, height: 80, alignment: .center).aspectRatio(contentMode: .fit).cornerRadius(10.0)
  14.                 // 垂直
  15.                 VStack(alignment: .center, spacing: 5, content: {
  16.                     // 右侧文字
  17.                     Text("小组件1").foregroundColor(.blue)
  18.                     Text("小组件2").foregroundColor(.blue).lineLimit(2)
  19.                 })
  21.             })
  22.         }).widgetURL(URL(string: "widgetExtensionDemo://test1"))
  23.     }
  24. }

  • 接受数据

  • 只能用SceneDelegate来接受数据，AppDelegate不行。

  • SceneDelegate

  • SceneDelegate中相应事件

  1. - (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts{
  2.     NSLog(@"%s",__FUNCTION__);
  3.     UIOpenURLContext * context = URLContexts.allObjects.firstObject;
  4.     NSLog(@"%@", context.URL);
  5. }

适配不同尺寸小组件



  1. // View，小组件的界面
  2. struct WidgetExtensionEntryView : View {
  3.     @Environment(\.widgetFamily) var family:WidgetFamily
  4.     var entry: Provider.Entry
  6.     var body: some View {
  7.         switch family {
  8.         case .systemSmall:
  9.             // 深度布局，屏幕深度
  10.             ZStack(alignment: .center, content: {
  11.                 // 背景图
  12.                 Image("2").resizable().aspectRatio(contentMode: .fill)
  13.                 //  水平
  14.                 HStack(alignment: .center, spacing: 5, content: {
  15.                     // 左侧图
  16.                     Image("1").frame(width: 80, height: 80, alignment: .center).aspectRatio(contentMode: .fit).cornerRadius(10.0)
  17.                     // 垂直
  18.                     VStack(alignment: .center, spacing: 5, content: {
  19.                         // 右侧文字
  20.                         Text("小组件1").foregroundColor(.blue)
  21.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  22.                     })
  24.                 })
  25.             }).widgetURL(URL(string: "widgetExtensionDemo://test1"))
  26.         case .systemMedium:
  27.             // 深度布局，屏幕深度
  28.             ZStack(alignment: .center, content: {
  29.                 // 背景图
  30.                 Image("2").resizable().aspectRatio(contentMode: .fill)
  31.                 //  水平
  32.                 HStack(alignment: .top, spacing: 5, content: {
  33.                     // 左侧图
  34.                     Image("1").resizable().aspectRatio(contentMode: .fit).frame(width: 200, height: 80, alignment: .leading).cornerRadius(10.0).foregroundColor(.blue)
  35.                     // 垂直
  36.                     VStack(alignment: .trailing, spacing: 5, content: {
  37.                         // 右侧文字
  38.                         Text("zh组件1").foregroundColor(.blue)
  39.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  40.                     }).foregroundColor(.gray)
  42.                 })
  43.             }).widgetURL(URL(string: "widgetExtensionDemo://test2"))
  44.         case .systemLarge:
  45.             // 深度布局，屏幕深度
  46.             ZStack(alignment: .center, content: {
  47.                 // 背景图
  48.                 Image("2").resizable().aspectRatio(contentMode: .fill)
  49.                 //  水平
  50.                 HStack(alignment: .center, spacing: 5, content: {
  51.                     // 左侧图
  52.                     Image("1").aspectRatio(contentMode: .fit).cornerRadius(10.0).frame(width: 200, height: 100, alignment: .leading)
  53.                     // 垂直
  54.                     VStack(alignment: .center, spacing: 5, content: {
  55.                         // 右侧文字
  56.                         Text("小组件1").foregroundColor(.blue)
  57.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  58.                     })
  60.                 }).foregroundColor(.blue)
  61.             }).widgetURL(URL(string: "widgetExtensionDemo://test3"))
  63.         default:
  64.             // 深度布局，屏幕深度
  65.             ZStack(alignment: .center, content: {
  66.                 // 背景图
  67.                 Image("2").resizable().aspectRatio(contentMode: .fit)
  68.                 //  水平
  69.                 HStack(alignment: .center, spacing: 5, content: {
  70.                     // 左侧图
  71.                     Image("1").frame(width: 80, height: 80, alignment: .center).aspectRatio(contentMode: .fit).cornerRadius(10.0)
  72.                     // 垂直
  73.                     VStack(alignment: .center, spacing: 5, content: {
  74.                         // 右侧文字
  75.                         Text("小组件1").foregroundColor(.blue)
  76.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  77.                     })
  79.                 })
  80.             }).widgetURL(URL(string: "widgetExtensionDemo://test1"))
  81.         }
  83.     }
  84. }

更多小组件创建

  • 重写@main入口
  1. // 更多小组件
  2. @main
  3. struct Widgets:WidgetBundle {
  4.     init() {
  6.     }
  8.     @WidgetBundleBuilder
  9.     var body: some Widget{ // 最多创建5次，也就是15个小组件
  10.         WidgetExtension()
  11.         CustomWidget()
  12.         CustomWidget()
  13.         CustomWidget()
  14.         CustomWidget()
  15.     }
  17. }
  19. struct CustomWidget:Widget {
  20.     var kind:String="自定义组件"
  21.     var body: some WidgetConfiguration{
  22.         IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
  23.             CustomEntryView(entry:entry)
  24.         }
  25.         .configurationDisplayName("自定义更多组件")
  26.         .description("ios14自定义更多小组件")
  27.     }
  29. }
  30. // 自定义Ui
  31. struct CustomEntryView:View {
  32.     @Environment(\.widgetFamily) var family:WidgetFamily
  33.     var entry: Provider.Entry
  34.     @ViewBuilder
  35.     var body: some View {
  36.         switch family {
  37.         case .systemSmall:
  38.             // 深度布局，屏幕深度
  39.             ZStack(alignment: .center, content: {
  40.                 // 背景图
  41.                 Image("2").resizable().aspectRatio(contentMode: .fill)
  42.                 //  水平
  43.                 HStack(alignment: .center, spacing: 5, content: {
  44.                     // 左侧图
  45.                     Image("1").frame(width: 80, height: 80, alignment: .center).aspectRatio(contentMode: .fit).cornerRadius(10.0)
  46.                     // 垂直
  47.                     VStack(alignment: .center, spacing: 5, content: {
  48.                         // 右侧文字
  49.                         Text("小组件1").foregroundColor(.blue)
  50.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  51.                     })
  53.                 })
  54.             }).widgetURL(URL(string: "widgetExtensionDemo://test1"))
  55.         case .systemMedium:
  56.             // 深度布局，屏幕深度
  57.             ZStack(alignment: .center, content: {
  58.                 // 背景图
  59.                 Image("2").resizable().aspectRatio(contentMode: .fill)
  60.                 //  水平
  61.                 HStack(alignment: .top, spacing: 5, content: {
  62.                     // 左侧图
  63.                     Image("1").resizable().aspectRatio(contentMode: .fit).frame(width: 200, height: 80, alignment: .leading).cornerRadius(10.0).foregroundColor(.blue)
  64.                     // 垂直
  65.                     VStack(alignment: .trailing, spacing: 5, content: {
  66.                         // 右侧文字
  67.                         Text("zh组件1").foregroundColor(.blue)
  68.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  69.                     }).foregroundColor(.gray)
  71.                 })
  72.             }).widgetURL(URL(string: "widgetExtensionDemo://test2"))
  73.         case .systemLarge:
  74.             // 深度布局，屏幕深度
  75.             ZStack(alignment: .center, content: {
  76.                 // 背景图
  77.                 Image("2").resizable().aspectRatio(contentMode: .fill)
  78.                 //  水平
  79.                 HStack(alignment: .center, spacing: 5, content: {
  80.                     // 左侧图
  81.                     Image("1").aspectRatio(contentMode: .fit).cornerRadius(10.0).frame(width: 200, height: 100, alignment: .leading)
  82.                     // 垂直
  83.                     VStack(alignment: .center, spacing: 5, content: {
  84.                         // 右侧文字
  85.                         Text("小组件1").foregroundColor(.blue)
  86.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  87.                     })
  89.                 }).foregroundColor(.blue)
  90.             }).widgetURL(URL(string: "widgetExtensionDemo://test3"))
  92.         default:
  93.             // 深度布局，屏幕深度
  94.             ZStack(alignment: .center, content: {
  95.                 // 背景图
  96.                 Image("2").resizable().aspectRatio(contentMode: .fit)
  97.                 //  水平
  98.                 HStack(alignment: .center, spacing: 5, content: {
  99.                     // 左侧图
  100.                     Image("1").frame(width: 80, height: 80, alignment: .center).aspectRatio(contentMode: .fit).cornerRadius(10.0)
  101.                     // 垂直
  102.                     VStack(alignment: .center, spacing: 5, content: {
  103.                         // 右侧文字
  104.                         Text("小组件1").foregroundColor(.blue)
  105.                         Text("小组件2").foregroundColor(.blue).lineLimit(2)
  106.                     })
  108.                 })
  109.             }).widgetURL(URL(string: "widgetExtensionDemo://test1"))
  110.         }
  112.     }
  113. }

参考1

参考2

iOS桌面小插件 Widget Extension的更多相关文章

  1. Android桌面小插件——Widget

    Android桌面小插件--Widget 效果图 实现 1. 创建Widget类 创建一个Widget类,并实现页面创建的时候,就实现显示时间 package com.kongqw.kqwwidget ...

  2. Android-Widget桌面小组件

    1, 掌握Widget的用:Widget的用途,能够添加到手机桌面的程序 2, Widget的特点和用法步骤: 特点:快捷,方便,个性化,可自定义功能,可及时控制更新Widget显示内容 3, 用法步 ...

  3. AppWidgetProvider 桌面插件 Widget 广播 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. 【转】【iOS测试系列】常用测试小插件的使用

    背景介绍 由于iOS系统的限制,在非越狱的自动化测试中无法实现一些常用的功能,比如不同应用之间来回切换.模拟全局的点击事件等等.但是在越狱的环境下,这些限制就不存在了,我们可以利用各种小插件来实现我们 ...

  5. 闲聊select和input常用的小插件

    前言 在pc端的项目中,经常会用到表单标签,莫过于是select和input这两种,这两种相当常用.但往往原生的功能不尽人意,即使 input中type有n多属性,甚至连时间控件都有,但仍旧满足不了我 ...

  6. 【Bootstrap】优秀小插件收集

    Bootstrap中不乏很多优秀的小插件来让界面更加漂亮.比如之前做过笔记的bootstrap-fileinput,select2,datetimepicker等都是属于这一系列的.这些相对而言比较大 ...

  7. Android 桌面小部件

    1. 添加AppWidgetProvider 实际上就是个带有界面的BroadcastReceiver public class SimpleWidgetProvider extends AppWid ...

  8. Android开发中实现桌面小部件

    详细信息请参考原文:Android开发中实现桌面小部件 在Android开发中,有时候我们的App设计的功能比较多的时候,需要根据需要更简洁的为用户提供清晰已用的某些功能的时候,用桌面小部件就是一个很 ...

  9. 桌面小部件AppWidgetProvider简单分析

    1.一般桌面小部件涉及到的类 AppWidgetProvider :BroadcastRecevier子类,用于接收更新,删除通知 AppWidgetProvderInfo:AppWidget相关信息 ...

随机推荐

  1. Nginx代理常用参数

    目录 一:Nginx代理常用参数 1.添加发往后端服务器的请求头信息 二:参数案例 1.lb01配置文件 2.web01 web02 web服务器 3.测试 4.重启 5.DNS域名解析 6.网址测试 ...

  2. fio硬盘压力测试

    fio测试工具支持同步(pread/pwrite)和异步(libaio)FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, lib ...

  3. 文本图Tranformer在文本分类中的应用

    原创作者 | 苏菲 论文来源: https://aclanthology.org/2020.emnlp-main.668/ 论文题目: Text Graph Transformer for Docum ...

  4. Serverless Workflow项目

    维基百科对工作流的定义是:对工作流程及其各操作步骤之间业务规则的抽象.概括描述.我们认为工作流的主要职责是: 保证结果一致性,提高容错性要求:对错误重试,捕获,执行回滚或补偿逻辑 为长时间运行的流程维 ...

  5. 在Android中用纯Java代码布局

    感谢大佬:https://www.jianshu.com/p/7aedea560f16 在Android中用纯Java代码布局 本文的完成了参考了一篇国外的教程,在此表示感谢. Android中的界面 ...

  6. RPC原理及RPC实例分析(转)

    出处:https://my.oschina.net/hosee/blog/711632 在学校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服 ...

  7. mac不能用ip访问项目的， 还有80端口不能开启的问题

    开启80端口 参考这篇文章 解决mac无法使用80端口问题,亲测可用 1. 防火墙设置问题 2. 网卡问题 3. 服务器地址配置问题

  8. MySQL server has gone away 异常

    原因 一种可能是发送的SQL语句太长,以致超过了max_allowed_packet的大小,如果是这种原因,你只要修改my.cnf,加大max_allowed_packet的值即可. 还有一种可能是因 ...

  9. centOs编译安装php7.2支持微擎php扩展

    发现yum安装许多坑 于是只好编译安装 第一步得到镜像地址 在      https://www.php.net/downloads.php     有的地址比较慢,需要耐心等待 cd /usr/lo ...

  10. KVC替换系统的tabbar为自定义tabbar---秀清

    CustomTabbar *tabbar = [[CustomTabbar alloc]init]; //KVC,更换系统的tabbar为自定义tabbar tabbar.tabbarDelegate ...