表格视图，文本视图和Web视图

表格视图，文本视图和web视图是具有多种功能的界面元素，它们在iPhone应用程序中有着不同的用途。例如，表格视图可以用来显示简短的选项列表，详细信息的分组列表或者长的项目索引列表。文本视图和web视图相对来说可以不受约束地接受和显示内容。

 

表格视图

表格视图通过多行单列的表格呈现数据。行可以被分为不同的段或组，每一行可以包含文本，图像和控件的组合。用户可以以轻击或拖动的方式来滚动行或行的分组。图8-1显示了不同样式的表格视图，它们以不同的方式显示列表。

图 8-1  使用表格视图显示列表的三种方式

 

用法和行为

表格视图在iPhone应用程序中非常有用，因为无论是信息量的多少，它们都提供了组织信息的有效方式。尽管实用型应用程序也可以小范围的使用表格视图，但表格视图通常在需要处理大量用户数据的效率型应用程序中最为有用。沉浸式应用程序一般不会使用表格视图来显示信息，但是它可能会使用表格视图来显示简短的选项列表。

表格视图提供了允许用户浏览和操作信息的内置界面元素。此外，表格视图还支持：

显示页眉和页脚信息。您可以在列表中每一段或一组的上方或下方显示描述文本，也可以在整个列表的上方或下方显示描述文本。

编辑列表。您可以允许用户以统一的方式对列表项进行添加，删除或排序等操作。表格视图还支持对多个列表项的选择和操作，您可以利用这一点向用户提供一种能够同时删除多个列表项的便捷方法。

当用户选择一个列表项时，表格视图应该提供反馈信息。如果一个列表项可以被选中，则当用户选择该项时，包含该项的行应该暂时高亮显示，以此向用户反馈已收到用户的选择。然后，立即执行动作：要么显示一个新的视图，要么在这一行显示一个复选标记来表明该项已被选中或启用。

在极少数情况下，当与该行中的项相关的附加详细信息或控件显示在同一屏上时，该行可能会继续高亮显示。但是，并不鼓励这样做，因为要在屏幕上同时显示选项列表，被选中的项和相关的详细信息或控件，很容易造成布局拥挤，令用户感到不适。

如果选中某一行的结果是导航到新的屏幕上，那么被选中的行会在新的屏幕滑动到相应位置之前高亮显示。当用户返回到先前的屏幕时，原来被选中的行会再次高亮显示一下，提示用户他们之前的选择。

请注意，您也可以以动画的方式展现用户对列表项的更改。这样做有利于向用户提供反馈信息和增强用户的直接操作体验。例如，在设置应用程序中，当您关闭自动设置日期和时间时（在“日期和时间” > “自动设置”中选择关闭），列表分组会平滑地展开，显示两个新的列表项，“时区”以及“设置日期和时间”。

表格视图应该立即显示其内容。如果表格的内容繁多或者十分复杂，请不要一直等到所有的数据都可用时才显示它们。相反，应该立即使用文本数据填充屏幕上可见的行，当更复杂的数据（比如图像）可用时再显示它们。这种技术能够马上为用户提供有用的信息，并且提高了您的应用程序的响应能力。

如果您的应用程序要显示的数据很少发生变化，您可以考虑在新的数据可用之前显示那些实际上已经“过期的”数据。这种技术也能够让用户马上看到有用的信息，但不推荐那些数据频繁变化的应用程序也这样做。在您决定这样处理之前，一定要估计数据变化的频率和用户对迅速看到新数据的期待程度。

如果很难立即显示有用的信息，也一定要避免显示空行，因为这会给用户造成“应用程序已经出现问题而终止”的错误暗示。相反，表应该在屏幕中心显示一个旋转的活动指示符和一条信息标签，比如“加载中...”。如果您可以显示旧的数据，您就不必担心空行的问题，但是您应该在获得新数据后立即更新屏幕上的信息。这两种技术都为用户提供了反馈信息，让他们知道应用程序的处理正在进行当中。

