APPLE WATCH 中文手册:APPLE WatchKit Apps--表格

1418720197791879

本文翻译自Apple Watch Programming Guide:WatchKit Apps--Tables,敬请勘误。

使用table展示内容可动态更改的列表数据。WatchKit 仅支持使用WKInterfaceTable类的单列表格。想要在table中展示数据,需要先为数据定义布局,并在运行时通过编码填写表数据。您需要在Xcode工程中做以下事情:

在storyboard文件中:

  • 给界面控制器场景添加table对象,并在界面控制器中为table创建一个outlet。
  • 像Configuring Row Types描述的那样为table配置一个或多个row types。

在代码中:

您可以为每个table定义多个行类型,每种类型都有不同的外观。在运行时,您可以指定所需行类型以及它们在table中的排列顺序。对于如何配置table的详细信息,请参看WKInterfaceTable Class Reference.

配置Row Types

Row Type是一个在table中以单行形式展示数据的模板。每个table必须至少有一个row type,您可以根据需求定义额外的row type。您可以用row type区分table中的不同内容。比如您可能在内容行上、标题和注脚上使用不同的类型。当您为界面控制器场景添加table时,Xcode会自动创建初始的row types供您配置。

为table添加row  types:

  • 在storyboard文件中选中table对象
  • 打开Attributes inspector.
  • 使用Rows属性更改可用row type数量。

每个row type最初都包含一个单个组元素。您可以为该组元素添加标签、图片以及其他所需对象。标签和图片的真实内容通常是无关紧要的。在运行时,作为配置工作的一部分,您可以替换界面对象的内容。

想要在运行时管理表格行的内容,您需要提供一个自定义的row controller 类。大部分row controller类包含少量代码,或者根本就不包含代码,它们主要用来访问那些包含界面对象的outlets。不过,如果您在表格行中添加了按钮或者其他控件,那么其类也会包含一些动作方法,以响应用户与控件的交互。

为row type定义一个row controller类:

  • 为WatchKit扩展添加一个新的Cocoa Touch类
  • 让新类继承NSObject
  • 为每个计划在运行时访问的标签、图片或者控件添加声明的属性。声明属性可使用以下格式,请更改类以匹配相应的界面对象:
@property (weak, nonatomic) IBOutlet WKInterfaceLabel* label;

Listing 10-1 展示了一个用于管理row type的示例类

@interface MainRowType : NSObject
@property (weak, nonatomic) IBOutlet WKInterfaceLabel* rowDescription;
@property (weak, nonatomic) IBOutlet WKInterfaceImage* rowIcon;
@end

您可以在storyboard文件中完成row type配置。配置表格行要求设置其类,并将任何outlets连接到对应的界面对象上。您还必须提供一个方法,以便通过命名row type在运行时辨别表格行。

在storyboard中配置row type:

  • 在storyboard文件中选中row controller对象。
  • 将row controller的Identifier属性设置为唯一值,随后您会在创建表格行时使用该标识符。

在行类型中该值必须是唯一的,但是实际值还是由您来定夺。在Attributes inspector中设置该值。

  • 将row type的类设置为您的自定义类。您需要在Identity inspector中设置类信息。

将row type元素和类中对应的outlets连接起来。

  • 将storyboard文件中的项目和outlets连接并绑定。当您在代码中配置table时,WatchKit会在运行时使用该信息实例化对应的类。

Figure 10-1 在Xcode中配置一个命名为"Main Row Type"的row type,并设置为使用Listing 10-1中定义的MainRowType类。该类中的rowDescription 和rowIcon outlets被连接到行中的图片和标签。

1418720785829419

运行时配置table内容

在运行时,您可以为table添加表格行并以编程形式配置其内容。通常,添加并配置表格行是初始化界面控制器过程中的一部分。

