导航栏，标签栏，工具栏和状态栏
本文摘自iPhone人机界面指南
导航栏，标签栏，工具栏和状态栏
状态栏，导航栏，标签栏和工具栏在iPhone应用程序中具有特别定义的外观和行为的视图。它们不需要在每个应用程序中都出现（在那些令人惊叹的应用程序中经常是一个也不出现），不过一旦决定让它们出现在应用程序中，就一定要正确地使用这些视图。原因在于使用iPhone OS设备的用户都熟悉它们所提供的功能，对它们显示的信息和执行的功能类型早已习惯。
状态栏
状态栏显示与用户设备相关的重要信息，包括电话信号强度，当前网络连接和电量信息。图6-1显示了一个状态栏的例子。
图 6-1 一个包含用户所需的重要信息的状态栏
尽管一个全屏的应用程序可以隐藏状态栏，但是您应该仔细考虑这一设计方案。人们总是希望可以看到当前设备的电量；隐藏这一信息，会迫使用户需要退出您的应用程序才能获取电量信息，这可不是一种理想的用户体验。
例如，照片应用程序以全屏幕视图显示相机中的各个照片时，会在几秒钟之后渐渐隐去状态栏，导航栏和工具栏。这种做法是很恰当的，因为在照片应用程序中，用户仅仅关注照片的内容，而并不与应用程序进行交互。但是，用户可以通过轻轻点击屏幕，让状态栏，导航栏和工具栏重新显示出来。
如果您想要不时地在应用程序中隐藏状态栏，那么您应该使得用户能够通过单击屏幕重新获得状态栏。除非您有非常令人信服的理由，否则最好避免用自定义的方式来重新显示状态栏，因为用户未必会发现或记住这样的方式。
虽然您难以控制状态栏的内容，但是您可以定制它的外观，并在一定程度上定制它的行为。具体来说，您可以：
设定网络活动指示器是否应该可见。如果您的应用程序正在执行的一项网络操作会持续几秒钟以上，则应该显示网络活动指示器。如果该网络操作将在几秒钟之内完成，则不必显示网络活动指示器，因为它很可能在用户意识到它的存在之前便消失了。（在您的代码中，您可以使用
UIApplication的方法networkActivityIndicatorVisible来控制指示器的可见性。）指定状态栏的颜色。您可以选择灰色（默认的颜色），不透明的黑色或半透明的黑色（也就是α值为0.5的黑色）。图6-2显示了这些样式。（请注意，您应该在
Info.plist文件中设置一个值来指定状态栏的样式；更多相关的信息请参考iPhone应用程序编程指南。）设置是否应该采用动画方式显示状态栏颜色的改变。（请注意，动画效果会使旧的状态栏一直滑出屏幕，最后消失，同时新的状态栏会滑动到相应的位置上。）
图 6-2 状态栏的三种样式
请确保状态栏的外观与您的应用程序的其余部分能够协调搭配。例如，如果导航栏是不透明的，就要避免使用半透明的状态栏。
导航栏
导航栏位于应用程序屏幕的上边缘，在状态栏之下。导航栏通常会显示当前视图的标题，包含导航控件，并在适当的情况下也可以包含作用于视图内容的控件。在效率型应用程序（详见“效率型应用程序”）中，导航栏非常有用，因为这些应用程序通常会按照层次结构显示信息。
导航栏有两种用途：
激活应用程序中不同视图之间的导航
提供一些控件，用于管理视图中的条目
图 6-3 显示了这两种用途的示例。
图 6-3 包含导航控件和内容管理控件的导航栏
导航栏的内容
导航栏可以根据当前视图标题的宽度居中显示标题，如图6-4所示。效率型应用程序中的初始视图应该包含一条导航栏，上面只需显示第一个视图的标题，这是因为用户还没有切换到其它位置。
图 6-4 显示当前视图标题的导航栏
一旦用户切换到另一个视图，导航栏就应该将它的标题更改为新视图的标题，并且应该提供一个返回按钮，标记为先前视图的标题。例如，图6-5显示了“日期和时间”设置中的导航栏，该设置属于“常规”设置视图中的一部分。
图 6-5 包含导航控件的导航栏
标准的返回按钮为用户提供了一种返回到先前屏幕的可靠方式，所以一定不要改变该按钮的行为。特别地，您应该避免创建多段的返回按钮，比如图6-6中所示的按钮。
图 6-6 不推荐多段的返回按钮
使用多段的返回按钮会引起以下列问题：
多段返回按钮持续增长的宽度会占用显示当前视图标题的空间。
无法表明单独某一段的选定状态。
段越多，每一段的可点击区域就越小，这使得用户很难准确点击到特定的某一段。
当用户浏览层次比较深时，无法确定显示哪些层的内容。
如果您认为没有多段返回按钮的帮助来显示路径，用户可能会感到迷惑，那么这也就意味着用户必须浏览很深的信息层次才能找到他们所需要的内容。为了解决这个问题，您应该尽量将信息层次扁平化。
除了返回按钮之外，导航栏还可以在标题的右侧包含另一个按钮。如果您不需要显示返回按钮（由于您的应用程序不支持分层导航），您也可以选择在标题的左侧显示一个作用于视图内容的按钮，比如“编辑”按钮。图6-7显示了这样的一个例子。
图 6-7 包含用于管理视图内容的控件的导航栏
要了解如何在您的应用程序中实现导航栏，请参考“导航控制器”。
正如您在上述示例中所见，导航栏上的按钮周围有一圈带边角的框。在iPhone OS中，这种样式被称为边框样式。导航栏的所有控件都要使用边框样式。事实上，即使您在导航栏上放置一个无格式（没有边框）的控件，它也会自动转换为有边框的样式。
您可以设计自己的图标用作导航栏的按钮，或者您也可以利用iPhone OS提供的预定义按钮。关于您可以使用的按钮相关的更多信息，请参考“用于工具栏和导航栏的标准按钮”。
虽然您可以为所有在导航栏中显示的文本指定字体，但为了可读性，推荐您使用系统字体。当您使用适当的UIKit编程接口创建导航栏时，其标题将自动采用系统字体来显示。
导航栏的尺寸和颜色
当设备的方向由纵向变为横向时，导航栏的高度也会自动随之改变（您不应该通过编程的方式指定它的高度）。设备处于横向时，窄一点的导航栏可以为屏幕上的内容留出更大的空间。您在设计导航栏控件的图标和设计屏幕上的布局时，一定要将这种高度上的差异计算在内。
您可以指定导航栏的颜色和半透明效果，以和您的应用程序的整体外观以及其它栏目（即工具栏，标签栏和状态栏）一致。您可以使用自定义颜色或选择下列标准颜色中的一种：
蓝色（默认颜色）
黑色
如果能对您的应用程序的外观有所帮助，您还可以为导航栏添加半透明效果。当您使用半透明的导航栏时，屏幕会给人感觉具有更大的可视区域，这在设备横向放置时效果非常理想。一定要避免将半透明的导航栏和黑色不透明的状态栏混合使用（然而半透明的导航栏可以同灰色不透明的状态栏一起显示）。
导航栏的外观要力争与应用程序中的其它栏目的外观保持一致。例如，如果您使用半透明的导航栏，就不要将它与不透明的工具栏一起使用。此外，请避免在同一方向的不同屏幕中改变导航栏的颜色或半透明效果。
工具栏
如果您的应用程序为用户提供了一系列可在当前上下文中执行的动作，那么您可以为用户提供一个工具栏。工具栏位于屏幕的下边缘，它包含若干按钮，这些按钮用于执行与当前视图中的对象相关的动作。工具栏不是用来切换应用程序的不同模式的。如果您需要这样做，您应该使用标签栏而非工具栏（更多信息请参考“标签栏”）。
例如，当用户在邮件应用程序中查看消息时，应用程序提供了一个工具栏，除了查收新邮件和撰写新邮件之外，工具栏中还包含了用于删除，回复和移动消息的项。通过这样的方式，用户即使停留在消息查看的上下文环境中，也仍然可以使用他们所需的命令来管理他们的电子邮件。图6-8显示了这个场景。
图 6-8 当前上下文下提供功能的工具栏
工具栏的内容
工具栏在其宽度范围内等距离地显示工具栏上的项。对于工具栏上显示的项，最好对其数目加以限制，这样用户可以轻松地点击到他们所需的项。我们向您推荐的用户界面元素的点击区域为44 x 44像素，因此，为用户提供五个以下的工具栏项是比较合理的。图6-9中的例子向您展示了一个各项间距适中的工具栏示例。
图 6-9 间距适当的工具栏
图6-8和图6-9中的项都没有边框。在iPhone OS中，这种样式叫做无格式样式。（关于边框样式的例子请参考图6-7。）虽然您既可以在工具栏中使用带边框样式的按钮，也可以使用无格式按钮，但是您不要将这两种样式在同一工具栏中混合使用。
您可以为工具栏按钮自行设计图标，或者您也可以充分利用iPhone OS提供的预定义按钮。（关于可以使用的按钮的更多信息，请参考“用于工具栏和导航栏的标准按钮”。）如果您选择创建自定义的工具栏按钮，请尽可能保持它们的尺寸相近，以获得均匀而又不失吸引力的外观。
工具栏的尺寸和颜色
当设备的方向由纵向变为横向时，工具栏的高度也会自动随之改变（您不应该在程序中指定它的高度）。设备处于横向时，窄一点的工具栏可以为屏幕上的内容留出更大的空间。您在设计工具栏按钮的图标和设计屏幕上的布局时，一定要将这种高度上的差异计算在内。
您可以指定工具栏的颜色和半透明效果，以和应用程序的整体外观以及其它栏目（即导航栏，标签栏和状态栏）一致。您可以使用自定义颜色或选择下列标准颜色中的一种：
蓝色（默认颜色）
黑色
如果能对您的应用程序的外观有所帮助，您还可以为工具栏添加半透明效果。当您使用半透明的工具栏时，屏幕会给人感觉具有更大的可视区域，这在设备横向放置时效果非常理想。
工具栏的外观要力争与应用程序中的其它栏目的外观保持一致。例如，如果您使用半透明的工具栏，就不要将它与不透明的导航栏一起使用。此外，请避免在同一方向的不同屏幕中改变工具栏的颜色或半透明效果。
标签栏
如果您的应用程序为同一组数据提供了不同的视图，或者与应用程序的整体功能相关的不同子任务，您可能会想要使用标签栏。标签栏出现在屏幕的下边缘。
标签栏使用户能够在应用程序的不同模式或不同视图之间进行转换，并且用户应该能够从应用程序的任何地方进入这些模式。但是，标签栏绝不应该被当做工具栏使用，区别在于工具栏上的按钮是对当前模式下的元素起作用的（有关工具栏的更多信息请参考“工具栏”）。
例如，在iPhone中，iPod使用了播客，艺术家，视频和播放列表等标签栏，使得用户能够在他们的媒体收藏中选择他们所关注的部分。另外，时钟应用程序也使用了标签栏，让用户访问该程序的四项功能，即“世界时钟”，“闹钟”，“秒表”和“计时器”。图6-10显示了在标签栏中选择标签是如何改变时钟程序的视图的。请注意图6-10中的标签栏，在时钟应用程序的不同模式中是如何保持始终可见的。这使得用户能够很容易地看到他们正处于哪种模式，并且不论当前处于哪种模式都能访问时钟应用程序的所有模式。
图 6-10 使用标签栏切换应用程序视图
标签栏使用标签显示图标和文本，这些标签的宽度一致，并且都以黑色为背景。当一个标签被选中时，它的背景变亮，标签中的图像也会高亮显示。图6-11显示了这一场景。
图 6-11 标签栏中被选中的标签
注意： 不管设备的方向如何变化，标签栏不会改变它的不透明性和高度。
iPhone OS为标签提供了一系列图标，比如像图6-11中“功能”和“书签”标签项那样的图标。如果您选择使用这些图标，请确保对它们的使用符合图标所表达的意思。关于您可以使用的标签栏图标的更多信息，请参考“用于标签栏的标准图标”。
提供附加标签
如果您的应用程序的标签栏只包含五个或五个以下的标签，那么iPhone OS可以在标签栏上等距离地将它们全部显示出来，如图6-12所示。
图 6-12 iPhone OS的标签栏最多可显示五个标签
如果您的应用程序的标签栏包含的标签数目超过五个，iPhone OS会在标签栏上显示四个标签，并添加一个“更多”标签，如图6-11所示。
用户点击“更多”标签后，能够在一个单独的屏幕中查看附加标签的列表，如图6-13所示。
图 6-13 当用户点击“更多”标签时显示附加标签
在“更多”屏幕中同样能够包含一个“编辑”按钮，用户可以通过点击该按钮来配置标签栏，使其显示用户最常用的标签。例如，当用户在iPod程序的“更多”屏幕上点击“编辑”按钮后，他们会看到如图6-14 所示的“配置”屏幕。
图 6-14 当应用程序具有五个以上的标签时，用户可选择在标签栏上显示他们最喜爱的标签
请注意iPod在以上三处（标签栏，“更多”屏幕和“配置”屏幕）都使用了相同的标签图标。这有助于使用户确定不管该图标出现在哪里，它都代表相同的意思。
为标签栏上的标签做标记
您可以在标签上显示一种标记，通过这种低调的，不十分显眼的方式与用户进行通信。在用户的任务或上下文环境中可能有些信息并非不可或缺，但它们对用户很有帮助，因此做标记的反馈方式就很适合于传递这些信息。
通过在一个特定的标签上做标记，您可以把标记所表达的信息和您的应用程序中的一种特定模式—甚至是非当前模式—联系在一起。图6-15显示了一个在标签上做标记的例子。
图 6-15 标签栏上传达信息的标记
请注意，如果您注册了苹果通知推送服务并且用户允许显示标记，那么您也可以在应用程序的主屏幕上显示标记。请参考“启用推送通知”来详细了解这些内容是如何实现的。
导航栏，标签栏，工具栏和状态栏相关推荐
- ios状态栏，导航栏，工具栏，tab栏的位置，附图
在iOS应用程序开发时,UIKit 框架提供了大量的UI元素共开发者使用.但开发者设计应用程序的用户界面时,一定要记得用户对于系统内置的那一套应用程序已经非常熟悉,所以开发者一定要正确的使用这些UI元 ...
- IOS界面元素四栏（状态栏、导航栏、工具栏、TAB栏）设计规范
1 栏 1.1 状态栏 状态栏展示于设备和当前环境相关的重要信息. 外观和行为:状态栏总是出现在屏幕顶部,包含网络连接.时间.电量等用户需要的信息 在iPhone上,状态栏的颜色会变.而 ...
- 分别用ToolBar和自定义导航栏实现沉浸式状态栏
一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...
- android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
- uniapp自定义导航栏遮住了手机状态栏问题
#uniapp在界面自定义导航栏之后,导航栏会自动占在屏幕的状态栏重叠上 解决办法 首先在pages.josn是页面里面加上"navigationStyle": "cus ...
- H5导航栏被IOS系统状态栏覆盖问题解决
问题描述 在开发h5小程序时发现安卓系统中页面正常显示,但在iPhone中导航栏被系统状态栏覆盖. 解决方法 env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定 ...
- 手机浏览器如何默认隐藏顶部导航栏和底部的状态栏，求大神支招！！！
目前已试用了mate标签处理,但只有QQ浏览器可以其它浏览器都不兼容,js没有达到预期效果只能上滑才能隐藏,想要默认隐藏, 以下是我用添加的mate标签和js方法: <meta name=&qu ...
- 导航栏、标签栏、工具栏、状态栏
在iPhone屏幕中,状态栏占用20点,导航栏(或工具栏)占用44点,标签栏占用49点.实际上, 这些在iPhone屏幕和iPad上也持不变. UINavigationBar-导航栏(导航视图) 与导 ...
- IOS 学习笔记 Toolbar NavigationBar 导航栏 工具栏
Toolbar使用gif图展示效果图: NavigationBar使用gif效果图 导航栏和工具栏(UIToolbar and NavigationBar) 工具栏和导航栏实际上是有很大差距的,这里放 ...
最新文章
- pypy的安装及使用介绍
- python编程 从入门到实践怎么样-python编程从入门到实践这本书怎么样
- win10系统安装Redis3.2.100
- 树莓派4b设置RTC时钟模块DS3231
- 给大家介绍一个好用的数据分析框架
- Git add 常见用法
- 28.卷1(套接字联网API)---原始套接字
- 【代码优化】equals深入理解
- cad2010多个文件并排显示_win10系统下CAD打不开多个窗口、文件如何解决
- C语言--三次方程数值求解
- 保付代理和供应链金融业务大纲
- 从身份证号获取身份证信息
- 远程oracle 不通,Oracle开放1521端口 telnet不通解决办法
- 软考真题的重要性不用再强调了吧
- java mock私有方法_JMockit Mock 私有方法和私有属性
- 日志系统新贵，Loki到底优秀在哪里？
- Python 使用xlsxwriter绘制Excel表格
- 编程生成一个瓶子(1)
- 利率市场化冲击传统资产负债管理 金融壹账通助力银行科技转型
- 6D姿态估计算法汇总