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

相关推荐

  • App加载动画知识体系:交互、视觉都需要掌握!

    我大胆预测了一下,以后App的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

    2017-05-12
  • 设计实战|城市指南网站着陆页是这样设计出来的

    今天咱们要聊的是“城市指南”(Big City Guide)网站这一概念设计案例研究。

    2017-06-06
  • 从情景出发的可用性设计

    设计文章 / 交互设计 | 来源:TID | 作者:stephyl 前言         为了优化产品,提升用户体验,产品团队经常做很多事情:数据监测、数据分析、竞品分析…然后给交互设计师提需求,让交互设计师把需求转化为可用的功能…

    2014-12-01
  • 「确定」和「取消」按钮哪个该放在左边?

    永恒之战 “确定/取消”党与“取消/确定”党在这场旷日持久的按钮排序之战中,各执己见,至今未能统一。 “确定/取消”党的见解: 符合自然说话/阅读习惯。日常生活中当我们提出问题并伴随肯定与否定的选择时,往往会这样…

    2015-12-10
  • 你天天挂嘴边的「用户体验」,到底是什么?

    用户体验到底是什么?这个每天都挂在嘴边的词,你真的懂吗?

    2017-05-02
  • 精益设计,敏捷开发,一个都不能少

    Agile UX 和 Lean UX,即两种软件开发方法在设计领域的应用。敏捷用户体验注重产品设计中人员交流,软件交付及开发的高效,而精益用户体验则以人为核心,注重产品与市场的匹配度。两种方法各有优缺点,但同样重要。

    2017-04-30
  • 对于传统交互设计思维的一些反思

    在传统的交互设计流程中,比较看重从设计目标建立到最终方案推导过程的逻辑性、终端用户体验与用户心理认知模型的匹配性等,相关的 UCD 设计方法很多。可是,被我们奉为圭臬的那些经典交互设计流程与方法,真的足够好吗?

    2017-05-03
  • 那些上亿人都在看的Banner都是怎么设计出来的?

    每到一年一度的大促季,会场、页面、互动游戏,都在紧张设计之中,这些精美的页面和互动游戏,如何与用户产生联系?必然需要一条与用户连接的纽带 —— 它就是BANNER。有些人可能认为资源位的设计相对简单,但其实不然,小小的资源位承载着重大的使命,设计上自然也是下了一番功夫,那这一次的双11我 们是怎么做的?请听我细细道来…..

    2017-05-30
  • 【交互设计】怎么让引导页不再是无用小透明?

    前言在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有“这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友…

    2017-08-04
  • [译]UX设计之复选框和开关按钮

    当设计表单时,交互设计师常常不得不面对一个问题,就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然,我们都有可能遵循某种既定的规则。无论如何,在做出这个选择时我们都应该牢记…

    2016-06-30