创建抽屉式导航(navigation drawer)

编写:Lin-H - 原文: http://developer.android.com/training/implementing-navigation/nav-drawer.html

Navigation drawer是一个在屏幕左侧边缘显示导航选项的面板。大部分时候是隐藏的，当用户从屏幕左侧划屏，或在top level模式的app中点击action bar中的app图标时，才会显示。

这节课叙述如何使用Support Library中的DrawerLayout API，来实现navigation drawer。

Navigation Drawer 设计：在你决定在你的app中使用Navigation Drawer之前，你应该先理解在Navigation Drawer design guide中定义的使用情况和设计准则。

创建一个Drawer Layout

要添加一个navigation drawer，在你的用户界面layout中声明一个用作root view(根视图)的DrawerLayout对象。在DrawerLayout中为屏幕添加一个包含主要内容的view(当drawer隐藏时的主layout)，和其他一些包含navigation drawer内容的view。

例如，下面的layout使用了有两个子视图(child view)的DrawerLayout:一个FrameLayout用来包含主要内容(在运行时被Fragment填入)，和一个navigation drawer使用的ListView。

  1. <android.support.v4.widget.DrawerLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/drawer_layout"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <!-- 包含主要内容的 view -->
  7.     <FrameLayout
  8.         android:id="@+id/content_frame"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent" />
  11.     <!-- navigation drawer(抽屉式导航) -->
  12.     <ListView android:id="@+id/left_drawer"
  13.         android:layout_width="240dp"
  14.         android:layout_height="match_parent"
  15.         android:layout_gravity="start"
  16.         android:choiceMode="singleChoice"
  17.         android:divider="@android:color/transparent"
  18.         android:dividerHeight="0dp"
  19.         android:background="#111"/>
  20. </android.support.v4.widget.DrawerLayout>

这个layout展示了一些layout的重要特点:

  • 主内容view(上面的FrameLayout)，在DrawerLayout中必须是第一个子视图，因为XML的顺序代表着Z轴(垂直于手机屏幕)的顺序，并且drawer必须在内容的前端。

  • 主内容view被设置为匹配父视图的宽和高，因为当navigation drawer隐藏时，主内容表示整个UI部分。

  • drawer视图(ListView)必须使用android:layout_gravity属性指定它的horizontal gravity。为了支持从右边阅读的语言(right-to-left(RTL) language)，指定它的值为"start"而不是"left"(当layout是RTL时drawer在右边显示)。

  • drawer视图以dp为单位指定它的宽和高来匹配父视图。drawer的宽度不能大于320dp，这样用户总能看到部分主内容。

初始化Drawer List

在你的activity中，首先要做的事就是要初始化drawer的item列表。这要根据你的app内容来处理，但是一个navigation drawer通常由一个ListView组成，所以列表应该通过一个Adapter(例如ArrayAdapter或SimpleCursorAdapter)填入。

例如，如何使用一个字符串数组(string array)来初始化导航列表(navigation list):

  1. public class MainActivity extends Activity {
  2.     private String[] mPlanetTitles;
  3.     private DrawerLayout mDrawerLayout;
  4.     private ListView mDrawerList;
  5.     ...
  7.     @Override
  8.     public void onCreate(Bundle savedInstanceState) {
  9.         super.onCreate(savedInstanceState);
  10.         setContentView(R.layout.activity_main);
  12.         mPlanetTitles = getResources().getStringArray(R.array.planets_array);
  13.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  14.         mDrawerList = (ListView) findViewById(R.id.left_drawer);
  16.         // 为list view设置adapter
  17.         mDrawerList.setAdapter(new ArrayAdapter<String>(this,
  18.                 R.layout.drawer_list_item, mPlanetTitles));
  19.         // 为list设置click listener
  20.         mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
  22.         ...
  23.     }
  24. }

这段代码也调用了setOnItemClickListener()来接收navigation drawer列表的点击事件。下一节会说明如何实现这个接口，并且当用户选择一个item时如何改变内容视图(content view)。