创建并配置列表行

  • 先决定你需要创建的行的数目和类型,这取决于你想要展示的数据类型。
  • 使用setRowTypes:或者setNumberOfRaws:withRowType:方法来创建。这两个方法都会在界面上创建新的列表行,并且会在WatchKit扩展中实例化对应的类。这些实例被保存在table中,且可通过rowControllerAtIndex:方法访问。
  • 使用rowControllerAtIndex:方法遍历表格中的每一行。
  • 使用row controller对象来配置每一行中的内容。

setRowType:和setNumberOfRaws:withRowType:方法实例化与storyboard文件中对应的行类型相关的类。在调用这些方法之后,紧接着就可以直接获取最新创建的row controller对象了,当然还可以通过这些对象来设置内容。下面的Listing 10-2这段代码则是一个能创建新行并对其进行配置的简单示例。在这个例子里,使用的是在代码Listing 10-1中定义的MainRowType类,以及自定义的MyDataObject类,MyDataObject类用于提供table中用于行内容的数据。在setNumberOfRaws:withRowType:方法中设置好数据对象之后,代码会遍历该对象,并使用它们配置表格中每一行的内容。

Listing 10-2 创建并配置table中的行

- (void)configureTableWithData:(NSArray*)dataObjects {
    [self.table setNumberOfRows:[dataObjects count] withRowType:@"mainRowType"];
    for (NSInteger i = 0; i < self.table.numberOfRows; i++) {
        MainRowType* theRow = [self.table rowControllerAtIndex:i];
        MyDataObject* dataObj = [dataObjects objectAtIndex:i];
 
        [theRow.rowDescription setText:dataObj.text];
        [theRow.rowIcon setImage:dataObj.image];
    }
}

表格行的选中处理

界面控制器负责处理table中的行选中操作。当用户点击table中的某一行,WatchKit会选中该行并调用WatchKit扩展中正确的方法。您可以在以下地方处理表格行的选中操作:

您可以使用以上两者之一来处理行选中事件。如果您的界面控制器有多个table,那推荐使用一个动作方法,因为您无需判定操作跟哪个table有关。如果您使用了一个动作方法,那需要遵循下面的语法:

- (IBAction)myTableAction:(NSInteger)rowIndex

通过选中表格行来执行app相关的任何操作,比如跳转新界面,或者更新行中显示的内容。如果您不希望用户选中表格行,可以在Storyboard中禁用相应的row controller的Selectable选项。

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

(0)
iouedioued
上一篇 2015-06-15 10:08
下一篇 2015-06-15 11:12