表格视图样式

iPhone OS定义了两种样式的表格视图，它们的区别主要在于外观：

无格式样式（
UITableViewStylePlain
）这种视图样式所显示的行从屏幕一侧的边缘延伸至另一侧的边缘。行的背景是白色的。每一行可以被分成带标签的段，并且可以在视图的右边缘垂直地显示一个可选的索引。

图8-2显示了iPod应用程序中的一个无格式样式的列表（没有页眉，页脚和索引）。

Figure 8-2  一个简单的无格式样式的列表

分组样式（
UITableViewStyleGrouped
）这种视图样式显示行的分组，每组表格行会相对屏幕两侧缩进。这些分组显示在独特的垂直条纹背景下，而分组内部的背景则是白色的。分组样式的表格可以包含任意数量的分组，每一个分组可以包含任意数量的行。在每一组之前可以加入页眉文本，其后可以加入页脚文本。这种样式的表格视图不提供索引。

图8-3显示了一个分组样式的列表，其中每个分组均包含一行。该列表出现在设置应用程序中，不包含页眉或页脚文本。

图 8-3  一个包含四个分组的，具有分组样式的列表

单元格样式

iPhone OS 3.0及后续版本中包含了四种预定义的单元格样式，您可以使用它们快速，方便地为无格式样式和分组样式的表格行创建常用的布局。请注意，从编程角度而言，这些样式是应用在表格视图的单元格上的，单元格规定了表格应该如何绘制各行。

当您使用标准单元格样式时，您的应用程序的风格会与内置应用程序保持一致，这将在以下几个方面使您获益：

用户可以更快地了解您的应用程序如何工作

如果今后标准单元格样式有所改进，您的应用程序可以轻松地保持一致，而无需付出大量的额外工作

如果您想要以非标准的方式布置您的表格行，您最好创建一种自定义的单元格样式，而不是大刀阔斧地修改已有的标准样式。iPhone OS表格视图编程指南中的“自定义单元格”一节可以帮助您了解如何创建自己的单元格。

请注意，在所有的单元格样式中，文本都会被自动截断。一般来说，您应该确保您的文本尽可能简洁，避免显示出用户难以理解的被截断的单词或词组。具体来讲，文本截断是个可大可小的问题，这取决于您使用的单元格样式和截断发生的位置。

iPhone OS提供下列标准单元格样式：

默认单元格样式（
UITableViewCellStyleDefault
）包含位于左侧的可选图像，后面紧跟左对齐的黑色文本标签。

图 8-4  分组表格（左）和无格式表格（右）中的默认单元格样式

 

文本标签代表一个表格项的名称或标题，而且其左对齐的格式使得列表很易于浏览。因此，默认样式非常适合于显示不需要根据附加信息加以区分的表格项列表。

最好使用简短的文本标签，但是如果文本截断无法避免，要尽量确保最重要的信息包含在前几个单词中。

副标题单元格样式（
UITableViewCellStyleSubtitle
）包含位于左侧的可选图像，后面紧跟一行左对齐的文本标签，以及另一行位于文本标签下方的左对齐的详细信息文本标签。文本标签采用黑色字体，详细信息文本标签则采用较小的灰色字体。

图 8-5  分组表格（左）和无格式表格（右）中的副标题单元格样式

 

文本标签代表一个表格项的名称或标题，而详细信息文本标签则表明它包含与该表格项相关的附加信息。文本标签的左对齐格式使得列表很易于浏览。在列表项看起来比较相似的情况下，这种单元格样式很适用，因为用户可以参考详细信息文本标签中的附加信息，以便区分文本标签中列举的表格项。

文本标签应该尽量简短，以避免发生文本截断。如果文本截断无法避免，请注意将最重要的信息放在前几个单词中。如果详细信息文本标签发生截断，用户则不会太介意，因为他们认为它只是用于加强或补充文本标签中列举的表格项。

