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

相关推荐

  • 译文 | 如何通过讲故事来简化用户体验设计

    原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

    2017-05-27
  • 平面设计中,有哪些简单好用的排版技巧和方法?

    当两张图片中应用的构成元素都相同,画布尺寸也相同的情况下,排版的好坏就决定你整张图片的质量了,这就好比两个厨师,同样的食材做同一道菜,味道却可能截然不同。

    2017-05-19
  • 如何利用动效提升用户体验

    我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

    2017-05-16
  • 来自腾讯交互设计师的分享:交互微动效设计指南

    本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。

    2017-05-02
  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • 用体验设计方法论,结合商业诉求对APP进行改版设计

    这个产品是做什么的?
    这个平台安全吗?
    购买哪个比较好?
    怎么购买理财,外汇,股票类的产品?
    收益如何?
    ……有什么新活动?
    是否能继续提升自己利益?
    以前买过的产品有什么新变化?
    ……

    2017-05-19
  • 做设计不得不讲究的一个点:平衡

    做设计,最难的不是搞清楚解决问题的最佳答案是什么。而是,站在全局去平衡问题与问题之间的关系,做当下资源条件下相对正确的设计决策。

    2017-05-05
  • SketchOSM - 从现在开始丰富三维建筑地理信息吧

    SketchOSM是由出品PlaceMaker(一键三维城市)的团队最新出的一个插件,它可以让你在你设计场地的周边地区创建3D参数建筑模型。通过 SketchOSM 创建的模型数据可以直接发布到 OpenStreetMap 网站上,这是一个庞大的可自由存取和编辑的地理信息数据库,可以算是地理信息界的维基百科。之前紫天在使用 PlaceMaker 插件的时候所遇到的一个最大问题就是国内的三维建筑信息太少,有的话也非常不准确。现在有了Ske...

    2018-03-15
  • 资讯类APP竞品分析报告

    一、摘要 为了能深入了解主流新闻客户端在「功能模块」、「内容运营」以及「界面交互」上的特点,我对Zaker、今日头条、网易新闻这3款APP进行了对比分析,并得出结论: Zaker定位于具备明确新闻需求的用户,整体较…

    2015-03-17
  • Axure RP 8 入门手册 – 第6章(二)

    第5节检视功能-元件命名千语:楼叔,我才问一个问题,你就给我讲了这么多!好感动哦!小楼:嘿嘿,因为这个群里你最大嘛!千语:切!反正你也有空,顺便把元件的设置也给我讲讲吧!我看不管是元件的样式还是属性,都很复杂呢。小楼:您好!因为网络原因,您发送的消息是乱码。千语:还想等你给我讲完,发张我昨天泡温泉的照片给你呢!小楼:你看,其实这个元件设置也非常简单,你看在点中一个元件后,检视面板中就会呈现与该元件相关的设置……从上至下,首先看到的是元件...

    2018-04-22