iOS 14 Widget(小组件)的开发

iOS 14  Widget(小组件)的开发

所谓Widget,就是我们熟知的小组件,这是独立于应用之外的又一个新小应用,但是和主应用之间又有着一定的关系。

例如,如下图所示,就是小组件。

现在很多应用都有小部件功能,用起来非常方便,在用户安装包含Today小部件的应用后,他们可以将小部件添加到Today视图。当用户在“今日”视图中选择“编辑”时,通知中心会显示一个视图,允许用户添加,重新排序和删除小部件。

常见的有支付宝、日历和天气,那么我们也想为自己的应用增加widget功能该怎么办呢?

官方对小部件的一段介绍是:

App extensions in the Today view are called widgets. Widgets give users quick access to information that’s important right now. For example, users open the Today view to check current stock prices or weather conditions, see today’s schedule, or perform a quick task such as marking an item as done. Users tend to open the Today view frequently, and they expect the information they’re interested in to be instantly available.                                                                               “今日”视图中的附加应用信息称为小部件,小部件使用户能够快速访问现在非常重要的信息。例如,用户打开今日视图以检查当前股价或天气状况,查看今天的时间表,或者执行快速任务,例如将项目标记为已完成。用户倾向于经常打开“今日”视图,他们希望他们感兴趣的信息立即可用。

1.首先因为Widget是一个独立的小应用,因此证书也需要另外的一套,也就是说如果你要开发带有这样功能的APP,你需要两套证书,一套是主项目的,另外一套是widget的,至于证书的创建,在这里我就不多说了,具体流程大家可以网上去找.

主项目证书的创建流程和普通的创建流程一样,widget的证书创建流程和主项目的创建流程有一点区别

首先:

注意一:

Bundle ID:widget的Bundle Id是在主项目的Bundle ID的基础上加的,例:

主项目:

widget:

注意二:widget的App ID创建的时候要配置 App Groups项,例:

主项目

widget:


至于怎么配置,其实很简单,大家在创建APP ID的时候,在下面第一项勾选App Groups


创建APP ID之后,需要去创建一个App Groups

然后把创建后的App Groups配置到对应的APP ID里面即可,这样证书就可以使用了

2.接下来,就是创建一个项目或者是在你想要添加widget的项目里面找到

创建项目:创建一个新的Xcode项目,创建好之后在:创建

Xcode->File->New->Target->Today Extension创建我们的Widget

项目结构:

项目配置

项目默认是有storyboard的,这里我想使用纯代码,所以把他删除了,删除后我们要配置一下启动界面,在TodayWidget->Info.plist->Extension

删除NSExtensionMainStoryboard选项

增加NSExtensionPrincipalClass,value 为 类的名字 TodayViewController

这个时候你就可以用纯代码构建布局了

这个小组件都有一个展开和折叠的效果,那么怎么实现的呢,看下面:

刷新数据:

点击小组件跳转到主app,

因为extension和 主app 是两个完全独.立的进程,所以它们之间不不能直接通信(不能像应用内部点击按钮,跳转到指定页面)。为了了实现 Widget 调起 app,这里通过 openURL 的方式来启动 主app。

添加URL Schemes

在主app里配置 Targets->MCWidgetDemo-> Info->Url Types->+

如下图设置URL Schemes为 TodayWidget

我们先来做一个展示,显示出来看看效果:

主应用中的监听:

好,直接运行看效果:

到这里小组件的开发就完成了,具体上面展示什么,跟平时的开发一样布局显示就好了。widget可以看做是一个附加在应用上的一个小应用,可以进行网络请求的

接下来主要看看小组件是怎么和主应用数据共享的,

扩展程序一般都不是脱离宿主程序单独运行的,难免需要和宿主程序进行数据交互。由于拓展与宿主应用是两个完全独立的App,并且iOS应用基于沙盒的形式限制,所以一般的共享数据方法都是实现不了数据共享,这里就需要使用App Groups(App Groups这是iOS8新开放的功能,在OS X上早就可用了。它主要用于同一Group下的App共享同一份读写空间,以实现数据共享)。

通过App Groups提供的同一 group 内 app 共同读写区域,可以用 NSUserDefaults 和NSFileManager 两种方式实现 extension 和 主app 之间的数据共享。

创建App Groups

在开发者网站注册一个App Groups,点击加号,填入名字和id一路确认即可得到下图App Groups。

在主程序和扩展程序中分别设置打开App Group,设置一个group的名称,这里要保证宿主APP和扩展APP的groupName要是相同的。并且与在开发者网站注册的App Groups保持一致

到这里设置部分就好了,继续:

利用NSUserDefaults数据共享

在主应用中存储数据:

在widget中读取数据:

注意:保存读取数据的时候必须指明group id;

利用NSFileManager共享数据

在主应用中存储数据:

主应用

在widget中读取数据:

到这里小组件就可以获取得到主应用里面的数据了。我们看看效果:

效果

注意:在第一次运行应用之后,可能会显示空值,这是因为没有运行主应用,导致没有数据保存,所以在小组件里面直接运行显示的话,会显示空值。这个时候,点击打开主应用,在左滑倒小组件界面,就会看到在主应用保存的值显示出来了。

最后,小组件,也是可以进行网络数据申请的,可以跟网易云,今日头条等小组件一样,在滑到小组件界面的时候,可以看见小组件上面的内容会进行刷新,所以,根据自己的项目需求,也可以把网络申请数据刷新等加进去!!!

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

推荐阅读更多精彩内容