value 1单元格样式（
UITableViewCellStyleValue1
）将文本标签和详细信息文本标签显示在同一行，文本标签采用左对齐格式和黑色字体，而详细信息文本标签采用右对齐格式和较小的蓝色字体。这种单元格样式不宜使用图像。

图 8-6  分组表格（左）和无格式表格（右）中的value 1单元格样式

 

文本标签代表一个表格项的名称或标题，而详细信息文本标签提供了与该表格项紧密相关的重要信息。

文本标签的左对齐格式和字体样式有助于用户浏览他们所需的项目列表，而详细信息文本标签的右对齐格式可以引起用户对表格项相关信息的关注。这种单元格样式适合于显示表格项的当前值，而该值可能选自一个子列表。

在这种布局中，可能很难避免文本截断的发生（因为两个标签位于同一行），但是仍值得您努力尝试。否则，两组标签之间没有留白，用户很难了解这两部分信息之间的关系。

虽然您可以在无格式表格或分组表格中使用 value 1单元格样式，但是其外观更适合于分组表格。例如，在设置应用程序的“用法”屏幕中，分组表格使用了value 1样式：

图 8-7  在分组表格中具有最佳视觉效果的value 1单元格样式

value 2单元格样式（
UITableViewCellStyleValue2
）同样将文本标签和详细信息文本标签显示在同一行，文本标签采用右对齐格式和较小的蓝色字体，而详细信息文本标签采用左对齐格式和较大的黑色字体。这种单元格样式不宜使用图像。

图 8-8  分组表格（左）和无格式表格（右）中的value 2单元格样式

 

文本标签的右对齐格式，受限宽度及其字体样式意味着它仅起到一标题的作用，左对齐详细信息文本标签则包含更重要的信息。

在这种布局中，标签是每一行中的相同位置相向排列的。这样，就在列表中的文本标签和详细信息文本标签之间形成了一条清晰的垂直边缘，有助于用户一眼就能看到详细信息文本标签的首单词。如果您允许文本标签被截断，该垂直边缘的清晰程度则会有所消减，这会造成用户浏览详细信息文本标签中的信息变得更加困难。

虽然您可以在无格式表格或分组表格中使用 value 2单元格样式，但是其外观更适合于分组表格。例如，在联系人应用程序的“信息”屏幕中，分组表格使用了value 2样式：

图 8-9  在分组表格中具有最佳视觉效果的value 2单元格样式

注意：所有的标准单元格样式都允许添加表格视图元素，比如复选标记或展开指示符。但是一定要注意，添加这些元素会减少单元格中可用于标题和副标题的空间宽度。

 

您也许能够通过增加表格行的高度，以支持文本换行，从而避免文本截断，但这可能会产生一些问题：

您必须以编程的方式检查文本的长度，并判断是否可能发生文本换行。您必须针对纵向和横向这两种情况都作出相应的判断，因为表格的宽度会对文本换行产生影响。

您应该避免在设备处于一个方向时显示换行的文本，而在处于另一个方向时不显示。

无论表格视图的样式如何，可变的行高都会对表格视图在应用程序中的整体性能产生负面影响。

最后要强调的是，虽然在分组表格中可变的行高是可以接受的，但是它们会使无格式表格显得混乱不均。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表格视图元素

iPhone OS包含一些可以扩展表格视图的表格视图元素。除非特别注明，否则这些元素都只适用于表格视图。在您的应用程序中，一定要正确地使用这些元素，因为用户已经习惯了它们在内置应用程序中的外观和行为。

注意：从编程角度而言，表格视图元素是以不同的方式实现的。有些是单元格（控制表格如何绘制各行的对象）的附属视图，其他的可能在表格视图进入编辑模式时显示。要了解管理这些元素的不同方式，请参考iPhone OS表格视图编程指南。

 

 

