导航抽屉 Original Version

[

开发者文档

Creating a Navigation Drawer

](http://developer.android.com/training/implementing-navigation/nav-drawer.html)
导航抽屉是一个从屏幕左边滑入的面板，用于显示应用的主要导航项目。

显示导航抽屉

用户可以通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉。

导航抽屉覆盖在内容之上，但不覆盖操作栏。当导航抽屉完全打开后，操作栏的标题需要更换为应用的名称，而不是显示当前视图的名称，并且关闭所有和当前视图相关的操作按钮。操作栏的“更多操作”菜单按钮不需要关闭，以保证用户可以随时访问“设置”和“帮助”。

用户可以通过触摸导航抽屉提示打开抽屉面板。

因为导航抽屉是隐藏的，所以可以使你的应用界面更加清爽。你还可以通过导航抽屉，使用户从很深的操作页面直接回到应用的重要顶层视图。

在屏幕的任何位置从左向右滑动都可以打开导航抽屉。

关闭导航抽屉

当导航抽屉打开时，用户可以通过以下方式关闭它:

• 触摸导航抽屉以外的内容
• 从屏幕的任何位置向左滑动 (包括从屏幕的右边缘开始)
• 触摸应用操作栏的图标或者标题
• 按“返回”按钮

在什么情景使用导航抽屉

导航抽屉作为顶层导航控件，不仅仅是下拉菜单 (spinners) 和标签的简单替换。你应当根据应用的实际需求选择何种导航控件。阅读 应用结构 一节，了解更多细节。

以下的一些情景就比较适合使用导航抽屉:

有超过 3 个顶层视图

导航抽屉比较适合同时显示多个导航目标。如果你的应用有超过 3 个顶层视图，应当选择导航抽屉；如果不超过 3 个，固定标签则是更合适的选择。

在深层视图之间导航

如果你的应用需要在深层次的视图之间导航，导航抽屉会是比较好的选择。因为在应用的任何位置都可以访问导航抽屉，所以如果需要从深层次的视图直接切换到其他视图中，导航抽屉比较便捷。

通过导航抽屉在深层视图之间导航。

非常深层次的导航

如果你的应用有非常深层次的视图，用户使用“向上”或“返回”按钮导航到顶层视图就变得比较麻烦。此时如果提供导航抽屉这种更容易访问的方案，就会使得应用中的导航变的更加容易。

使用导航抽屉可以直接的回到应用的顶层视图，不需要多次使用“向上”或“返回”按钮。

导航项目

导航抽屉主要用于显示应用中的重要视图，所以放置在导航抽屉中的项目都是用户经常使用的。一般情况下，导航抽屉中放置的都是应用的顶层视图。

如果你的应用有很深层次的视图，也可以将一些经常访问的深层次视图放入导航抽屉。

导航抽屉中显示了应用的常用视图，包括顶层视图和一些深层次视图。

为了提示导航抽屉的存在，所有导航抽屉中的视图都应该在操作栏的应用图标旁显示导航抽屉提示。当用户触摸应用图标时，导航抽屉从屏幕左边滑入。

其他视图的操作栏则显示标准的“向上”提示，导航抽屉此时仅能通过在屏幕边缘向左滑动打开。

带有导航抽屉提示的应用图标。

导航抽屉内容

确保导航抽屉用于应用的视图导航，并且导航抽屉中的每项占一行。

标题栏、图标和数字提示

你可以在导航抽屉中放置标题栏，通过不同的标题组织导航项目。标题栏不需要对触摸操作有反馈。

可以在导航项目前面放置图标，在最后放置数字提示，数字提示用于显示对应视图中变化的项目。

使用标题栏和图标组织导航抽屉项目。

可折叠导航项目的右侧是折叠项目开关。

可折叠的导航项目

如果你有很多次级的功能视图，考虑使用可折叠的导航项目，以减少空间占用。可折叠的导航项目将变成两个部分，左边是父视图的导航按钮，右边则是折叠项目的开关。

在启动时，是否显示折叠的项目内容取决于你的应用需求。不过我们推荐一直显示顶层视图项目，如果有很多的折叠项目，那么将它们都折叠起来，以保证用户能看到顶层视图项目。

当用户在深层次视图打开导航抽屉时，展开相关的折叠项目，并高亮当前视图，使得用户明了自己所处的位置。

导航抽屉和操作栏

当导航抽屉打开时，用户的主要目的是选择不同的应用视图。注意导航抽屉并不覆盖操作栏，但用户可能不会注意到此时操作栏和导航抽屉的项目没有什么关系。

为了减少混乱，当导航抽屉打开时，请按以下指导调整操作栏内容:

• 显示应用图标
• 显示应用名称
• 在操作栏上移除与当前视图相关的操作按钮 (例如“新建”和“刷新”)，但可以保持全局操作按钮，例如“搜索”。
• “更多操作”菜单中仍然显示导航目标，例如“设置”和“帮助”。
  当导航抽屉打开时，清理操作栏，移除上下文相关的操作按钮，并显示应用的名称。

将操作按钮放置于操作栏右边或者“更多操作”菜单中。

不要将操作按钮放置在导航抽屉中，操作按钮应当始终放置在操作栏上。请记住不是所有应用都使用导航抽屉模式，所以为了保持一致性，请和其他应用一样，将操作按钮放置在操作栏右边或者“更多操作”菜单中。

对于一些导航目标也同样适用统一的模式，例如对于“设置”和“帮助”，请将它们放置于“更多操作”菜单中。

将“设置”和“帮助”放置于“更多操作”菜单中。

上下文操作栏

有时用户处在上下文操作栏 (CAB) 状态中，例如正在选择文字或者项目，准备执行操作。当显示上下文操作栏时，仍然可以通过在屏幕边缘向右滑动打开导航抽屉。请注意，此时打开导航抽屉后，应当关闭上下文操作栏，显示标准的操作栏。当导航抽屉关闭后，重新显示上下文操作栏。

当导航抽屉打开后，隐藏上下文操作栏。

如果用户选择了项目，却通过导航抽屉离开该视图，请在离开视图后自动取消之前的选择。

交互细节

首次启动时提示导航抽屉

当你的应用首次启动时，请打开导航抽屉，直到用户手动关闭它。这样确保用户了解如何使用导航抽屉，并且看到导航抽屉中有哪些项目。以后的应用启动可以不再自动打开导航抽屉。

应用首次启动时，自动打开导航抽屉，确保用户了解如何使用导航抽屉。

给用户小提示

当用户触摸屏幕左边缘的时候 (左边缘 20dp 之内的位置)，稍稍显示一点导航抽屉，提供有效的反馈，并且提示用户。

当触摸屏幕左边缘时，略微打开导航抽屉。

高亮

如果当前视图是导航抽屉中的一项，打开导航抽屉时高亮该项目，如果不是则不要高亮任何项目。

导航抽屉对全局导航的影响

导航抽屉是除了标签栏和下拉菜单 (spinner) 之外的另一种顶层导航模式，为了保持一致性，使用导航抽屉的应用仍然需要遵守“返回”和“向上”按钮的设计要求。

请注意以下几点:

在顶层视图使用“返回”按钮

在顶层视图触摸“返回”按钮时，不要打开导航抽屉，而是根据设计要求返回当前任务的上一个应用或者返回“主屏幕”。

“返回”按钮不会打开导航菜单，而是按照导航设计要求回到之前的屏幕。

跨越多级视图的导航后使用“返回”按钮

如果用户通过导航抽屉直接进入深层次的视图，并且该视图有父视图，那么“返回”按钮栈应当被清空，且触摸“返回”按钮后返回其父视图。该导航行为类似于直接从通知进入应用的深层次视图。

如果目标视图有父视图，清空“返回”按钮栈。

样式

导航抽屉的宽度可以根据应用的内容做出调整，但是请保持在 240dp 到 320dp 之间，其中每个项目的高度也不应低于 48dp。请参考 度量单位和网格 设计导航抽屉的布局。

导航抽屉的布局原则。

选择适合应用的导航抽屉背景色，例如以下两个例子的背景色分别适用于浅色 Holo 主题和深色 Holo 主题。

浅色 Holo 主题和深色 Holo 主题中的导航抽屉。

检查清单

无论您使用标准的导航抽屉还是自己实现的类似导航栏，请注意保持以下的设计模式:

• 始终显示操作栏，并根据需要调整内容。

• 导航抽屉覆盖在内容之上。

• 导航抽屉中的所有视图都在操作栏提供带有导航抽屉提示的应用图标，并可以通过触摸图标打开导航抽屉。

• 使用新设计的滑入滑出动画。

• 不包含在导航抽屉中的视图都在操作栏提供标准的“向上”提示。

• 保持标准的“向上”和“返回”按钮行为。