Android设计之Navigation Drawer（左侧滑出导航、导航抽屉）

navigation
drawer是一个面板，它从屏幕的左边缘滑入用来展示app的主要导航选项。

显示navigation
drawer

用户可以通过滑动屏幕左侧或者点击action bar上的相关的icon来打开navigation
drawer。

当navigation
drawer滑入屏幕时，它会覆盖屏幕上原来的内容（但action bar除外）。当navigation drawer滑入完成，action bar会用app name来代替当前的action bar title并且移除与navigation
drawer下面的view的上下文相关的action选项。那个覆盖按钮和帮助按钮是可见的（没有被移除）。



用户可以通过点击navigation
drawe指示器来打开navigation drawe面板

因为navigation
drawer是短暂的，它使得视图更加简单。当然你也可以在导航层次结构的更深层次使用它们，从而允许用户从任何位置切换到应用程重要的screen。



从任意位置打开navigation
drawer

隐藏navigation
drawer

当navigation
drawer已经完全展开，用户可以通过以下几种方式来隐藏navigation drawer：

触摸navigation drawer面板外部的内容

从屏幕的任意位置滑动到屏幕左侧
触摸action bar上的app icon/title
按下后退键

何时使用navigation drawer

navigation drawer并不是通过spinner 或者 tab实现的一般的顶级导航栏的替换者。你的应用程序的结构应指导你选择顶级视图切换的模式。更多关于顶级视图切换机制的信息，看Application
Structure。 

下面是几个比较适合使用navigation drawer的场景：

超过3个顶层视图

对于要同时显示大量的导航时navigation drawer是相当有用的。建议当有多于三个独一无二的顶层视图时使用navigation drawer；否则，建议使用固定的标签作为顶层导航会更容易被发现和交互。

从低级别跨至navigation drawer
假如你的app要求从低级别screen之间跨至导航，那就可以考虑使用navigation drawer。因为它可以从App的任何地方访问到，navigation drawe能够高效地使从一个低级层次的screen导航至另外一个重要的地方（即迅速的从一个模块的screen到另一个模块的screen）。



navigation drawer使得在低级层次视图间进行导航成为了可能

假如你的app有很深的分支结构的话，你想仅仅通过UP按钮和BACK按钮回退到顶级层次视图那将会是一件重复而且麻烦的事情。由于在App的任何地方都可以访问到navigation drawer，所以导航至顶层视图很快捷。



navigation drawer允许你快捷跳转至顶层视图

Navigation Hubs（导航中心）

navigation drawer反应了你的App结构，并且显示你主要的导航项目。navigation hubs是用户从App的一个地方跳转至另一个地方需要频繁访问的地方。至少可以说，navigation hubs是一个丁层视图，因为它相当于你的App的重要功能区。

假如你的App视图纵向很深，你可以在经常访问的底层视图上添加screen使得它们也可以访问navigation hubs。



navigation drawer包含App所有的navigation hubs，包含顶层视图和一些重要的低层视图。



为了方便在navigation hubs上访问到navigation drawer，所有的screen上在action bar中都应该在App icon的旁边有一个navigation drawer 指示器对应着一个到navigation drawer的入口。只要点击这个App icon将会使得navigation drawer从屏幕左侧滑出。

所有其他低级别的screens也可以在App icon旁边展示传统的UP指示器，这个drawer也是可访问到的，但是在action bar中不推荐这么干。

App icon with navigation drawer indicator

Content of the Navigation Drawer（导航抽屉的内容）

Keep 在navigation drawer（导航抽屉）上navigation hubs（导航集线器）以列表项的形式进行展现 · 一个条码占一行。

Titles, icons, and counters（计数器）

你可以通过添加title（标题）的方式来组织导航选项的显示结构，这些标题是不可以点击的，仅仅是为了按照功能类型来对导航进行分组显示而已。

每个导航目标（navigation target）的icon和counters（计数器）是可选的，计数器用来通知用户导航条目相对应的视图的数据变化状态。

Collapsible navigation items

假如你有很多view包含下属view，你可以考虑用可拓展的item来包含它们以达到节省空间。

开始，可分裂项的初始状态取决于你。通常，所有顶层视图的入口在navigation drawer上都应该是可见的。假如你有很多可分裂项，你可以考虑折叠以让用户在navigation drawer上看到所有都是顶层视图的入口。

当用户从一个低层视图上打开navigation drawer时，展开与之相关的顶层视图对应的可分裂项（比如从视图5.x点开drawer，那么会展开TopView 5），这给与用户更加强烈的空间感。

Navigation Drawers and Action Bars（导航抽屉和操作栏）

当用户展开navigation drawer，任务焦点就会切换至从drawer选择一项。因为drawer不会覆盖action bar，用户可能不会意识到action bar中的items不从属于navigation drawer。

为了减少混淆，一旦drawer被展开，请调整action bar中的以下内容：

App icon
App name
移除掉action bar上与失去焦点的view上下文相关的action（如下图中刷新按钮、新建）。你应该保留全局相关的action（比如search）。
用预期的navigation target覆盖菜单（比如settings、help）。

Actions

不要把actions放置在navigation
drawer中。actions从属于action bar，而且用户期望它们出现在那里。请记住并不是所有的App都会使用navigation drawer模式。在一个简单区域中显示你的App的功能是很有诱惑力的，但请牢记你可以使用更大的图片来做到这一点。

action也适用于一些常见的navigation target，比如说Settings和Help。

Contextual action bars（上下文操作栏）

有时用户有可能会在一种上下文action bar替代App's action bar的状态，这通常会在用户选择文本或者点击并且按住的手势的情况下（当我们在用浏览器时选择文本进行复制时）。虽然上下文action bar是可见的，你还是应该允许用户可以打开navigation drawer（平时玩手机还真是没注意到这一点）。但是，当navigation
drawer打开时用标准action bar替代上下文action bar。当用户隐藏drawer时，重新显示上下文菜单。



当navigation
drawer可见时隐藏上下文菜单

Style（设计风格）

navigation drawer的宽度取决于你要显示的内容，但是它有一个极限值=240dp和极大值=320dp。每一行的高度不低于48dp。其他的一些间距看下图指示：



navigation drawer 的布局准则
选择navigation drawer的背景应该和你的App的主题相匹配。下面示例为Holo Light和Holo dark主题的drawer。



Holo light的navig drawer和Holo dark的App

原文链接：http://developer.android.com/design/patterns/navigation-drawer.html