APPLE WATCH 中文手册:通知--自定义通知界面

1417060569412909

自定义通知界面含有两个独立的界面:一个静态界面,一个动态界面。动态界面显示了完整的自定义通知内容样式,并且它可以包含由 WatchKit 扩展提供的定制内容和图形。静态界面是一个简单的界面,它仅仅只含有通知的提示信息,以及您在设计时配置的静态图像以及文本信息。

当您在 storyboard 文件中添加新的通知界面控制器的时候,Xcode 将会创建一个独立的 storyboard 场景,其中包含有一个动态界面和一个静态界面,如图15-1所示。静态界面是必需的,如果需要的话您可以删除动态界面。如果静态界面已经可以显示您想要的全部信息,那么您就可以删除动态界面。动态界面和静态场景都和相同的通知类型相关联,而这个通知类型可以用来指定使用何种通知类别来关联静态界面。

图15-1 静态界面和动态界面

1417059875679389

当合适类型的通知抵达时,WatchKit便尝试显示动态界面。如果您并未提供静态界面,或者出于某些原因您的动态界面不可用,那么Apple Watch 将会用静态界面来代替。Apple Watch 同样也会在您明白告知使用静态场景时显示静态界面。配置动态界面需要调用didReceiveRemoteNotification:withCompletion:didReceiveLocalNotification:withCompletion:方法。如果 这些方法使用WKUserNotificationInterfaceTypeDefault常量来调用完成处理程序的话,那么 Apple Watch将会显示静态场景。

配置自定义界面的通知类型

每个通知界面必须分配一个通知类型,以告知 Apple Watch 何时使用它。到来的通知可以在消息载体中包含类别值。Apple Watch 使用这些类别值来决定显示何种通知场景。如果到来的通知并未包含类别值,那么Apple Watch会展示一个类型被设定为`default`的通知界面。

要给通知界面分配通知类型,请在 storyboard 中配置和场景对应的通知类别(Notification Catagory)对象。该对象的属性检查器含有一个Name 属性,如图15-2所示。在这个属性中输入通知类型的类别名称。您同样也可以使用该对象来指定窗扇的颜色。每个通知场景的Name 属性不能相同。

图15-2 配置通知类型信息

1417059972304890

当生成远程通知时,您的服务器要通过在其`aps`字典中包含category键的值来指定通知类型。`category`的键值要和您在 iOS 应用以及您在通知类别对象中的 Name 属性指定的一样。例如,在图15-2中,类别文本是`MeetingInvite`。

提示:类别字符串同样定义了被添加到通知界面末端的操作按钮(如果存在的话)。欲了解关于支持自定义按钮动作的更多信息,请参阅Adding Action Buttons to Notifications

配置静态通知界面

使用静态通知界面来定义一个自定义通知界面的基本样式。使用静态界面的目的是在 WatchKit 扩展不能及时配置动态界面的时候,提供一个回退界面。创建静态界面的规则如下:

· 所有的图像必须驻留在 Watch 应用包中

· 界面不能包含控件、表格、地图,以及其他交互元素

· 界面的`notificationAlertLabel`输出口必须与某个标签相关联。标签的文本设置为通知的警告信息。其他的标签文本不变,并且只能够在设计时设置。

图15-3显示了在一个日历应用当中的静态和静态场景,其使用了自定义通知界面。通知箭头指向了静态场景,其中包含了自定义图标和两个标签。“Message”标签和`notificationAlertLabel`输出口连接,因此它将在运行时接收通知的警告信息。

图15-3 单一通知类型的静态和动态场景

1417060062362348

除了和`notificationAlertLabel`输出口相连的标签外,在静态通知场景中的标签和图像是不能够改变的。当您在设计界面时请记住这条准则,并确保每个标签的文本是合适的。

配置动态通知界面

动态通知界面给用户提供了一个更丰富的通知体验。借助动态界面,您可以显示很多的内容。您可以添加额外的信息,配置多个标签,动态地生成内容,等等。

