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

相关推荐

  • 常逛这3个交互设计类网站,轻松get设计技巧和灵感

    DribbbleDribbble是一个著名的UI设计、交互设计社区,许多设计师寻找灵感,与设计师同行进行交流切磋等都会到这里来。 它面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查…

    2017-08-02
  • 巧用交互设计中的暗黑模式

    如何巧妙运用交互设计中的暗黑模式,我们需要更多的思考和学习。不要介意用户骂你流氓,那说明你流氓的不高明 有些操作非常容易就能达成,有些操作明却非要多出几个步骤;有的icon的位置按照设计规则与用户使用习惯…

    2015-12-02
  • 交互设计启示录:交互设计三大标准,信息表述五种方式

    交互设计本就该是互联互通环环相扣的。设计的作用在于寻找功能和社会间的接点, 在功能足以说明一切的前提下,装饰是可以节制的,如何把握节制的度是考验一个设计师是否成熟的标尺。—— 田中一光

    2017-05-04
  • Adobe放大招!Sketch有的功能都上了!

    (本文内容来源知友:不知语冰,感谢~)关于 Photoshop的UI-DNA工具很久就有传闻了!昨天据MICU了解,这个强大的工具终于开放测试啦~~虽然说很多设计师比较推荐sketch,可是这回了不得!sketch有的功能,PS都能实现了!也许有很多同学还不太了解 UI-DNA 是个什么样的工具,说白了,就是 Photoshop 上拥有更强大的属性编辑功能。现在来说说UI-DNA都有神马强大的功能。打开Photoshop 中的UI-DN...

    2018-03-02
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 华为朱平:用大服务把用户体验引向极致

    4月12日,华为新旗舰手机P20系列发布,同时还发布了保时捷设计Mate RS,以及多款产品。2018年,是手机市场艰难的一年,4G换机和消费升级带来的市场红利正在逐渐失去,5G尚未到来,市场进入一个相对低潮期。这样一个情况下,众多手机厂商面临了较大的市场压力。在这样困难的市场环境下,华为怎么巩固自己的市场地位,甚至扩大市场?华为一惯的态度就是用产品说话,用大大领先对手的产品来证明自己。其实我关心的是,华为P20
    Pro这样的产品,已...

    2018-04-21
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 交互设计师的60日计划之第十天

    今天一直处于多线程高并发的状态,所以大脑目前已经死机了。一上午的用户访谈,今天的用户很专业,所以得到很多有用的信息;下午和产品经理过wiki优化的事情,确定大致的方向,然后开了一下午周会;回来和视觉一起…

    交互专题 2015-08-20
  • 无框界面的四大优势,为你演绎一种新的设计风格

    无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

    2017-05-10
  • 美国设计师总结:2018年的用户体验设计趋势和方法

    这是由一位美国作者站在美国的视角写的文章。即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。2017年即将结束,是时候向前展望,预测在接下来的十二个月里,信息体验设计会如何。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于...

    2018-03-29