展开指示符 当这个元素出现时，用户知道他们可以点击这一行中的任意位置来查看下一级的信息，或是与当前列表项相关的选项。

当选中一行后会显示另一个列表时，应使用展开指示符。不要使用展开指示符来显示某个列表项的详细信息；这种情况下应使用详细信息展开按钮。

详细信息展开按钮 用户可以通过点击该元素来查看某个列表项的详细信息。（请注意，您可以在表格视图之外的其他视图中使用这个元素，以显示指定对象的详细信息；更多信息请参考“详细信息展开按钮”）。

在表格视图中，可以在某一行中使用详细信息展开按钮，来显示与该列表项相关的详细信息。请注意，与展开指示符不同，详细信息展开按钮所执行的动作可以独立于行的选择动作。例如，在电话收藏夹应用程序中，点击某一行会呼叫在该行位置上显示的联系人；而点击该行中的详细信息展开按钮会显示该联系人的详细信息。

删除按钮 用户通过点击该元素可以删除对应的列表项。当用户用力点击某一行，或者在编辑环境下点击删除控制按钮时，该元素会出现在列表项的右边。（该元素的例子请参考图8-10）。

删除控制按钮 用户通过点击该元素可以显示或隐藏每个列表项的“删除”按钮。为了向用户提供更多的反馈信息，当用户点击这个按钮时，该按钮内的减号标志由水平方向变为垂直方向，并显示“删除”按钮。该元素的例子请参考图8-10。.

在支持临时编辑模式的分组表格中，删除控制按钮出现在表格视图外部的左侧。例如，您可以在编辑联系人应用程序中的个人信息时看到这种情景。在处于固定编辑模式的分组表格中（比如“股票”和“天气”应用程序中的分组表格），删除控制按钮出现在表格内部的左侧。

在无格式样式的表格中，删除控制按钮总是出现在表格内部的左侧，如图8-10所示。

行插入按钮 用户通过点击该元素可以向列表中添加一行。

行排序控件 当该元素出现时，用户可以拖动一行到列表中的另一位置上。

选定符号 该元素出现在列表项的右侧，表明该项当前被选中。

图 8-10  表格视图可以显示“删除”按钮和删除控制按钮

开关控件

开关控件呈现给用户两种互斥的选项或状态，比如“是/否”或“开/关”。开关控件每次只能显示两个选项中的一个；用户滑动该控件可以显示隐藏的选项或状态。图8-11显示了开关控件的例子。

图 8-11  表格视图中的开关控件

当您需要向用户提供两个简单的，完全对立的选项时，您可以在分组表格视图中使用开关控件。由于其中一个选项始终是隐藏的，因此最好在用户已经知晓这两个选项是什么的情况下才使用开关控件。换句话说，不要让用户仅仅为了弄清楚另一个选项是什么而滑动开关控件。

您可以使用开关控件来改变视图中的其他用户界面元素的状态。根据用户做出的选择，可能会有新的列表项出现，或者有列表项消失，或者有的列表项变为有效或无效的状态。

使用表格视图实现常用的用户操作

表格视图是非常通用的用户界面元素，因为它们可以通过不同的配置方式来支持不同的用户操作，比如：

选项列表。

在iPhone OS中没有类似于菜单或弹出式菜单那样的多项选择控件，但是表格视图能够以一种简单的，整洁的方式显示选项列表，供用户进行选择。此外，表格视图可以提供选定标记图像，向用户标识列表中的哪一项（或哪些项）处于被选中的状态，如图8-12所示。

图 8-12  选项列表中的选定标记

如果您需要在用户点击表格视图中的某行时向用户显示选项列表，您可以使用任意一种样式的表格视图。但是，如果您需要在用户点击按钮或其它位于表格行之外的用户界面元素时向用户显示选项列表，则您应该选用无格式样式的表格视图。

导航层次信息。

