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、具體效果圖