从0到1思考与实现iOS-Widget

朴灿烈づ我的快乐病毒、 2022-06-16 13:39 191阅读 0赞

讲述之前首先看下demo效果图：

![strip][]

基本的展开收起、本App本体交互

![strip 1][]

然后再展示几个效果不错的 Widget app

![strip 2][]

毒物 && Keep

![1240][]

ESPN

![1240 1][]

PCalc

![1240 2][]

Musixmatch

![1240 3][]

Fantastical 2

![1240 4][]

**一、Widget总览**

Widget 是 iOS8 推出第一版，在iOS 10 进行大幅度的优化

Widget可以让用户更快地访问到其感兴趣的内容，官方的说法是用来呈现功能比较简单的，交互性不强的东西，在不打扰或者中断用户使用当前应用的前提下完成自己的功能点.对于这个说法，国内的开发者表示呵呵，因为几乎所有的 Widget都绑定了对应的点击事件

**二、Widget代码实现**

因为 Widget 属于单独的进程，因此需要再新建一个target：File -> New ->target

![1240 5][]

初次构建 UI 时，运行 Widget 后会发现，Widget左侧距离屏幕左侧始终有一段距离，导致效果不佳，可以通过下面的代理方法消除间距

// 取消widget默认的inset，让应用靠左

\- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets \{

return UIEdgeInsetsZero;

Widget 的收起、展开 则是通过这个代理方法：

/\*\*

activeDisplayMode有以下两种

NCWidgetDisplayModeCompact, // 收起模式

NCWidgetDisplayModeExpanded, // 展开模式

\*/

\- (void)widgetActiveDisplayModeDidChange:(NCWidgetDisplayMode)activeDisplayMode withMaximumSize:(CGSize)maxSize \{

if(activeDisplayMode == NCWidgetDisplayModeCompact) \{

// 尺寸只设置高度即可，因为宽度是固定的，设置了也不会有效果

self.preferredContentSize = CGSizeMake(0, 110);

\} else \{

self.preferredContentSize = CGSizeMake(0, 310);

在设置 UI 的过程中，若想使用本体 Target 中的类：

![1240 6][]

在对应类的 Target Membership 勾选 Widget 即可

如果想使用Pod 管理的第三方库，那么只需要以下三步就可以愉快地玩耍了（比如我想使用 Masonry 布局）

1、 在podfile文件中

![1240 7][]

2、 按照如图所示配置configurations

![1240 8][]

3、 最后分别配置两个 Target 的 link Binanry

![1240 9][]

当然有些第三方包含 source 文件的可能还需要别的操作，最简单粗暴的方式就是-->拖进去！

使用图片也是必不可少，然而 imageNamed: 和 imageWithContentsOfFile: 两种方式加载都不行，即使设置了文件的 target 为 Widget Extension，后来在其target 内部建立一个 .xcassets 文件即可加载图片

![1240 10][]

然而在 Widget Extension 里面新建类又出现了如下报错

![1240 11][]

造成这个的原因是新建的时候默认是 C header，而且没有指向对应的target，按照下图所示修改一下type，选一下target，再次编译就木有问题了

![1240 12][]

如果需要网络请求，记住在 Extension 的plist文件中添加App Transport Security Settings 属性

在开发过程中，那么怎么一直有个“Hello World”显示，最后看了一下原来是 Storyboard 加载，去 Storyboard 文件删除对应 label 即可

**如果你的项目中要求纯代码**

删除 Storyboard 文件和plist 对应键值对

添加 NSExtensionPrincipalClass 字段并设置为 TodayViewController

![1240 13][]

**三、与 App 本体交互**

与本体 app 进行交互之前，要明白的一个概念是：Widget 与 app 本身 是两个target，appId 也是独立的，因此 Widget 与本体 app 是通过 app group 进行交互

**1、设置群组关系**

在 本体 App 的 target > Capabilities添加 container 标识符

![1240 14][]

这个写好之后，再去扩展的target做相同的操作，标识符一定要一样！！

![1240 15][]

切换 target 的方法在这里

报错信息：\[\_NCWidgetExtensionContext openURL:completionHandler:\]\_block\_invoke failed: Error Domain=NSOSStatusErrorDomain Code=-50 "(null) 如果报这个错说明 urlScheme有问题，没有标准对应，比如下划线识别等

**2、设置 scheme 进行交互**

设置 app 的 scheme 标识符

![1240 16][]

在plist 文件内添加以下键值对

然后！就可以在 Widget 对应的点击事件里面

// 扫一扫按钮的点击事件

\- (void)scanBtnTapped:(UIButton \*)sender \{

\[self.extensionContext openURL:\[NSURL URLWithString:@"wpfWidgetTest://action=richScan"\] completionHandler:^(BOOL success) \{

NSLog(@"scanBtnTappedopen url result:%d",success);

\}\];

在 app 本体的 AppDelegate 方法里面

// 处理 Widget 相关事件

\- (BOOL)application:(UIApplication \*)application openURL:(NSURL \*)url sourceApplication:(NSString \*)sourceApplication annotation:(id)annotation \{

NSString\* prefix = @"wpfWidgetTest://action=";

NSString \*urlString = \[url absoluteString\];

if (\[urlString rangeOfString:prefix\].location != NSNotFound) \{

NSString \*action = \[urlString substringFromIndex:prefix.length\];

if (\[action isEqualToString:@"richScan"\]) \{

// 进入到扫一扫页面

\[self.rootVC transferToRichScanVC\];

\} else if (\[action isEqualToString:@"web"\]) \{

// 进入到 web 活动页

\[self.rootVC transferToWebVCWithUrlString:@"webTest"\];

\}\}

return  YES;

数据共享:widget项目必然经常要和主项目共享数据，可以通过NSUserDefault，注意和平时用有些不同，创建UserDefault的时候，要指定groupid。上代码：

// widget项目里取数据

\+ (NSString\*)widgetStringForKey:(NSString\*)defaultName \{

NSUserDefaults\*shared = \[\[NSUserDefaultsalloc\] initWithSuiteName:@"group.com.widgetTest"\];

return\[shared stringForKey:defaultName\];

// 主项目里存数据

\+ (void)widgetSetObject:(id)value forKey:(NSString\*)defaultName \{

NSUserDefaults\*shared = \[\[NSUserDefaultsalloc\] initWithSuiteName:@"group.com.widgetTest"\];

\[shared setObject:value forKey:defaultName\];

\[shared synchronize\];

\#warning 涉及到大量数据交互也可以使用 NSFileManager 进行数据共享

在demo中，实现了从Widget入口 点击未读消息后，下次不再展示该未读消息项

![strip 3][]

**四、关于刷新时机**

Widget 自身的更新机制，是进入到 Widget 页面后（iOS 10 左滑，之前是下拉），先执行 viewDidLoad 方法，然后是 viewWillAppear 方法，但是经测验，Widget 页面在屏幕消失超过两秒后（手机没有停留在 Widget 页面 或者 停留在别的app 的Widget页面，自己的没显示）

由于以上特性，更新代码最好写在 viewWillAppear 方法里面，对于更新时效性特别强的，比如天气类 app，这种最好就是 在该方法里面添加一个 NSTimer 定时进行刷新，在 viewWillDisAppear 方法中 进行 取消NSTimer invalidate定时更新即可

知乎、得到 app的 Widget，只要走 viewDidLoad 方法就会闪一下（如下图），因为每次Widget加载请求的数据后会进行替换造成的。这里可以做个缓存优化，判断如果请求来的数据和当前数据内容一致，那么就不进行刷新列表操作

不信你看

![strip 4][]

**五、关于 iOS 8 适配**

iOS8、9是老式的下拉刷新，并没有折叠和展开功能，默认的Widget高度为self.preferredContentSize设置的高度

iOS8 默认的背景是黑色磨砂效果，iOS10默认的背景色是白色磨砂效果。因此在控件颜色上做下适配

![1240 17][]

iOS8效果图

iOS8下所有组件默认右移30pt

**六、其他注意点**

1.当程序内存不足时，苹果优先会杀死扩展，因此需要注意内存的管理。

2.在配置team是账号需要一致（免费账号不行，需要付费的账号），上传包的时候一定注意选择 Product -> Archive -> 选择 distribution 模式！

3.**3D touch 对应的也有Widget！**？答案是 YES！，只要设置了3D touch，Widget的第一栏就会自动显示

![strip 5][]

下载demo [https://github.com/13662049573/WidgetTest-Widget-][https_github.com_13662049573_WidgetTest-Widget-]

[官网说明][Link 1]

[一直很心仪的app --> Things 关于widget的介绍][app --_ Things _widget]

[几个精致的 Widget app][Widget app]

[在模拟器上进行3D touch 测试][Widget app]

[strip]: /images/20220616/3688f30ec48048129c3e316106a1d34e.png
[strip 1]: /images/20220616/6495afd361ed4e2d9efad7cb519133d4.png
[strip 2]: /images/20220616/2ade707f525648a1a4417a2021cf7ff9.png
[1240]: /images/20220616/34f3ddcdc57c4b9192f7773e572539ea.png
[1240 1]: /images/20220616/30816c2940394f92a6167e00d64b7f58.png
[1240 2]: /images/20220616/b6b0f19f03f0472282047ea6e721b784.png
[1240 3]: /images/20220616/a208a7c80bf14a338fecd9d22b1c6314.png
[1240 4]: /images/20220616/6aa205401cd14458b2b7c622cff370e1.png
[1240 5]: /images/20220616/63d7b1ea16eb4e498ac6ed70fa505477.png
[1240 6]: /images/20220616/c44656ed9a86465b8e4684a657d6a73f.png
[1240 7]: /images/20220616/34c5c1f2e6854c549da48fb5bd4eb04f.png
[1240 8]: /images/20220616/d543c92a5c1d4e53aae1e0302814f826.png
[1240 9]: /images/20220616/c23912fae54146c2843dd0eda48bf9e5.png
[1240 10]: /images/20220616/d10db7f08fa5459c9c4e62f96a2a4be7.png
[1240 11]: /images/20220616/e25d3b7483814b2893934e150ffbad18.png
[1240 12]: /images/20220616/0c67625ad3974fb9b07569318d61f87b.png
[1240 13]: /images/20220616/4168f57166c34ef3bbbd203bf7e1656e.png
[1240 14]: /images/20220616/4aeaa18b166d493eb7e2accf8200fd18.png
[1240 15]: /images/20220616/8c01dce2e45640a38655b0e27a2f69a4.png
[1240 16]: /images/20220616/fd21b97de92949e2b576dc719c4e2643.png
[strip 3]: /images/20220616/aa261be4ea35410ab49e60ff13d256a9.png
[strip 4]: /images/20220616/e94490b2b6d14286954f40ad1d8fed6b.png
[1240 17]: /images/20220616/a998329858b6476aa1cecd575684604d.png
[strip 5]: /images/20220616/6f321d3d7b134cbeb17c0614b36b7105.png
[https_github.com_13662049573_WidgetTest-Widget-]: https://github.com/13662049573/WidgetTest-Widget-
[Link 1]: https://developer.apple.com/library/content/documentation/General/Conceptual/ExtensibilityPG/Today.html
[app --_ Things _widget]: https://culturedcode.com/things/blog/2015/01/today-widget-for-ios/
[Widget app]: http://fieldguide.gizmodo.com/12-essential-ios-widgets-for-a-more-functional-notifica-1694725571