表格视图适用于显示有层次结构的信息，也就是说每个节点（即列表项）可以包含它自己的子集，因为其子集可以显示在一个单独的列表中。用户可以很轻松地沿着层次结构中的路径，从每层列表中选择一项。展开指示符表示用户点击该行中的任意位置都可以在一个新列表中查看其子集，如图8-13所示。

图 8-13  展开指示符表示下一屏将显示该行的信息子集

如果一个表格视图用于导航时，当用户按照层次结构回溯他们浏览过的内容时，先前被选中过的表格行不再保持高亮显示。

 

查看按概念分组的信息。

您可以使用任意一种表格视图样式，将信息归类为不同的逻辑分组，比如工作，家庭或学校。无格式样式表格和分组样式表格都允许您通过提供页眉和页脚文本来为每一段提供上下文信息，如图8-14所示。

图 8-14  无样式样式的表格视图中通过页眉来分组

一般来说，分组样式表格提供了更清晰的，可视化的分组表示，因为即使在快速滚动的情况下，用户也很容易认出分组所具有的圆形的四角。 图8-15显示了iPod设置中一些概念相近的分组。

图 8-15  分组样式表格视图可以包含多个分组

查看索引过的信息。

如果您正在使用无格式样式的表格视图，则您可以显示索引来帮助用户迅速找到他们需要的东西。索引由一列悬浮于屏幕右边缘的条目（通常是字母表中的字母）组成，如图8-16所示。用户点击（或拖移至）一条索引项可以看到在列表中与之对应的区域。当列表的长度跨越数个屏幕时索引最为有用。

图 8-16  包含索引的无格式样式的表格视图

如果您在无格式样式表格中包含了索引，您就应该避免使用那些需要在表格的右边缘显示的表格视图元素（比如展开指示符），因为这些元素会影响索引的使用。

 

文本视图

文本视图是一片能够显示多行文本的区域，并在内容过长超出其边界范围时可以滚动。邮件应用程序就使用了文本视图让用户创建签名，签名会出现在用户所撰写的每一封邮件的正文末尾处，如图8-17所示。

图 8-17  显示多行文本的文本视图

您不但可以使用文本视图来显示多行文本，如一份大文本文件的内容，而且您还可以使用文本视图来支持用户编辑。如果您提供的文本视图是可编辑的，那么当用户在文本视图内点击时会自动显示键盘。键盘的输入法和布局取决于用户的语言设置。当用户点击“.?123”键（如图8-17所示）时，键盘会切换到数字键盘，使得数字和标点符号的输入更加方便。您也可以指定不同的键盘样式，这取决于您希望用户所输入的文本类型。关于可使用的键盘样式请参考“文本框”。

您可以在文本视图中控制文本的字体，颜色和对齐方式，但这些属性会应用于整个文本。也就是说，您无法只对部分文本做出上述属性的改变。正如您所期望的那样，默认的字体和颜色采用系统字体和黑色，因为其可读性最强。默认的对齐属性为左对齐（您可以将其改为居中对齐或右对齐）。

如果您一定要在同一个文本视图中使用不同的字体，颜色和对齐方式，您可以使用web视图代替文本视图，使用HTML来格式化文本。

Web视图

Web视图是应用程序屏幕上可以显示丰富的HTML内容的一片区域。例如，邮件应用程序使用web视图显示邮件的内容，因为这种视图可以包含比纯文本更丰富的内容（图8-18显示了这样的一个例子）。

图 8-18  Web视图可以显示基于web的内容

除了显示web内容之外，web视图还提供了一些元素来支持用户浏览开放的网页。虽然您可以选择向用户提供网页浏览功能，但是最好避免让您创建的应用程序看起来像是一个小型web浏览器。

如果您拥有一个网页或web应用程序，您可以选择使用web视图对其进行包装，实现一个简单的iPhone应用程序。如果您打算访问由您操控的web内容，请首先阅读Safari Web内容指南，确保您已经知道对于iPhone OS设备，如何创建与之兼容并针对其显示进行过优化的web内容。