天天看点

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

iOS extension 的出现,方便了用户查看应用的服务,比如用户可以在 Today 的 widgets 中查看应用的简略信息,然后点击进入相关的应用界面。

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget
iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

添加 Widget 流程

1、添加 Today Extension

2、绘制 UI

3、调起 app

4 、数据共享

在 Xcode菜单 => File => New => Target.. => 中选择 Today Extension

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget
iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget
iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

创建 Today Extension 时会默认创建 MainInterface.storyboard,可以在里面绘制显示的 Widget 内容,也可以使用代码绘制 UI。

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

设置 Widget 展示视图的大小。关于 Widget 的背景色,以及具体展示的内容大家按需绘制。

在 iOS8 - iOS9 中运行程序后,会发现一个问题:绘制的内容与左侧边界有一定距离(约 30px)。如何解决这个问题呢,NCWidgetProviding 协议给出了解决方案。iOS10 中不存在这个问题。

  

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

在 containing app 中设置 URL Schemes

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

在 extension 的 ViewController 中添加如下代码。

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

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget
iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

1) 通过 NSUserDefaults 共享数据

保存数据

读取数据

2) 通过 NSFileManager 共享数据

1、Widget 中展开、折叠

iOS10 在 NSExtensionContext 中,新添了 widgetLargestAvailableDisplayMode 属性,来确认当前 Widget 是展开还是折叠状态。所以,先在 viewWillAppear 中设置 Widget 的 mode 为展开。

然后,就是展开和折叠的处理了。在 NCWidgetProviding 协议中,新添了这个方法 widgetActiveDisplayModeDidChange。

2、启动 app 后,第一次显示的是折叠,而不是展开 ?

这个问题,归咎于 preferredContentSize 的设置,确认 Widget 的 mode 之前,不要设置这个值。在 widgetActiveDisplayModeDidChange 中设置展开或折叠状态下 Widget 的高度,iOS10 环境下在这里设置高度也就足够了。

3、为什么有时展开或折叠 "失灵" 了,没有对应的展开或折叠呢 ?

这个问题的前提,肯定是你展开、折叠对应的 Widget 高度不一样,只是看到了右上角按钮内容改变,但高度却没有变。

这个问题的原因在于,点击展开、折叠按钮修改了 Widget 的 mode 之后,却没有设置对应的高度 preferredContentSize。怎么办呢?mode 改变后,设置对应状态下的高度即可。

真机调试 Widget,牵扯到配置 group。首先我们的宿主 app id 为 com.qianqianstudio.TodayWidget, Today widget 插件的 bundle id 为 com.qianqianstudio.TodayWidget.Widget 这里我们需要注意,widget 的 bundle id 必须以宿主 bundle id 作为前缀。然后它俩之间建立的 group id 为 group.qianqianstudio.freeInHouse(可以取任意名)。

<a href="https://developer.apple.com">开发者证书配置</a>

Identifiers =&gt; App Groups 里添加一个 app group id 为:group.qianqianstudio.freeInHouse

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

创建 app id。创建的时候选择 Explict App ID,App Services 里面勾选上 App Groups

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

主 app

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

widget

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

配置 provisioning profile(这里不再赘述 certificate 的生成步骤,添加 device 等),此时因为选择了勾选了 App Groups 这个 service 的 app id,所以可以看到 enabled services 那里有此项。

iOS - Widget 小部件1、Widget2、添加 Widget3、设置 Widget4、真机调试 Widget

继续阅读