iOS10通知(七)--Notification Content Extension

上一篇介绍了如何用Notification Service Extension来实现修改收到的消息内容，这一篇介绍使用Notification Content Extension来实现自定义的通知界面。

工程中用到了SDWebImage

1、首先在工程中新增一个通知的内容拓展

2、这个 extension 中有一个必须实现的方法 didReceiveNotification()，在系统需要显示自定义样式的通知详情视图时，这个方法将被调用，而我们只需要在其中配置自己想要的UI界面，而 UI 本身可以通过这个 extension 中的 MainInterface.storyboard 来进行定义。

修改内容拓展target中的MAinInterface.storyboard如下，iamgeView用来显示图片、textview用来显示标题，label用来显示内容，布局可自行定义

3、实现自定义UI的关键代码段

//收到远程消息
- (void)didReceiveNotification:(UNNotification *)notification {
    
    UNNotificationContent *content = notification.request.content;
    //获取通知中发过来的需要展示的内容
    NSMutableArray *imageArr = [[NSMutableArray alloc]initWithArray:[content.userInfo objectForKey:@"items"]];
    
    self.itemArr = [[NSMutableArray alloc]init];
    
    for (int i = 0; i < imageArr.count; i++) {
        //创建数据模型，包含url、title、text三个属性
        NotificationItem *item = [[NotificationItem alloc]init];
        if (i > content.attachments.count - 1) {
            continue;
        }
        
        item.title = [[imageArr objectAtIndex:i] objectForKey:@"title"];
        item.text = [[imageArr objectAtIndex:i] objectForKey:@"text"];
        item.url = [[NSURL alloc] initWithString:[[imageArr objectAtIndex:i] objectForKey:@"imageUrl"]];
        [self.itemArr addObject:item];
    }
    [self uploadUI:0];
}

//更新界面
-(void)uploadUI:(NSInteger)index
{
    NotificationItem *item = [self.itemArr objectAtIndex:index];
    
    //用sd_webimage来获取远程图片
    [self.imageView sd_setImageWithURL:item.url placeholderImage:[UIImage imageNamed:@"11"]];
    self.label.text = item.title;
    self.textView.text = item.text;
    
    self.index = index;
}

//交互事件的获取
-(void)didReceiveNotificationResponse:(UNNotificationResponse *)response completionHandler:(void (^)(UNNotificationContentExtensionResponseOption))completion
{
    //用户点击了切换
    if ([response.actionIdentifier isEqualToString:@"switch"]) {
        if (0 == self.index) {
            self.index = 1;
        }
        else
        {
            self.index = 0;
        }
        [self uploadUI:self.index];
        completion(UNNotificationContentExtensionResponseOptionDoNotDismiss);
    }
    else if ([response.actionIdentifier isEqualToString:@"open"])
    {
        completion(UNNotificationContentExtensionResponseOptionDismissAndForwardAction);
    }
    else if ([response.actionIdentifier isEqualToString:@"cancle"])
    {
        completion(UNNotificationContentExtensionResponseOptionDismiss);
    }
    else
    {
        completion(UNNotificationContentExtensionResponseOptionDismissAndForwardAction);
    }
}

需要实现代理UNNotificationContentExtension

#import <UserNotificationsUI/UserNotificationsUI.h>
#import "NotificationItem.h"


@interface NotificationViewController () <UNNotificationContentExtension>

@property IBOutlet UILabel *label;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UITextView *textView;
@property (nonatomic,assign) NSInteger index;
@property (nonatomic,strong) NSMutableArray *itemArr;

@end

4、自定义 UI 的通知是和通知 category 绑定的，我们需要在 extension 的 Info.plist 里指定这个通知样式所对应的 category 标识符，这样这个拓展才会起作用

UNNotificationExtensionCategory：表示需要绑定的category，这个可以修改为数组，这样就可以为这个content绑定多个通知

UNNotificationExtensionInitialContentSizeRatio：默认的UI界面的高宽比，修改这个值为UI界面的款高比，这样在界面出来的时候不会有很突兀的frame改变

UNNotificationExtensionDefaultContentHidden：是否显示系统默认的标题栏和内容，可选参数

UNNotificationExtensionOverridesDefaultTitle：是否让系统采用消息的标题作为通知的标题，可选参数

具体的参数说明可以参考下面这个文档

https://developer.apple.com/reference/usernotificationsui/unnotificationcontentextension

5、发送一个本地的自定义UI的通知

-(void)btnClicked
{
    UNMutableNotificationContent *content = [[UNMutableNotificationContent alloc]init];
    content.title = @"多媒体通知";
    content.body = @"显示多张图片";
    
    content.userInfo = @{@"items":@[@{@"title":@"奥迪1",@"text":@"奥迪R8",@"imageUrl":@"http://172.20.90.117/www2/img/r8.jpg"},
                                    @{@"title":@"奥迪2",@"text":@"奥迪超跑",@"imageUrl":@"http://172.20.90.117/www2/img/r8-1.jpg"}]};
    
    content.categoryIdentifier = @"customUI";
    
    UNTimeIntervalNotificationTrigger *trigger = [UNTimeIntervalNotificationTrigger triggerWithTimeInterval:5 repeats:NO];
    NSString *indentifier = @"customUI";
    UNNotificationRequest *request = [UNNotificationRequest requestWithIdentifier:indentifier content:content trigger:trigger];
    [[UNUserNotificationCenter currentNotificationCenter] addNotificationRequest:request withCompletionHandler:^(NSError * _Nullable error) {
        //
    }];
}

6、远程通知的payload内容如下

{
  "aps":{
    "alert":{
      "title":"多媒体通知",
      "body":"显示多张图片"
    },
    "category":"customUI"
  },
 "items": [
        {
            "title": "奥迪1",
            "text": "奥迪R8",
            "imageUrl": "http://172.20.90.117/www2/img/r8.jpg"
        },
        {
            "title": "奥迪2",
            "text": "奥迪超跑",
            "imageUrl": "http://172.20.90.117/www2/img/r8-1.jpg"
        }
    ]
}

7、具体效果图