首页 / 操作系统 / Linux / Android创建导航抽屉 → Creating a Navigation Drawer

创建抽屉导航

导航抽屉是在 屏幕左侧边缘的 应用主导航选项的面板. 它大多数时间是隐藏的, 但当用户用手指从屏幕的左侧滑动, 或者当用户点击应用顶部工具栏的应用图标的时候, 它就会显示.此课程是描述 怎样有效的使用在Support Library中的DrawLayout接口 去实现一个导航抽屉.

创建一个抽屉布局

添加一个抽屉, 声明UI的时候需要吧DrawLayout作为你的布局文件的根视图（root view）. 在DrawLayout里面, 添加一个主要内容的视图（当抽屉导航隐藏的时候你的主要的布局文件）, 和另一个包含导航抽屉的视图.举例来说, 下面的布局使用了DrawLayout, 它有2个子视图: 一个FrameLayout包含主要的内容, 一个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. <！-- The main content view -->
7. <FrameLayout
8. android:id="@+id/content_frame"
9. android:layout_width="match_parent"
10. android:layout_height="match_parent"/>
11. <！-- The navigation drawer -->
12. <ListViewandroid: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>

这个布局文件示范了一些重要的布局特征.  

• 主要内容的视图（FrameLayout）必须是DrawLayout的第一个子元素, 因为导航抽屉是在主要内容视图的上面.
• 主要内容视图设置为匹配父视图的宽度和高度, 因为它代表了整个界面导航抽屉是隐藏的.
  
• 抽屉视图（ListView）必须指定其水平重力与android:layout_gravity属性。支持从右到左（RTL）语言,指定值与"start"代替"left"（所以抽屉里出现在布局的右侧当布局是RTL时）.
  
• 抽屉视图指定其宽度用dp单位和高度匹配父视图。抽屉里的宽度不能超过320 dp, 所以用户总是可以看到主要内容视图的一部分.

 

初始化抽屉列表

在你的Activity中, 第一件事就是初始化导航抽屉列表里面的元素, 你如何做取决于你的应用程序的内容,但一个导航抽屉通常包括一个ListView, 因此清单应该由一个Adapter填充（例如ArrayAdapter或SimpleCursorAdapter）.例如, 这里演示了如何用String array来初始化一个导航列表. 

1. publicclass MainActivity extends Activity {
2. private String[] mPlanetTitles;
3. private ListView mDrawerList;
4. ...
5.  
6. @Override
7. publicvoid onCreate（Bundle savedInstanceState） {
8. super.onCreate（savedInstanceState）;
9. setContentView（R.layout.activity_main）;
10.  
11. mPlanetTitles = getResources（）.getStringArray（R.array.planets_array）;
12. mDrawerList = （ListView） findViewById（R.id.left_drawer）;
13.  
14. // Set the adapter for the list view
15. mDrawerList.setAdapter（new ArrayAdapter<String>（this,
16. R.layout.drawer_list_item, mPlanetTitles））;
17. // Set the list"s click listener
18. mDrawerList.setOnItemClickListener（new DrawerItemClickListener（））;
19.  
20. ...
21. }
22. }

这个代码调用setOnItemClickListener（）去接收导航抽屉列表的点击事件. 下一节将展示如何实现这个接口,当用户选择一个Item时改变内容视图. 

处理导航点击事件

当用户选择了抽屉列表里面的一个Item时, 系统调用onItemClickListener上的onItemClick（）, 给setOnItemClickListener（）.你在onItemClick（）方法里面做什么, 取决于你的app实现的结构. 在下面的例子中, 选择每一个Item都会在主要内容的布局中插入一个不同的Fragment. 

1. privateclass DrawerItemClickListener implements ListView.OnItemClickListener {
2. @Override
3. publicvoid onItemClick（AdapterView parent, View view, int position, long id） {
4. selectItem（position）;
5. }
6. }
7.  
8. /** Swaps fragments in the main content view */
9. privatevoid selectItem（int position） {
10. // Create a new fragment and specify the planet to show based on position
11. Fragment fragment = new PlanetFragment（）;
12. Bundle args = new Bundle（）;
13. args.putInt（PlanetFragment.ARG_PLANET_NUMBER, position）;
14. fragment.setArguments（args）;
15.  
16. // Insert the fragment by replacing any existing fragment
17. FragmentManager fragmentManager = getFragmentManager（）;
18. fragmentManager.beginTransaction（）
19. .replace（R.id.content_frame, fragment）
20. .commit（）;
21.  
22. // Highlight the selected item, update the title, and close the drawer
23. mDrawer.setItemChecked（position, true）;
24. setTitle（mPlanetTitles[position]）;
25. mDrawerLayout.closeDrawer（mDrawer）;
26. }
27.  
28. @Override
29. publicvoid setTitle（CharSequence title） {
30. mTitle = title;
31. getActionBar（）.setTitle（mTitle）;
32. }

 

监听打开和关闭事件

 侦听抽屉打开和关闭事件,调用你的DrawerLayout setDrawerListener（）, 并将其传递给DrawerLayout.DrawerListener的实现. 这个接口提供了回调抽屉事件, 如onDrawerOpened（）和onDrawerClosed （）。然而, 相对于实现DrawerLayout.DrawerListener, 如果你的Activity包括工具栏, 可以代替继承ActionBarDrawerToggle类. ActionBarDrawerToggle实现了DrawerLayout.DrawerListener. 所以你仍然可以覆盖这些回调, 但它也有助于正确的交互行为, 在工具栏的图标和导航抽屉之间（下一节将进一步讨论）。就像在导航抽屉设计指南一样,当抽屉是可见的时候, 你应该修改工具栏的内容, 如改变标题和删除操作Item. 下面的代码用ActionBarDrawerToggle类的一个实例, 显示了如何重写DrawerLayout.DrawerListener的回调方法: 

1. publicclass MainActivity extends Activity {
2. private DrawerLayout mDrawerLayout;
3. private ActionBarDrawerToggle mDrawerToggle;
4. private CharSequence mDrawerTitle;
5. private CharSequence mTitle;
6. ...
7.  
8. @Override
9. publicvoid onCreate（Bundle savedInstanceState） {
10. super.onCreate（savedInstanceState）;
11. setContentView（R.layout.activity_main）;
12. ...
13.  
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） {
18.  
19. /** Called when a drawer has settled in a completely closed state. */
20. publicvoid onDrawerClosed（View view） {
21. getActionBar（）.setTitle（mTitle）;
22. invalidateOptionsMenu（）; // creates call to onPrepareOptionsMenu（）
23. }
24.  
25. /** Called when a drawer has settled in a completely open state. */
26. publicvoid onDrawerOpened（View drawerView） {
27. getActionBar（）.setTitle（mDrawerTitle）;
28. invalidateOptionsMenu（）; // creates call to onPrepareOptionsMenu（）
29. }
30. };
31.  
32. // Set the drawer toggle as the DrawerListener
33. mDrawerLayout.setDrawerListener（mDrawerToggle）;
34. }
35.  
36. /* Called whenever we call invalidateOptionsMenu（） */
37. @Override
38. publicboolean onPrepareOptionsMenu（Menu menu） {
39. // If the nav drawer is open, hide action items related to the content view
40. boolean drawerOpen = mDrawerLayout.isDrawerOpen（mDrawerList）;
41. menu.findItem（R.id.action_websearch）.setVisible（！drawerOpen）;
42. returnsuper.onPrepareOptionsMenu（menu）;
43. }
44. }

 下一节描述ActionBarDrawerToggle构造函数参数和其他所需的步骤来设置它来处理工具栏的图标.