相关推荐

  • 交互设计文档如何写,才给程序员以美得享受?

    阿西UED授权发布作者公众号艾欧交互设计ID:aioued文章最后报名线上线下活动:【HBAT创新设计峰会:design+下的生存之道】“写交互设计文档(DRD)目的在于:便于与前端、测试以及开发工程师沟通”交互设计文档重要么?重要!但不是项目必需具备的内容,为什么还要学习呢?其实对于初学者来说,交互设计文档能够很好的梳理产品的逻辑关系、基本的设计规范等问题,让你真正透彻的认识一个产品所有可能性。基本上,在大公司都会写交互设计文档的,便...

    2018-02-01
  • ArtCenter 2018交互设计本科详解

    交互设计无处不在,从手机应用到游戏,再到可穿戴设备和数字环境。交互设计领域正在经历着巨大的增长,市场对有经验的数字设计师的需求也在激增。专业简介ArtCenter在交互设计领域的丰富历史跨越了平面设计、交通设计、娱乐设计、工业设计和媒体设计等领域,毕业生现在在苹果、谷歌、微软和IDEO等公司担任领导职位。ArtCenter的前沿课程致力于创新。我们的学习过程强调核心方法、工具和过程,使学生在新技术出现的时候能继续前进。但这一课程并不全是...

    2018-05-07
  • 【交互基础】你认为交互设计是什么?它是否有一个完整的定义?它的上升空间如何?交互设计又是如何应用的?

    交互学堂 微信号 IxDSchool 功能介绍: 从零开始学交互!国内最专业的交互设计学习内容资源。如需访问网站请百度搜索:交互学堂。 [alert_success]很多人问:你认为交互设计是什么?它是否有一个完整的定义?它的上…

    2016-02-19
  • 纽约视觉艺术学院SVA交互设计硕士毕业展 | 点赞按钮背后的学问

    SVA的交互设计专业汇集享有国际盛誉的设计师及其当今各大领域的专业人士,学生背景来自不同行业,有交互、数字媒体、纯艺、产品、平面、家居、建筑、计算机、社会学等等,学生之间能互补知识,拓展思路。要你设计一个点赞按钮,你会怎么设计?交互设计是什么?不知道的话,你可以回顾「谷歌UX交互设计师丨郑嘉」的分享会:用逻辑支持设计决定丨Google 设计师 郑嘉带你认识UX,她认为交互设计思维是用逻辑支持你的设计决定。SVA交互设计看点读交互的学生,...

    2018-05-04
  • Sketch常用插件介绍

    sketch大家应该都不陌生,在互联网设计尤其是UI设计相对于老牌PS,sketch提升了工作效率,改变了以往的工作模式,sketch的强大除了软件本身,另一个不可磨灭的功劳就是丰富的插件。今天给大家介绍几款常用的插件:一、Sketch Measure一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。在线演示: http://utom.design/news/二、Craft帮你提高效率的自动填充神器a.文本自动填...

    2018-04-12
  • 如何平衡用户体验和商业变现

    互联网公司往往会面对怎样平衡用户体验和商业变现的问题。其中最常见也是最典型的代表就是,作为互联网公司商业模式之一的广告,某种程度上会影响用户体验。比如广告数量过多、与用户需求根本不相关等,这都会引起用户的反感。而在Facebook看来,这并非是一个无解的问题。在1月21日举办的2018极客公园创新大会上,Facebook工程总监范鹏分享了Facebook平衡用户体验与商业变现问题的4个原则。范鹏认为,用户体验与商业变现之间产生的问题其实...

    2018-02-10
  • Axure RP入门第七篇——中继器来实现聊天室效果

    产品经理入门:Axure RP入门第七篇——中继器来实现聊天室效果

    2018-03-24
  • 移动端图片阅读—交互设计分析

    ↑点击上方蓝字,加个关注吧~↑今天老冰给大家分享一个移动端图片浏览的交互方式这个APP的阅读教程中,一共介绍了四种交互方式,左右滑动翻页浏览,上下滑动阅读更多,下拉放大图片,侧划查看时间线以往资讯。在这里并没有介绍左滑,有人问,左右滑动不就是左滑吗?其实,并不是,当你位于第一张图片时,也就是现在左滑已经没有内容了,此时你的左滑便有了刷新的作用,不同于其他(很多app刷新都是下拉刷新),这也是值得称赞的地方,它通过自己的交互思维,产生了自...

    2018-01-30
  • 译文 | 4种帮助设计师整理设计思路的方法

    当我们刚刚接手一个项目的时候,我们总能在初期迸发出很多有趣的想法,很多闪光的细节都是偶然闪现的,但当我们在设计的过程中,有多少能够真正落地到产出中呢?怎样才能成功捕捉到这些有趣的创意,并使之在后续的产品设计中表达出来?本文向大家推荐了四种方法,帮助大家整理设计思路,避免创意在你的脑海里逃走!下面进入译文。

    2017-05-25
  • 译文推荐:设计并非艺术

    “设计并非艺术”的观点让我有些困惑,与我一直以来的认知有些不同。我确实认同艺术是独立于现实目的而存在的创意表达方式,而另一方面,设计虽然有着明确的现实目标,但它不同样也是创意的展示形式吗?我目前很难完全认同你的观点,希望进行更多交流。

    2017-05-27