处理导航的点击事件

当用户选择drawer列表中的item，系统会调用在setOnItemClickListener()中所设置的OnItemClickListener的onItemClick()。

在onItemClick()方法中做什么，取决于你如何实现你的app结构(app structure)。在下面的例子中，每选择一个列表中的item，就插入一个不同的Fragment到主内容视图中(FrameLayout元素通过R.id.content_frame ID辨识):

  1. private class DrawerItemClickListener implements ListView.OnItemClickListener {
  2.     @Override
  3.     public void onItemClick(AdapterView parent, View view, int position, long id) {
  4.         selectItem(position);
  5.     }
  6. }
  8. /** 在主内容视图中交换fragment */
  9. private void selectItem(int position) {
  10.     // 创建一个新的fragment并且根据行星的位置来显示
  11.     Fragment fragment = new PlanetFragment();
  12.     Bundle args = new Bundle();
  13.     args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
  14.     fragment.setArguments(args);
  16.     // 通过替换已存在的fragment来插入新的fragment
  17.     FragmentManager fragmentManager = getFragmentManager();
  18.     fragmentManager.beginTransaction()
  19.                    .replace(R.id.content_frame, fragment)
  20.                    .commit();
  22.     // 高亮被选择的item, 更新标题, 并关闭drawer
  23.     mDrawerList.setItemChecked(position, true);
  24.     setTitle(mPlanetTitles[position]);
  25.     mDrawerLayout.closeDrawer(mDrawerList);
  26. }
  28. @Override
  29. public void setTitle(CharSequence title) {
  30.     mTitle = title;
  31.     getActionBar().setTitle(mTitle);
  32. }

监听打开和关闭事件

要监听drawer的打开和关闭事件，在你的DrawerLayout中调用setDrawerListener()，并传入一个DrawerLayout.DrawerListener的实现。这个接口提供drawer事件的回调例如onDrawerOpened()和onDrawerClosed()。

但是，如果你的activity包含有action bar可以不用实现DrawerLayout.DrawerListener，你可以继承ActionBarDrawerToggle来替代。ActionBarDrawerToggle实现了DrawerLayout.DrawerListener，所以你仍然可以重写这些回调。这么做也能使action bar图标和 navigation drawer的交互操作变得更容易(在下节详述)。

如Navigation Drawer design guide中所述,当drawer可见时，你应该修改action bar的内容，比如改变标题和移除与主文字内容相关的action item。下面的代码向你说明如何通过ActionBarDrawerToggle类的实例，重写DrawerLayout.DrawerListener的回调方法来实现这个目的:

  1. public class MainActivity extends Activity {
  2.     private DrawerLayout mDrawerLayout;
  3.     private ActionBarDrawerToggle mDrawerToggle;
  4.     private CharSequence mDrawerTitle;
  5.     private CharSequence mTitle;
  6.     ...
  8.     @Override
  9.     public void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         ...
  14.         mTitle = mDrawerTitle = getTitle();
  15.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  16.         mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
  17.                 R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
  19.             /** 当drawer处于完全关闭的状态时调用 */
  20.             public void onDrawerClosed(View view) {
  21.                 super.onDrawerClosed(view);
  22.                 getActionBar().setTitle(mTitle);
  23.                 invalidateOptionsMenu(); // 创建对onPrepareOptionsMenu()的调用
  24.             }
  26.             /** 当drawer处于完全打开的状态时调用 */
  27.             public void onDrawerOpened(View drawerView) {
  28.                 super.onDrawerOpened(drawerView);
  29.                 getActionBar().setTitle(mDrawerTitle);
  30.                 invalidateOptionsMenu(); // 创建对onPrepareOptionsMenu()的调用
  31.             }
  32.         };
  34.         // 设置drawer触发器为DrawerListener
  35.         mDrawerLayout.setDrawerListener(mDrawerToggle);
  36.     }
  38.     /* 当invalidateOptionsMenu()调用时调用 */
  39.     @Override
  40.     public boolean onPrepareOptionsMenu(Menu menu) {
  41.         // 如果nav drawer是打开的, 隐藏与内容视图相关联的action items
  42.         boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
  43.         menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
  44.         return super.onPrepareOptionsMenu(menu);
  45.     }
  46. }

