> 编写:[Lin-H](https://github.com/Lin-H) - 原文: [http://developer.android.com/training/implementing-navigation/nav-drawer.html](http://developer.android.com/training/implementing-navigation/nav-drawer.html)
Navigation drawer是一个在屏幕左侧边缘显示导航选项的面板。大部分时候是隐藏的，当用户从屏幕左侧划屏，或在top level模式的app中点击action bar中的app图标时，才会显示。
这节课叙述如何使用[Support Library](http://developer.android.com/tools/support-library/index.html)中的[DrawerLayout](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html) API，来实现navigation drawer。
> **Navigation Drawer 设计**：在你决定在你的app中使用Navigation Drawer之前，你应该先理解在[Navigation Drawer](http://developer.android.com/design/patterns/navigation-drawer.html) design guide中定义的使用情况和设计准则。
### 创建一个Drawer Layout
要添加一个navigation drawer，在你的用户界面layout中声明一个用作root view(根视图)的[DrawerLayout](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html)对象。在[DrawerLayout](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html)中为屏幕添加一个包含主要内容的view(当drawer隐藏时的主layout)，和其他一些包含navigation drawer内容的view。
例如，下面的layout使用了有两个子视图(child view)的[DrawerLayout](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html):一个[FrameLayout](http://developer.android.com/reference/android/widget/FrameLayout.html)用来包含主要内容(在运行时被[Fragment](http://developer.android.com/reference/android/app/Fragment.html)填入)，和一个navigation drawer使用的[ListView](http://developer.android.com/reference/android/widget/ListView.html)。
~~~
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 包含主要内容的 view -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- navigation drawer(抽屉式导航) -->
<ListView android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
~~~
这个layout展示了一些layout的重要特点:
-
主内容view(上面的[FrameLayout](http://developer.android.com/reference/android/widget/FrameLayout.html))，在[DrawerLayout](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html)中**必须是第一个子视图**，因为XML的顺序代表着Z轴(垂直于手机屏幕)的顺序，并且drawer必须在内容的前端。
-
主内容view被设置为匹配父视图的宽和高，因为当navigation drawer隐藏时，主内容表示整个UI部分。
-
drawer视图([ListView](http://developer.android.com/reference/android/widget/ListView.html))必须使用`android:layout_gravity`属性**指定它的horizontal gravity**。为了支持从右边阅读的语言(right-to-left(RTL) language)，指定它的值为`"start"`而不是`"left"`(当layout是RTL时drawer在右边显示)。
-
drawer视图以`dp`为单位指定它的宽和高来匹配父视图。drawer的宽度不能大于320dp，这样用户总能看到部分主内容。
### 初始化Drawer List
在你的[activity](# "An activity represents a single screen with a user interface.")中，首先要做的事就是要初始化drawer的item列表。这要根据你的app内容来处理，但是一个navigation drawer通常由一个[ListView](http://developer.android.com/reference/android/widget/ListView.html)组成，所以列表应该通过一个[Adapter](http://developer.android.com/reference/android/widget/Adapter.html)(例如[ArrayAdapter](http://developer.android.com/reference/android/widget/ArrayAdapter.html)或[SimpleCursorAdapter](http://developer.android.com/reference/android/widget/SimpleCursorAdapter.html))填入。
例如，如何使用一个字符串数组([string array](http://developer.android.com/guide/topics/resources/string-resource.html#StringArray))来初始化导航列表(navigation list):
~~~
public class MainActivity extends Activity {
private String[] mPlanetTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
// 为list view设置adapter
mDrawerList.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, mPlanetTitles));
// 为list设置click listener
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
...
}
}
~~~
这段代码也调用了[setOnItemClickListener()](http://developer.android.com/reference/android/widget/AdapterView.html#setOnItemClickListener%28android.widget.AdapterView.OnItemClickListener%29)来接收navigation drawer列表的点击事件。下一节会说明如何实现这个接口，并且当用户选择一个item时如何改变内容视图(content view)。
### 处理导航的点击事件
当用户选择drawer列表中的item，系统会调用在[setOnItemClickListener()](http://developer.android.com/reference/android/widget/AdapterView.html#setOnItemClickListener%28android.widget.AdapterView.OnItemClickListener%29)中所设置的[OnItemClickListener](http://developer.android.com/reference/android/widget/AdapterView.OnItemClickListener.html)的[onItemClick()](http://developer.android.com/reference/android/widget/AdapterView.OnItemClickListener.html#onItemClick%28android.widget.AdapterView%3C?%3E,%20android.view.View,%20int,%20long%29)。
在[onItemClick()](http://developer.android.com/reference/android/widget/AdapterView.OnItemClickListener.html#onItemClick%28android.widget.AdapterView%3C?%3E,%20android.view.View,%20int,%20long%29)方法中做什么，取决于你如何实现你的app结构([app structure](http://developer.android.com/design/patterns/app-structure.html))。在下面的例子中，每选择一个列表中的item，就插入一个不同的[Fragment](http://developer.android.com/reference/android/app/Fragment.html)到主内容视图中([FrameLayout](http://developer.android.com/reference/android/widget/FrameLayout.html)元素通过`R.id.content_frame` ID辨识):
~~~
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
selectItem(position);
}
}
/** 在主内容视图中交换fragment */
private void selectItem(int position) {
// 创建一个新的fragment并且根据行星的位置来显示
Fragment fragment = new PlanetFragment();
Bundle args = new Bundle();
args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
fragment.setArguments(args);
// 通过替换已存在的fragment来插入新的fragment
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.content_frame, fragment)
.commit();
// 高亮被选择的item, 更新标题, 并关闭drawer
mDrawerList.setItemChecked(position, true);
setTitle(mPlanetTitles[position]);
mDrawerLayout.closeDrawer(mDrawerList);
}
@Override
public void setTitle(CharSequence title) {
mTitle = title;
getActionBar().setTitle(mTitle);
}
~~~
### 监听打开和关闭事件
要监听drawer的打开和关闭事件，在你的[DrawerLayout](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html)中调用[setDrawerListener()](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html#setDrawerListener%28android.support.v4.widget.DrawerLayout.DrawerListener%29)，并传入一个[DrawerLayout.DrawerListener](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html)的实现。这个接口提供drawer事件的回调例如[onDrawerOpened()](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html#onDrawerOpened%28android.view.View%29)和[onDrawerClosed()](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html#onDrawerClosed%28android.view.View%29)。
但是，如果你的[activity](# "An activity represents a single screen with a user interface.")包含有[action bar](http://developer.android.com/guide/topics/ui/actionbar.html)可以不用实现[DrawerLayout.DrawerListener](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html)，你可以继承[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)来替代。[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)实现了[DrawerLayout.DrawerListener](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html)，所以你仍然可以重写这些回调。这么做也能使action bar图标和 navigation drawer的交互操作变得更容易(在下节详述)。
如[Navigation Drawer](http://developer.android.com/design/patterns/navigation-drawer.html) design guide中所述,当drawer可见时，你应该修改action bar的内容，比如改变标题和移除与主文字内容相关的action item。下面的代码向你说明如何通过[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)类的实例，重写[DrawerLayout.DrawerListener](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.DrawerListener.html)的回调方法来实现这个目的:
~~~
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mTitle = mDrawerTitle = getTitle();
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
/** 当drawer处于完全关闭的状态时调用 */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // 创建对onPrepareOptionsMenu()的调用
}
/** 当drawer处于完全打开的状态时调用 */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // 创建对onPrepareOptionsMenu()的调用
}
};
// 设置drawer触发器为DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
/* 当invalidateOptionsMenu()调用时调用 */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// 如果nav drawer是打开的, 隐藏与内容视图相关联的action items
boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
return super.onPrepareOptionsMenu(menu);
}
}
~~~
下一节会描述[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)的构造参数，和处理与action bar图标交互所需的其他步骤。
### 使用App图标来打开和关闭
用户可以在屏幕左侧使用划屏手势来打开和关闭navigation drawer，但是如果你使用[action bar](http://developer.android.com/guide/topics/ui/actionbar.html),你也应该允许用户通过点击app图标来打开或关闭。并且app图标也应该使用一个特殊的图标来指明navigation drawer的存在。你可以通过使用上一节所说的[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)来实现所有的这些操作。
要使[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)起作用，通过它的构造函数创建一个实例，需要用到以下参数:
-
[Activity](# "An activity represents a single screen with a user interface.")用来容纳drawer。
-
[DrawerLayout](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html)。
-
一个drawable资源用作drawer指示器。标准的navigation drawer可以在[Download the Action Bar Icon Pack](http://developer.android.com/downloads/design/Android_Design_Icons_20130926.zip)获的
-
一个字符串资源描述"打开抽屉"操作(便于访问)
-
一个字符串资源描述"关闭抽屉"操作(便于访问)
那么，不论你是否创建了用作drawer监听器的[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)的子类，你都需要在[activity](# "An activity represents a single screen with a user interface.")生命周期中的某些地方根据你的[ActionBarDrawerToggle](http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html)来调用。
~~~
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
...
public void onCreate(Bundle savedInstanceState) {
...
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this, /* 承载 Activity */
mDrawerLayout, /* DrawerLayout 对象 */
R.drawable.ic_drawer, /* nav drawer 图标用来替换'Up'符号 */
R.string.drawer_open, /* "打开 drawer" 描述 */
R.string.drawer_close /* "关闭 drawer" 描述 */
) {
/** 当drawer处于完全关闭的状态时调用 */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
}
/** 当drawer处于完全打开的状态时调用 */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
}
};
// 设置drawer触发器为DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// 在onRestoreInstanceState发生后，同步触发器状态.
mDrawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// 将事件传递给ActionBarDrawerToggle, 如果返回true，表示app 图标点击事件已经被处理
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// 处理你的其他action bar items...
return super.onOptionsItemSelected(item);
}
...
}
~~~
一个完整的navigation drawer例子,可以在原文页面顶端的sample下载
- 序言
- Android入门基础：从这里开始
- 建立第一个App
- 创建Android项目
- 执行Android程序
- 建立简单的用户界面
- 启动其他的Activity
- 添加ActionBar
- 建立ActionBar
- 添加Action按钮
- 自定义ActionBar的风格
- ActionBar的覆盖层叠
- 兼容不同的设备
- 适配不同的语言
- 适配不同的屏幕
- 适配不同的系统版本
- 管理Activity的生命周期
- 启动与销毁Activity
- 暂停与恢复Activity
- 停止与重启Activity
- 重新创建Activity
- 使用Fragment建立动态的UI
- 创建一个Fragment
- 建立灵活动态的UI
- Fragments之间的交互
- 数据保存
- 保存到Preference
- 保存到文件
- 保存到数据库
- 与其他应用的交互
- Intent的发送
- 接收Activity返回的结果
- Intent过滤
- Android分享操作
- 分享简单的数据
- 给其他App发送简单的数据
- 接收从其他App返回的数据
- 给ActionBar增加分享功能
- 分享文件
- 建立文件分享
- 分享文件
- 请求分享一个文件
- 获取文件信息
- 使用NFC分享文件
- 发送文件给其他设备
- 接收其他设备的文件
- Android多媒体
- 管理音频播放
- 控制音量与音频播放
- 管理音频焦点
- 兼容音频输出设备
- 拍照
- 简单的拍照
- 简单的录像
- 控制相机硬件
- 打印
- 打印照片
- 打印HTML文档
- 打印自定义文档
- Android图像与动画
- 高效显示Bitmap
- 高效加载大图
- 非UI线程处理Bitmap
- 缓存Bitmap
- 管理Bitmap的内存
- 在UI上显示Bitmap
- 使用OpenGL ES显示图像
- 建立OpenGL ES的环境
- 定义Shapes
- 绘制Shapes
- 运用投影与相机视图
- 添加移动
- 响应触摸事件
- 添加动画
- View间渐变
- 使用ViewPager实现屏幕侧滑
- 展示卡片翻转动画
- 缩放View
- 布局变更动画
- Android网络连接与云服务
- 无线连接设备
- 使得网络服务可发现
- 使用WiFi建立P2P连接
- 使用WiFi P2P服务
- 执行网络操作
- 连接到网络
- 管理网络
- 解析XML数据
- 高效下载
- 为网络访问更加高效而优化下载
- 最小化更新操作的影响
- 避免下载多余的数据
- 根据网络类型改变下载模式
- 云同步
- 使用备份API
- 使用Google Cloud Messaging
- 解决云同步的保存冲突
- 使用Sync Adapter传输数据
- 创建Stub授权器
- 创建Stub Content Provider
- 创建Sync Adpater
- 执行Sync Adpater
- 使用Volley执行网络数据传输
- 发送简单的网络请求
- 建立请求队列
- 创建标准的网络请求
- 实现自定义的网络请求
- Android联系人与位置信息
- Android联系人信息
- 获取联系人列表
- 获取联系人详情
- 使用Intents修改联系人信息
- 显示联系人头像
- Android位置信息
- 获取最后可知位置
- 获取位置更新
- 显示位置地址
- 创建和监视地理围栏
- Android可穿戴应用
- 赋予Notification可穿戴特性
- 创建Notification
- 在Notifcation中接收语音输入
- 为Notification添加显示页面
- 以Stack的方式显示Notifications
- 创建可穿戴的应用
- 创建并运行可穿戴应用
- 创建自定义的布局
- 添加语音功能
- 打包可穿戴应用
- 通过蓝牙进行调试
- 创建自定义的UI
- 定义Layouts
- 创建Cards
- 创建Lists
- 创建2D-Picker
- 创建确认界面
- 退出全屏的Activity
- 发送并同步数据
- 访问可穿戴数据层
- 同步数据单元
- 传输资源
- 发送与接收消息
- 处理数据层的事件
- Android TV应用
- 创建TV应用
- 创建TV应用的第一步
- 处理TV硬件部分
- 创建TV的布局文件
- 创建TV的导航栏
- 创建TV播放应用
- 创建目录浏览器
- 提供一个Card视图
- 创建详情页
- 显示正在播放卡片
- 帮助用户在TV上探索内容
- TV上的推荐内容
- 使得TV App能够被搜索
- 使用TV应用进行搜索
- 创建TV游戏应用
- 创建TV直播应用
- TV Apps Checklist
- Android企业级应用
- Ensuring Compatibility with Managed Profiles
- Implementing App Restrictions
- Building a Work Policy Controller
- Android交互设计
- 设计高效的导航
- 规划屏幕界面与他们之间的关系
- 为多种大小的屏幕进行规划
- 提供向下和横向导航
- 提供向上和历史导航
- 综合：设计样例 App
- 实现高效的导航
- 使用Tabs创建Swipe视图
- 创建抽屉导航
- 提供向上的导航
- 提供向后的导航
- 实现向下的导航
- 通知提示用户
- 建立Notification
- 当启动Activity时保留导航
- 更新Notification
- 使用BigView风格
- 显示Notification进度
- 增加搜索功能
- 建立搜索界面
- 保存并搜索数据
- 保持向下兼容
- 使得你的App内容可被Google搜索
- 为App内容开启深度链接
- 为索引指定App内容
- Android界面设计
- 为多屏幕设计
- 兼容不同的屏幕大小
- 兼容不同的屏幕密度
- 实现可适应的UI
- 创建自定义View
- 创建自定义的View类
- 实现自定义View的绘制
- 使得View可交互
- 优化自定义View
- 创建向后兼容的UI
- 抽象新的APIs
- 代理至新的APIs
- 使用旧的APIs实现新API的效果
- 使用版本敏感的组件
- 实现辅助功能
- 开发辅助程序
- 开发辅助服务
- 管理系统UI
- 淡化系统Bar
- 隐藏系统Bar
- 隐藏导航Bar
- 全屏沉浸式应用
- 响应UI可见性的变化
- 创建使用Material Design的应用
- 开始使用Material Design
- 使用Material的主题
- 创建Lists与Cards
- 定义Shadows与Clipping视图
- 使用Drawables
- 自定义动画
- 维护兼容性
- Android用户输入
- 使用触摸手势
- 检测常用的手势
- 跟踪手势移动
- Scroll手势动画
- 处理多触摸手势
- 拖拽与缩放
- 管理ViewGroup中的触摸事件
- 处理键盘输入
- 指定输入法类型
- 处理输入法可见性
- 兼容键盘导航
- 处理按键动作
- 兼容游戏控制器
- 处理控制器输入动作
- 支持不同的Android系统版本
- 支持多个控制器
- Android后台任务
- 在IntentService中执行后台任务
- 创建IntentService
- 发送工作任务到IntentService
- 报告后台任务执行状态
- 使用CursorLoader在后台加载数据
- 使用CursorLoader执行查询任务
- 处理查询的结果
- 管理设备的唤醒状态
- 保持设备的唤醒
- 制定重复定时的任务
- Android性能优化
- 管理应用的内存
- 代码性能优化建议
- 提升Layout的性能
- 优化layout的层级
- 使用include标签重用layouts
- 按需加载视图
- 使得ListView滑动顺畅
- 优化电池寿命
- 监测电量与充电状态
- 判断与监测Docking状态
- 判断与监测网络连接状态
- 根据需要操作Broadcast接受者
- 多线程操作
- 在一个线程中执行一段特定的代码
- 为多线程创建线程池
- 启动与停止线程池中的线程
- 与UI线程通信
- 避免出现程序无响应ANR
- JNI使用指南
- 优化多核处理器(SMP)下的Android程序
- Android安全与隐私
- Security Tips
- 使用HTTPS与SSL
- 为防止SSL漏洞而更新Security
- 使用设备管理条例增强安全性
- Android测试程序
- 测试你的Activity
- 建立测试环境
- 创建与执行测试用例
- 测试UI组件
- 创建单元测试
- 创建功能测试
- 術語表