【8】iOS开发·Widget

一、什么是Widget组件?

widget是一个依附于App的小组件，可以视作一个独立的小App，但又与主App关联，在很多情况下可方便人们使用。例：天气、支付宝、今日头条等的小组件。

二、Widget的创建

1、相关证书配置

① App的证书配置：和普通证书配置一样，可参考iOS开发·证书配置

② Widget的证书配置：

1、创建App Group，信息填写完毕后一路continue下去；

创建AppGroup.png 填写AppGroup的信息.png

注意：AppGroup的ID需要以group开头
示例：group.xxx.xxx.xxx
2、App的App IDs开启App Group权限，并编辑绑定；

App开启AppGroup权限1.png App开启AppGroup权限2.png App开启AppGroup权限3.png

3、创建Widget的App IDs，并且绑定同一个App Group；
注意点：
① Widget的Bundle ID需要在App的Bundle ID的基础上添加；

例：App的Bundle ID是com.FanXG.Basic；
Widget的Bundle ID是com.FanXG.Basic.xxx；

② 在创建Widget的App IDs时候，勾选App Group，当然也可以创建后再勾选；

Widget创建AppIDs.png

③ 创建完成后，和App的App IDs开启App Group权限步骤一样，绑定App Group；

4、分别创建APP、Widget的证书配置文件

创建配置文件.png

5、下载开发证书、发布证书、配置证书等，在此不加说明；

========================证书配置完成========================

2、创建widget工程

widget是一个依附于app的小组件，若想创建某个项目的widget，需新建Target

创建Target.png 创建Target2.png

创建完毕之后，多出MyTarget目录

Target文件目录.png

配置项目证书

配置App项目证书.png 配置Widget项目证书.png

分别开启项目App Group权限，Widget的权限开启也是一样；
点击MyTarget->Capabilities->App Groups

项目开启AppGroup权限.png

3、修改布局方式

widget默认为xib布局，需要代码布局，则需要进行以下修改：
① 删除MainInterface.storyboard文件
② 修改widget的info.plist文件
· 删除NSExtensionMainStoryboard字段
· 添加NSExtensionPrincipalClass字段，value是你所写的controller的名称，默认TodayViewController

修改info文件.png

注意：
widget虽然和项目是一个整体的工程，但是文件和图片是不互通的，若有一张图片在app路径下面，你在widget使用是读取不到的。所以如果有什么布局想复用，需要在widget的文件下也复制一份。

4、小部件的布局

在TodayViewController中，通用的组件都可以使用，但是tableview等一系列滚动视图是无法滚动的，所以使用tableview布局要注意高度，是不能滚动的。

iOS10之后，Widget支持展开及折叠两种展现方式，通过设置widgetLargestAvailableDisplayMode属性可以让Widget程序实现展开布局。
在左滑到widget显示的时候，会调用viewWillAppear，这时候可以去刷新获取最新数据。

展开、缩回代码示例：

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.extensionContext.widgetLargestAvailableDisplayMode = NCWidgetDisplayModeExpanded;
}

- (void)widgetActiveDisplayModeDidChange:(NCWidgetDisplayMode)activeDisplayMode withMaximumSize:(CGSize)maxSize {
    if (activeDisplayMode == 0) {
        self.preferredContentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 105);
    }else {
        self.preferredContentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 220);
    }
}

三、App和Widget的传值

1、Widget跳转到App

① 配置跳转的URL

配置跳转的URL.png

② 代码示例

TodayViewController.m文件

- (void)createButton {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(10, 10, 160, 50)];
    [button setTitle:@"测试示例" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(clickButtonAction) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)clickButtonAction {
    NSString *urlString = [NSString stringWithFormat:@"WidgetMain://"];
    NSURL *url = [NSURL URLWithString:urlString];
    [self.extensionContext openURL:url completionHandler:^(BOOL success) {
        
    }];
}

AppDelegate.m文件

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    if ([url.description hasPrefix:@"WidgetMain"]) {
        //处理widget的传值
    }
    return YES;
}

2、NSUserDefault传值（不推荐）

NSUserDefaults写入代码：

NSUserDefaults *userDefaults = [[NSUserDefaults alloc] initWithSuiteName:@"group.com.FanXG.Basic"];
[userDefaults setObject:@"测试举例" forKey:@"widget"];
[userDefaults synchronize];

NSUserDefaults读取代码：

NSUserDefaults *userDefaults = [[NSUserDefaults alloc] initWithSuiteName:@"group.com.FanXG.Basic"];
NSString *contentStr = [userDefaults objectForKey:@"widget"];
NSLog(@"contentStr == %@",contentStr);

注意：
利用NSUserDefaults传值在iOS10之后可能会报错，报错内容：

Couldn't read values in CFPrefsPlistSource<0x2815c6d80> (Domain: group.com.FanXG.Basic, User: kCFPreferencesAnyUser, ByHost: Yes, Container: (null), Contents Need Refresh: Yes): Using kCFPreferencesAnyUser with a container is only allowed for System Containers, detaching from cfprefsd

这是因为沙盒机制，拓展应用不允许访问宿主应用的沙盒路径，因此上述用法失效，所以我们需要配合appGroup完成实例化UserDefaults；

3、NSFileManager传值（推荐）

App写入示例代码：

- (void)updateWidgetData {
    //获取到共享数据的文件地址
    NSURL *containerURL = [[NSFileManager defaultManager] containerURLForSecurityApplicationGroupIdentifier:@"group.com.FanXG.Basic"];
    NSURL *birthdayContainerURL = [containerURL URLByAppendingPathComponent:@"Library/Caches/birthday.json"];
    //将需要存储的数据写入到该文件中
    NSString *jsonString = @"需要写入的数据或者json字符等";
    //写入数据
    NSError *err = nil;
    BOOL result = [jsonString writeToURL:birthdayContainerURL atomically:YES encoding:NSUTF8StringEncoding error:&err];
    if (!result) {
        NSLog(@"%@",err);
    }else {
        NSLog(@"save value:%@ success.",jsonString);
    }
}

Widget读取数据示例代码：

- (NSString *)readDataByNSFileManager {
    NSError *err = nil;
    NSURL *containerURL = [[NSFileManager defaultManager] containerURLForSecurityApplicationGroupIdentifier:@"group.com.FanXG.Basic"];
    containerURL = [containerURL URLByAppendingPathComponent:@"Library/Caches/birthday.json"];
    NSString *value = [NSString stringWithContentsOfURL:containerURL encoding: NSUTF8StringEncoding error:&err];
    return value;
}

四、注意事项

1. 主App和widget分别独立，因此需要两套证书，再通过App Group相互绑定；
2. widget的Bundle ID需要再App的Bundle ID的基础上添加；

举例：
The App Bundle ID is ---- com.FanXG.Basic
The widget Bundle ID is ---- com.FanXG.Basic.OurTarget

3. 建议将widget的版本号和构建版本号设置的和App一致，不然提交到App Store的时候会出现警告，虽然不影响提交审核和正常使用，但还是设置成一样的吧！