实现动态通知界面需要创建一个自定义的WKUserNotificationInterfaceController子类。该子类的实现代码负责在通知需要显示时配置界面。

设计动态界面

配置动态界面和配置其他界面控制器场景十分相似。

您可以在子类中包含标签、图像以及场景中的其他对象,并使用这些输出口以在运行时配置场景的内容。单击通知界面将启动应用,因此通知界面不应当包含交互控制。

· 可在绝大多数界面上使用标签、图像、组以及分隔符。

· 您可能想要在需要的时候使用表格和地图。

· 不要包含有按钮、开关,或者其他交互控件。

在运行时配置动态界面

界面初始化之后,WatchKit将负载数据传输到通知界面控制器的不同方法中。对于远程通知来说,WatchKit 调用didReceiveRemoteNotification:withCompletion:方法。对于本地通知来说,它调用didReceiveLocalNotification:withCompletion:方法。请使用接受到的数据来配置您的通知界面。界面配置完成后,您必须要调用所提供的完成处理代码块来让 WatchKit 知道您的界面已经准备就绪。图15-4显示了处理远程通知的初始化和配置进程。

图15-4 显示自定义通知界面

1417060244348853

始终选择使用 didReceiveRemoteNotification:withCompletion:didReceiveLocalNotification:withCompletion:方法来配置您的通知界面。当实现完这两个方法后,尽快运行所提供的完成处理方法来配置界面。然后尽快运行这个代码块。如果您等待了太长时间,那么Ale Watch将会使用静态界面。

代码表15-1显示了`didReceiveRemoteNotification:withCompletion:`方法的实现例程。这个方法被一个发送远程通知的虚构日历应用所实现,用来提示某个新的会议邀请。这个方法从远程通知负载中获取数据,然后使用这个数据来设置通知界面的标签值。为了简便,这个示例假定服务器发送的键值中都有合适的对应值,但是您自己的代码应该执行必要的错误检查,来保证复杂数据是由有效的。在配置完标签后,这个方法将调用完成处理器,来让 WatchKit 知晓自定义界面已经就绪。

代码表15-1 配置远程通知的自定义界面

// Standard remote notification payload keys.
NSString* apsKeyString = @"aps";
NSString* titleKeyString = @"title";
 
// Payload keys that are specific to the app.
NSString* customDataKey = @"cal";
NSString* invitationDateKey = @"date";
NSString* invitationLocationKey = @"loc";
NSString* invitationNotesKey = @"note";
 
- (void)didReceiveRemoteNotification:(NSDictionary *)remoteNotification withCompletion:(void(^)(WKUserNotificationInterfaceType interface)) completionHandler {
    // Get the aps dictionary from the payload.
    NSDictionary* apsDict = [remoteNotification objectForKey:apsKeyString];
 
    // Retrieve the title of the invitation.
    NSString* titleString = [apsDict objectForKey:titleKeyString];
    [self.titleLabel setText:titleString];
 
    // Extract the date and time from the custom section of the payload.
    // The date/time information is stored as the number of seconds since 1970.
    NSDictionary* customDataDict = [remoteNotification objectForKey:customDataKey];
    NSNumber* dateValue = [customDataDict objectForKey:invitationDateKey];
    NSDate* inviteDate = [NSDate dateWithTimeIntervalSince1970:[dateValue doubleValue]];
 
    // Format the date and time strings.
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
 
    // Call a custom method to get the localized date format string for the user.
    // The default date format string is "EEE, MMM d".
    dateFormatter.dateFormat = [self dateFormatForCurrentUser];
    NSString *formattedDateString = [dateFormatter stringFromDate:inviteDate];
 
    // Call a custom method to get the localized time format string for the user.
    // The default time format string is "h:mm a".
    dateFormatter.dateFormat = [self timeFormatForCurrentUser];
    NSString *formattedTimeString = [dateFormatter stringFromDate:inviteDate];
 
    // Set the date and time in the corresponding labels.
    [self.dateLabel setText:formattedDateString];
    [self.timeLabel setText:formattedTimeString];
 
    // Set the location of the meeting.
    NSString* locationString = [customDataDict objectForKey:invitationLocationKey];
    [self.locationLabel setText:locationString];
 
    // Set the invitation's notes (if any).
    NSString* notesString = [customDataDict objectForKey:invitationNotesKey];
    [self.notesLabel setText:notesString];
 
    // Tell WatchKit to display the custom interface.
    completionHandler(WKUserNotificationInterfaceTypeCustom);
}