下一节会描述ActionBarDrawerToggle的构造参数，和处理与action bar图标交互所需的其他步骤。

使用App图标来打开和关闭

用户可以在屏幕左侧使用划屏手势来打开和关闭navigation drawer，但是如果你使用action bar,你也应该允许用户通过点击app图标来打开或关闭。并且app图标也应该使用一个特殊的图标来指明navigation drawer的存在。你可以通过使用上一节所说的ActionBarDrawerToggle来实现所有的这些操作。

要使ActionBarDrawerToggle起作用，通过它的构造函数创建一个实例，需要用到以下参数:

  • Activity用来容纳drawer。

  • DrawerLayout。

  • 一个drawable资源用作drawer指示器。
    标准的navigation drawer可以在Download the Action Bar Icon Pack获的

  • 一个字符串资源描述”打开抽屉”操作(便于访问)

  • 一个字符串资源描述”关闭抽屉”操作(便于访问)

那么，不论你是否创建了用作drawer监听器的ActionBarDrawerToggle的子类，你都需要在activity生命周期中的某些地方根据你的ActionBarDrawerToggle来调用。

  1. public class MainActivity extends Activity {
  2.     private DrawerLayout mDrawerLayout;
  3.     private ActionBarDrawerToggle mDrawerToggle;
  4.     ...
  6.     public void onCreate(Bundle savedInstanceState) {
  7.         ...
  9.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  10.         mDrawerToggle = new ActionBarDrawerToggle(
  11.                 this,                  /* 承载 Activity */
  12.                 mDrawerLayout,         /* DrawerLayout 对象 */
  13.                 R.drawable.ic_drawer,  /* nav drawer 图标用来替换'Up'符号 */
  14.                 R.string.drawer_open,  /* "打开 drawer" 描述 */
  15.                 R.string.drawer_close  /* "关闭 drawer" 描述 */
  16.                 ) {
  18.             /** 当drawer处于完全关闭的状态时调用 */
  19.             public void onDrawerClosed(View view) {
  20.                 super.onDrawerClosed(view);
  21.                 getActionBar().setTitle(mTitle);
  22.             }
  24.             /** 当drawer处于完全打开的状态时调用 */
  25.             public void onDrawerOpened(View drawerView) {
  26.                 super.onDrawerOpened(drawerView);
  27.                 getActionBar().setTitle(mDrawerTitle);
  28.             }
  29.         };
  31.         // 设置drawer触发器为DrawerListener
  32.         mDrawerLayout.setDrawerListener(mDrawerToggle);
  34.         getActionBar().setDisplayHomeAsUpEnabled(true);
  35.         getActionBar().setHomeButtonEnabled(true);
  36.     }
  38.     @Override
  39.     protected void onPostCreate(Bundle savedInstanceState) {
  40.         super.onPostCreate(savedInstanceState);
  41.         // 在onRestoreInstanceState发生后，同步触发器状态.
  42.         mDrawerToggle.syncState();
  43.     }
  45.     @Override
  46.     public void onConfigurationChanged(Configuration newConfig) {
  47.         super.onConfigurationChanged(newConfig);
  48.         mDrawerToggle.onConfigurationChanged(newConfig);
  49.     }
  51.     @Override
  52.     public boolean onOptionsItemSelected(MenuItem item) {
  53.         // 将事件传递给ActionBarDrawerToggle, 如果返回true，表示app 图标点击事件已经被处理
  54.         if (mDrawerToggle.onOptionsItemSelected(item)) {
  55.           return true;
  56.         }
  57.         // 处理你的其他action bar items...
  59.         return super.onOptionsItemSelected(item);
  60.     }
  62.     ...
  63. }

一个完整的navigation drawer例子,可以在原文页面顶端的sample下载