iPhone OS为您提供了若干控件,您可以在自己的应用程序中使用它们,并且这些控件中的绝大部分已经被iPhone OS设备的用户所熟知。这些控件有很多只能用于特定位置,比如表格视图,但也有一些控件具备一定的通用性。本章将向您介绍可以在应用程序的任意视图中使用的控件。
当您设计应用程序的用户界面时,永远要牢记一点:对于熟悉的控件,用户期望它们具有与内置应用程序中一样的行为。只要您在应用程序中适当地使用这些控件,一定会为自己的程序增色不少。
活动指示器
活动指示器表示有一项持续时间未知的任务或进程正在进行当中。如果已知一项任务的持续时间,需要显示该任务的进度,请使用进度视图(更多关于该控件的信息请参考“进度视图”)。活动指示器看起来像一个“旋转的齿轮”,告诉用户处理正在进行中,但不知何时能够完成。
图9-1显示了两种活动指示器。状态栏上的是网络活动指示器;如果您的应用程序访问网络时超过了一定的秒数,状态栏就会显示该指示符。工具栏上较大一点的活动指示器在您的应用程序执行当前任务的时间多于1秒或2秒时显示。
图 9-1 两种活动指示器
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_activityindicatorexample.jpg)
活动指示器是一种很好的反馈机制,它告诉用户他们的任务或进程并没有终止,而不是说明任务何时结束。
您可以选择活动指示器的大小和颜色来配合它所在的视图的背景。默认情况下,活动指示器是白色的。
当任务或进程已经完成时,活动指示器就会消失。推荐您使用这种默认行为,因为用户期望在有动作发生时看到活动指示器,而且他们会将静止不动的活动指示器与停滞的进程联想到一起。
要了解如何显示网络活动指示器,请参考UIApplication类参考中的
networkActivityIndicatorVisible
方法。要了解如何在您的代码中显示一个较大的非网络活动指示器,请参考UIActivityIndicatorView类参考。
日期时间选择器
日期时间选择器为用户提供了一种简单的选择特定日期或时间的方式。日期时间选择器最多可以有4个独立的转轮,每个轮只显示一种类型的值,比如月份或小时。用户通过点击或拖拽使转轮转动,直到它将用户想要的值显示在选择器中间的一条突出显示的选择栏上。最终的值由各个轮上的值组合而成。图9-2显示了一个日期时间选择器的例子。
图 9-2 日期时间选择器
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_datetimepicker.jpg)
使用日期时间选择器可以避免用户输入由多段组成的值,比如一个日期的年,月,日。日期时间选择器使用起来很方便,因为每一部分的值都有相对小的范围,并且用户知道这些值应该是多少。
日期时间选择器会根据您指定的不同模式显示出不同数量的转轮,每个转轮都有一组不同的值。日期时间选择器定义了如下模式:
时间 时间模式下显示小时和分钟的转轮,以及一个指定上午/下午的可选轮。
日期 日期模式下显示月,日和年的转轮。
日期和时间 日期和时间模式下显示日历日期,小时和分钟的轮,以及一个指定上午/下午的可选轮。这也是默认的模式。
倒数计时器 倒数计时器模式下显示小时和分钟的转轮。您可以指定倒计时的总时长,最长为23小时59分钟。
默认情况下,分钟轮显示60个值(0到59)。但是,如果您想要比较粗略地显示时间,您可以设置分钟轮,使其每隔几分钟显示一个值,只要时间间隔的值是60的因数就可以。例如,您可以以一刻钟为间隔,显示0,15,30和45。
不管如何设置,日期时间选择器的整体大小是固定的,与键盘的尺寸相同。您可以选择将日期时间选择器设为视图中的焦点元素,或者让它只在需要时出现。例如,内置的时钟应用程序的计时器模式会显示一个总是可见的日期时间选择器,这是因为时间的选择对“定时器”的功能起至关重要的作用。另一方面,“设置日期和时间”首选项(在您关闭“自动设置”的情况下,可在“设置” > “一般” > “日期和时间”找到该选项)只显示临时的日期时间选择器,显示与否取决于用户是否想要设置日期或时间。
要了解更多有关在您的代码中使用日期时间选择器的内容,请参考UIDatePicker类参考。
详细信息展开按钮
详细信息展开按钮提供了关于某一项的额外信息或更详细的信息。通常用于表格视图中,向用户提供查看某个列表项(请参考“表格视图元素”查看更多关于该用法的信息)的详细信息的方法。然而,您也可以在其他类型的视图中使用该元素,来提供一种显示更多信息或功能的方法。
例如,地图应用程序显示了一个详细信息展开按钮,用户可以点击该按钮来访问和大头针所钉位置相关的更多功能。图9-3显示了一个详细信息展开按钮的例子。
图 9-3 显示额外的详细信息或功能的详细信息展开按钮
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_detaildisclosure.jpg)
要了解更多有关在您的代码中使用详细信息展开按钮的内容,请参考UIButton类参考。
信息按钮
信息按钮提供了一种显示应用程序配置信息详情的方法,它通常位于屏幕的背面。因此,信息按钮特别适合于工具应用程序。您可以在天气应用程序(图9-4所示)的右下角看到一个信息按钮的例子。
图 9-4 信息按钮用于显示信息,通常是配置信息详情
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_infobutton.jpg)
信息按钮提供了亮色和暗色两种背景。亮色背景样式(如图9-4所示)在暗色背景的视图中效果比较好。相反,暗色背景的信息按钮在亮色背景的视图中效果更佳。
信息按钮会在用户点击它时短暂发光。当您使用iPhone OS提供的信息按钮时,您将自动获得这种处于被按下状态下的外观。
要了解有关在您的代码中使用信息按钮的更多内容,请参考UIButton类参考。
标签
标签是一种大小可变的静态文本。图9-5显示了一个标签的例子。
图 9-5 为用户提供信息的标签
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_label.jpg)
您可以使用标签为用户界面的各部分命名,或者向用户提供一定的帮助信息。标签最适合显示数量相对较少的文本。
您可以设定标签文本的各种属性,比如字体,文本颜色和对齐方式,但最重要的是,您要确保您的标签清晰易读。不要为了华丽的字体或鲜艳的颜色而牺牲文本的清晰度。
当您撰写标签的文本时,一定要使用用户的词汇。请检查您的应用程序中的文本,如果存在以开发人员为中心的词语,请使用以用户为中心的词语替换它们。
要了解有关在您的代码中使用标签的更多内容,请参考UILabel类参考。
页指示符
页指示符为当前在应用程序中打开的每一个视图显示一个小圆点。这些小圆点从左到右的顺序表示了视图被打开的顺序(最左边的小圆点代表第一个视图)。对于当前屏幕上显示的视图,用发光的小圆点加以表示。用户点击发光小圆点的左右两侧可以查看上一个或下一个打开的视图。图9-6显示了一个页指示符的例子。
图 9-6 页指示符
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_pageindicator.jpg)
页指示符为用户提供了一种快捷的方法来查看当前有多少打开的视图,同时也能表示出这些视图被打开的先后顺序;它并不能帮助用户追踪他们在视图层次中所处的位置。因为实用型应用程序中的视图彼此之间往往是对等的,所以页指示符能够充分帮助用户在各视图之间进行导航。另一方面,能够显示层次信息的效率型应用程序应该通过导航栏(请参考“导航栏”获取更多信息)上的元素提供导航信息。
典型情况下,页指示符最好出现在应用程序屏幕的下边缘,位于它所包含的视图的下方。这样就可以把屏幕的上面部分留给更重要的信息(视图本身),使用户很容易看到。一定要确保页指示符垂直居中于视图的下边缘和屏幕的下边缘之间。
虽然对于在页指示符中可以显示的小圆点的数量没有规划性的限制,但是当页面越来越多时,指示点之间不能过于密集。例如,当设备处于纵向时,您只能在一个页指示符上显示至多20个小圆点。因此,您应该在应用程序中避免发生这种情况。
虽然您可以在只有一个打开的视图时隐藏页指示符,但默认的行为是显示它。
要了解有关在您的代码中使用页指示符的更多内容,请参考UIPageControl类参考。
选择器
选择器是日期时间选择器(关于该控件的更多信息请参考“日期时间选择器”)的通用版本。您可以使用选择器来显示任意一组值。与日期时间选择器一样,用户旋转选择器的单个或多个转轮直到出现他们想要的值。图9-7显示了一个单轮的选择器。
图 9-7 iPhone的Safari中出现的选择器
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_pickerview.jpg)
当您决定是否在应用程序中使用选择器时,要考虑到当转轮静止时,轮上的许多甚至绝大多数数值对用户来说是隐藏的。但这不一定是个问题,特别是在用户已知这些值是多少的情况下。例如,在日期时间选择器中,用户了解在月份轮上隐藏的值只能是1到12之间的数字。然而,如果您要提供的选项不是像这样的一组众所周知的值,那么使用选择器控件可能并不合适。
如果您需要显示特别多数量的值,则您应该用表格视图将这些值列出,而不是用选择器。这是因为表格视图具有更高的高度,能够更快速地进行滚动。
如果您需要为选择器中的值提供上下文信息,比如计量单位,请将它显示在水平地穿过控件中心的半透明选择栏中。不要在选择器上方或转轮本身上显示这样的标签。有关正确显示标签的例子,请参考内置的时钟应用程序的“定时器”功能,可以看到在用户选择的值旁边显示了单位“小时”和“分钟”。
与日期时间选择器一样,通用的选择器可以一直可见(作为您的用户界面的焦点)或者只在需要时出现。选择器的整体大小,包括它的背景,都是固定的,与键盘的尺寸相同。
要了解更多有关在您的代码中使用选择器的内容,请参考UIPickerView类参考。
进度视图
进度视图显示具有确定持续时间的任务或进程的进度。如果您需要显示未知持续时间的任务的进度,请使用活动指示器(关于该控件的更多信息请参考“活动指示器”)。
iPhone OS提供了两种样式的进度视图,分别是默认样式和栏样式。这两种样式的外观非常相似,区别在于高度不同:
默认样式用于应用程序的主内容区。
栏样式比默认样式薄一些,非常适合在工具栏中使用。例如,在邮件应用程序中,当用户下载新邮件或发送电子邮件时,工具栏上就会出现栏样式的进度视图。
两种样式进度视图的行为是相同的。随着任务或进程的执行,进度视图会从左到右被填满。在任意一刻,视图中已填充和未填充区域的比例都向用户表明该任务或进程还有多久能够完成。图9-8 显示了一个栏样式进度栏的例子。
图 9-8 工具栏上的栏样式进度视图
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_barstyleprogressview.jpg)
进度视图是那些具有明确持续时间的任务向用户提供反馈信息的好方法,尤其是在向用户显示一项任务大约会执行多久十分重要的情况下。当您显示进度视图时,用户会得知他们的任务正在执行,并且用户获得了足够的信息,他们可以决定是否等待任务完成,或者取消该任务。
要了解更多有关在您的代码中使用进度视图的内容,请参考UIProgressView类参考。
圆角矩形按钮
圆角矩形按钮是一种多功能的按钮,您可以在视图中使用它来执行一个动作。您可以在每一个联系人视图的底部看到这种按钮的例子:文本消息和添加到收藏夹按钮就是圆角矩形按钮,如图9-9所示。
图 9-9 执行应用程序特定动作的圆角矩形按钮
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_roundrectbutton.jpg)
当您为圆角矩形按钮创建标题时,请务必:
使用标题式的大写方式(即每个单词都大写,但冠词,并列连词和五个字母以下的介词除外)
避免创建过长的标题。长度过长的文本会被截断,这样会使用户很难理解。
要了解更多有关在您的代码中使用圆角矩形按钮的内容,请参考UIButton类参考。
搜索栏
搜索栏是一片接收用户输入的文本的区域,您的应用程序可以以搜索栏中的文本为输入进行搜索。当用户点击搜索栏时,会出现一个键盘;当用户键入要搜索的条目后,输入的信息将按照应用程序指定的方式处理。(关于在应用程序中处理搜索,请参考“提供搜索功能并显示搜索结果”。)
默认情况下,搜索图标显示在搜索栏的左侧。此外,搜索栏还可以显示一些可选的元素:
占位符文本。该文本可以用来显示控件的功能(例如“搜索”),或者用来提醒用户他们所处的搜索环境(例如“YouTube”或“Google”)。
书签按钮。该按钮可以提供信息的快捷方式,使得下一次用户也能够轻松地找到这些信息。例如,通过地图应用程序搜索模式中的书签按钮,用户可以访问已保存在书签的地点,最近的搜索和联系人。
清除按钮。大多数搜索栏都包含一个“清除”按钮,允许用户通过点击该按钮清除搜索栏中的内容。
一个可以被称作提示的描述性标题,位于搜索栏的上方。举例来说,这种提示可以是一个短语,为搜索栏提供简要介绍或应用程序特定的环境信息。
图9-10显示了一个包含自定义占位符文本,书签按钮和默认搜索图标的搜索栏。
图 9-10 带有可选的占位符文本和书签按钮的搜索栏
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_searchbar.jpg)
默认情况下,书签按钮和清除按钮会按下列方式对彼此产生影响:
当搜索栏包含非占位符文本时,清除按钮是可见的,用户可以使用它来清除文本。如果搜索栏中不存在用户提供的文本或非占位符文本,清除按钮是隐藏的,因为没必要清除搜索栏的内容。
只有当搜索栏中不存在用户提供的文本或非占位符文本时,书签按钮才是可见的。这是因为当搜索栏中存在用户可能想要清除的文本时,清除按钮是可见的。
您可以通过指定一种标准颜色的背景样式来自定义搜索栏,比如:
蓝色(与工具栏和导航栏的默认外观一致的默认渐变颜色)。默认的背景样式如图9-10所示。
黑色
此外,您可以在搜索栏的下方显示一个范围栏,其中包含一些按钮,用户可以点击这些按钮来选择搜索的范围。范围栏的外观与您所指定的搜索栏外观相同,并且由您为范围栏提供自定义的标题。
不论设备的方向如何,范围栏总是显示在搜索栏的下方,除非您在代码中使用搜索显示控制器(详细信息请参考UISearchDisplayController类参考)。当您使用搜索显示控制器时,范围栏会显示在搜索栏的内部,如果设备横向放置,则范围栏位于搜索字段的右侧(如果设备纵向放置,则范围栏位于搜索栏的下方)。
要了解更多有关在您的代码中使用搜索栏和范围栏的内容,请参考UISearchBar类参考。
分段控件
分段控件是处在一条直线上的各段的集合,其中的每一段都相当于一个按钮,可以显示不同的视图。当用户点击分段控件中的一段时,应该产生一个瞬时的动作或可见的结果。例如,当用户使用分段控件选择一种邮件协议时,设置应用程序将显示不同的信息,如图9-11所示。
图 9-11 分为三个段的分段控件
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_segmentedcontrol.jpg)
分段控件的长度取决于您所显示的段的数量以及最长一段的尺寸。分段控件的高度是固定的。虽然您可以指定要显示的段的数目,但要注意,用户必须能够舒服地点击到任何一段,而无需担心触碰到相邻的段。由于点击区域应该是44 x 44像素,因此建议将分段控件分为5段或5段以下。
分段控件可以包含文本或图像;每一个单独的分段要么包含文本,要么包含图像,但不能同时包含两者。一般来说,最好避免在同一个分段控件中混合使用文本和图像。
分段控件要保证每一段的宽度与段的总数相称。这意味着您要确保为每一段设计的内容在尺寸上要大致相等。
要了解有关在您的代码中使用分段控件的更多内容,请参考UISegmentedControl类参考。
滑块
滑块允许用户在允许的值的范围内对一个值或一个过程进行调整。当用户拖拉滑块时,相应的值或过程也不断被更新。图9-12显示了一个带有最小值和最大值的图像滑块的例子。
图 9-12 滑块
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_sliderexample.jpg)
滑块主要在下面两种情况下很有用:
当您希望用户能够对他们选择的值进行较高精度的控制时
当您希望用户能够对当前的过程进行较高精度的控制时
滑块由轨道,滑块以及可选的左右两边值的图像组成。图9-13显示了滑块的各个部分。
图 9-13 滑块的四部分
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_sliderparts.jpg)
您可以设定滑块的宽度,使其适合于您的应用程序的用户界面。此外,您可以选择水平地或垂直地显示滑块。
有以下几种方法自定义滑块:
您可以定义滑块的外观,以便用户可以一眼辨认出滑块是否处于活动状态。
您可以提供在滑块两端出现的图像(通常,它们分别对应最小值和最大值),以此帮助用户理解滑块的作用。
例如,控制字体大小的滑块可以在最小值一端显示一个非常小的字符,而在最大值一端显示一个特别大的字符。
您可以根据滑块所在的位置和控件所处的状态,为轨道定义不同的外观。
要了解有关在您的代码中使用滑块的更多内容,请参考UISlider类参考。
文本框
文本框是一个接收用户输入的圆角矩形的区域。当用户点击文本框时,会出现一个键盘;当用户点击键盘上的Return键时,文本框会以应用程序指定的方式处理用户的输入信息。文本框可容纳单行的输入。图9-14显示了地图应用程序中的两个文本框。
图 9-14 可接收用户输入的文本框
![应用程序控件 - hackbin - 一个人的天空](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_textfields.jpg)
您可以使用自定义文本框来帮助用户在您的应用程序中进行输入。例如,您可以在文本框的左侧或右侧显示自定义的图像,或者显示一个系统提供的按钮,比如图9-14中的“书签”按钮。在一般情况下,您应该在文本框的左端指明该文本框的用途,而在右端显示一些附加的功能,比如书签。
您也可以在文本框的右端显示清除按钮。当该按钮存在时,不论您在它的上面显示什么图像,点击该按钮都会清除文本框的内容。
有时候,如果文本框显示一些提示信息,比如“姓名”,则有助于用户理解这个文本框的用途。文本框支持显示占位符文本,它们可以在文本框中没有其他文本时显示。要了解与使用文本框,以及自定义显示图像和按钮的文本框的详情,请参考UITextField类参考。
您可以指定不同的键盘样式,来迎合用户输入的内容的不同类型。(注意,您不能控制键盘的输入法和布局,这些是由用户的语言设置决定的。)例如,你可能希望用户能够方便地输入URL地址,PIN密码或电话号码。iPhone OS提供了几种不同的键盘类型,这样设计是为了方便不同类型的输入。要了解可供您使用的键盘类型,请参考
UIKeyboardType
。要了解更多有关在您的应用程序中管理键盘的内容,请阅读iPhone应用程序编程指南中的“键盘管理”一节。