iOS - Widget 小部件

2016-08-14 1389

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1、WidgetiOS extension 的出现，方便了用户查看应用的服务，比如用户可以在 Today 的 widgets 中查看应用的简略信息，然后点击进入相关的应用界面。2、添加 Widget添加 Widget 流程1、添加 Today Extension2、绘制 UI3、调起 app4 、数据共享2.

1、Widget

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

2、添加 Widget

添加 Widget 流程
- 1、添加 Today Extension
- 2、绘制 UI
- 3、调起 app
- 4 、数据共享

2.1 添加 Today Extension

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

2.2 绘制 UI

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

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

    - (void)viewDidLoad {
        [super viewDidLoad];

        // 设置 Widget 展示视图的大小
        self.preferredContentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 100);

        self.view.backgroundColor = [UIColor yellowColor];
    }

在 iOS8 - iOS9 中运行程序后，会发现一个问题：绘制的内容与左侧边界有一定距离(约 30px)。如何解决这个问题呢，NCWidgetProviding 协议给出了解决方案。iOS10 中不存在这个问题。
```
    // 实现 NCWidgetProviding 协议方法
    - (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets {
        return UIEdgeInsetsMake(0, 0, 0, 0);
    }
```

2.3 调起 app

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

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

    // 通过 extensionContext 借助 host app 调起 app

    // TodayWidget 为在 containing app 中设置的 URL Schemes
    [self.extensionContext openURL:[NSURL URLWithString:@"TodayWidget://"] completionHandler:^(BOOL success) {

        NSLog(@"open url result:%d", success);
    }];

2.4 数据共享

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

1) 通过 NSUserDefaults 共享数据

保存数据

    - (void)saveDataByNSUserDefaults {

        NSUserDefaults *shared = [[NSUserDefaults alloc] initWithSuiteName:@"group.qianqianstudio.freeInHouse"];
        [shared setObject:@"asdfasdf" forKey:@"widget"]; 
        [shared synchronize];
    }

读取数据

    - (NSString *)readDataFromNSUserDefaults { 

        NSUserDefaults *shared = [[NSUserDefaults alloc] initWithSuiteName:@"group.qianqianstudio.freeInHouse"]; 
        NSString *value = [shared valueForKey:@"widget"]; 
        return value;
    }

2) 通过 NSFileManager 共享数据

保存数据

    - (BOOL)saveDataByNSFileManager {

        NSError * error = nil;

        NSURL *containerURL = [[NSFileManager defaultManager] containerURLForSecurityApplicationGroupIdentifier:@"group.qianqianstudio.freeInHouse"]; 
        containerURL = [containerURL URLByAppendingPathComponent:@"Library/Caches/widget"]; 
        NSString *value = @"asdfasdfasf"; 
        BOOL result = [value writeToURL:containerURL atomically:YES encoding:NSUTF8StringEncoding error:&error];

        if (!result) { 
            NSLog(@"%@", error); 
        } else { 
            NSLog(@"save value:%@ success.", value); 
        } 

        return result;
    }

读取数据

    - (NSString *)readDataByNSFileManager {

        NSError *error = nil;

        NSURL *containerURL = [[NSFileManager defaultManager] containerURLForSecurityApplicationGroupIdentifier:@"group.qianqianstudio.freeInHouse"];
        containerURL = [containerURL URLByAppendingPathComponent:@"Library/Caches/widget"];
        NSString *value = [NSString stringWithContentsOfURL:containerURL encoding:NSUTF8StringEncoding error:& error];

        return value;
    }

3、设置 Widget

1、Widget 中展开、折叠

iOS10 在 NSExtensionContext 中，新添了 widgetLargestAvailableDisplayMode 属性，来确认当前 Widget 是展开还是折叠状态。所以，先在 viewWillAppear 中设置 Widget 的 mode 为展开。
```
    - (void)viewWillAppear:(BOOL)animated {
        [super viewWillAppear:animated];

        self.extensionContext.widgetLargestAvailableDisplayMode = NCWidgetDisplayModeExpanded;
    }
```

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

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

        if (activeDisplayMode == NCWidgetDisplayModeCompact) {
            self.preferredContentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 110);
        } else {
            self.preferredContentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 300);
        }
    }

2、启动 app 后，第一次显示的是折叠，而不是展开 ?
- 这个问题，归咎于 preferredContentSize 的设置，确认 Widget 的 mode 之前，不要设置这个值。在 widgetActiveDisplayModeDidChange 中设置展开或折叠状态下 Widget 的高度，iOS10 环境下在这里设置高度也就足够了。
3、为什么有时展开或折叠 "失灵" 了，没有对应的展开或折叠呢？
- 这个问题的前提，肯定是你展开、折叠对应的 Widget 高度不一样，只是看到了右上角按钮内容改变，但高度却没有变。
- 这个问题的原因在于，点击展开、折叠按钮修改了 Widget 的 mode 之后，却没有设置对应的高度 preferredContentSize。怎么办呢？mode 改变后，设置对应状态下的高度即可。

4、真机调试 Widget

真机调试 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（可以取任意名）。
开发者证书配置
- Identifiers => App Groups 里添加一个 app group id 为：group.qianqianstudio.freeInHouse
- 创建 app id。创建的时候选择 Explict App ID，App Services 里面勾选上 App Groups
- 主 app
- widget
- 配置 provisioning profile（这里不再赘述 certificate 的生成步骤，添加 device 等），此时因为选择了勾选了 App Groups 这个 service 的 app id，所以可以看到 enabled services 那里有此项。