当调用完成处理代码块时,如果你想 WatchKit 要显示静态界面的话,请指定WKUserNotificationInterfaceTypeDefault的内容。

测试您的自定义界面

当您准备在模拟器测试您的自定义界面时,如果您还没有确定扩展已制作完成的话,请创建一个自定义编译方案来运行您的通知。使用 Xcode 模板提供的`RemoteNotificationPayload.json`文件来指定您的负载数据。要了解更多关于设置编译方案以及配置负载数据的内容,请参阅The Build, Run, Debug Process

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/6238/

(0)
iouedioued
上一篇 2015-06-15 09:55
下一篇 2015-06-15 09:59

相关推荐

  • 交互设计面试经验分享

    交互设计面试经验分享 2016年7月12日 星期二 下午2:49 今天去面试,问的问题给大家看下,刚出来面试场所,就记得这些了。 1.你有没有做过一个你认为特别复杂的项目,包括后台结构,它复杂在哪? 2.如果需求一直变更…

    交互设计 2016-07-14
  • UI交互设计专业-第三十六期学员作品

    专业:UI交互设计班级:第三十六期学员学员:李银学校:湖南理工学院

    2018-03-12
  • 使用无序列表的7项注意

    小圆点有助于分割大段文字,使得复杂的文章和博客更容易消化,突出关键信息。如何运用好无序列表?这篇文章提出了7个注意点。

    2017-05-02
  • 由UI/UX设计师向产品设计师演变

    为了创造出伟大的产品,UI/UX设计师应该期待并成为能够生成和处理更多额外信息以获得最佳设计成果的产品设计师。

    2017-05-09
  • 手机无线设计8个交互设计原则

    产品设计的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机无线设计8原则: 原则1:用户界面应该是基于用户的心里模型,而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常…

    2015-04-08
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类 智能推荐大都基于海量数据的计算和处理,然而我们发现在海量数据上高效的运行协同过滤算法以及其他推荐策略这样高复杂的…

    2015-12-22
  • 移动应用设计的最佳实践

    移动应用现在是提供内容和服务的主流方式。但在热闹的移动应用市场,面对五花八门的各种APP,如何让你的APP受重视,脱颖而出得到用户的青睐?留白应该作为一种主动的元素,而不是作为被动的背景——Jan Tschichold温馨提示:创建最好的移动应用消息策略应该用不同的通知类型——推送通知,电子邮件,应用内通知和新闻源消息。多样化你的通知类型——你的通知工作应该完美协调,创造最佳用户体验。

    2017-05-14
  • 设计不懂开发,严重脱节的设计是怎么影响开发的

    编者按 :Anders Lassen 是 Fuse 的创始人兼首席行政官。Fuse 是一款面向设计师和开发者的本地应用工具套装。 移动应用现在已经变得十分普及,以至于技术圈的大部分人都认为开发应用是一个简单直接的过程。然而,当…

    交互设计 2015-08-04
  • 【交互设计面试经验】2015年1月20日-交互设计师面试问题分享

    面试时间 2015年1月20日 阿西导读: 今天起我们给交互设计行业的朋友们开一个福利栏目:交互设计师面试分享我们在分类里叫交互设计面试,无论你是新手交互还是UI转UE 或是PM转UE又或者PM兼职UE。 不论怎样你都需要知…

    2015-01-21
  • 交互设计方案也需要测试和评估的!

      对于一个交互设计在最终上线之前我们要对整体进行评估,那么又有什么评估的方法呢? @elya:对架构、布局、内容、行为四个方面对照检查 1.架构和导航Architecture and navigation ¨ 是否采用了用户熟悉或容易…

    交互设计 2015-02-03