创建导航抽屉 → Creating a Navigation Drawer

迷南。 2022-02-03 07:36 226阅读 0赞

# **创建抽屉导航** #

导航抽屉是在 屏幕左侧边缘的 应用主导航选项的面板. 它大多数时间是隐藏的, 但当用户用手指从屏幕的左侧滑动, 或者当用户点击应用顶部工具栏的应用图标的时候, 它就会显示.

此课程是描述 怎样有效的使用在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.  
7.  **<****FrameLayout**
8.  android:id="@+id/content\_frame"
9.  android:layout\_width="match\_parent"
10. android:layout\_height="match\_parent"**/>**
11. 
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****>**

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

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

## 初始化抽屉列表 ##

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

例如, 这里演示了如何用String array来初始化一个导航列表.

1.  **public****class** MainActivity **extends** Activity \{ 
2.  **private** String\[\] mPlanetTitles; 
3.  **private** ListView mDrawerList; 
4.   ... 
5.  
6.  @Override
7.  **public****void** 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.  **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.  \} 
7.  
8.  /\*\* Swaps fragments in the main content view \*/
9.  **private****void** 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. **public****void** 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.  **public****class** MainActivity **extends** Activity \{ 
2.  **private** DrawerLayout mDrawerLayout; 
3.  **private** ActionBarDrawerToggle mDrawerToggle; 
4.  **private** CharSequence mDrawerTitle; 
5.  **private** CharSequence mTitle; 
6.   ... 
7.  
8.  @Override
9.  **public****void** 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. **public****void** 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. **public****void** 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. **public****boolean** 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. **return****super**.onPrepareOptionsMenu(menu); 
43.  \} 
44. \}

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

## 打开关闭应用图标 ##

用户可以打开和关闭导航抽屉, 通过手指从屏幕左侧的边缘滑动, 但如果你使用工具栏, 你应该也能允许用户打开和关闭它, 通过触摸应用程序图标. 应用程序图标也可以显示一个特殊的图标关于导航抽屉的状态. 你可以实现所有这些行为通过使用ActionBarDrawerToggle, 如前一节所示。

让ActionBarDrawerToggle工作, 创建一个它的实例用它的构造方法, 这就需要以下参数:

*  持有抽屉的Activity.
 *  DrawerLayout对象.
 *  一个Drawable资源作为抽屉指示器.
 *  字符串资源描述"打开抽屉"动作.
 *  字符串资源描述"关闭抽屉"动作.

然后, 无论你是否已经创建了一个ActionBarDrawerToggle的子类作为你的抽屉的Listener, 你需要在几个Activity生命周期的地方, 调用你的ActionBarDrawerToggle:

1.  **public****class** MainActivity **extends** Activity \{ 
2.  **private** DrawerLayout mDrawerLayout; 
3.  **private** ActionBarDrawerToggle mDrawerToggle; 
4.   ... 
5.  
6.  **public****void** onCreate(Bundle savedInstanceState) \{ 
7.   ... 
8.  
9.   mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer\_layout); 
10.  mDrawerToggle = **new** ActionBarDrawerToggle( 
11. **this**, /\* host Activity \*/
12.  mDrawerLayout, /\* DrawerLayout object \*/
13.  R.drawable.ic\_drawer, /\* nav drawer icon to replace 'Up' caret \*/
14.  R.string.drawer\_open, /\* "open drawer" description \*/
15.  R.string.drawer\_close /\* "close drawer" description \*/
16.  ) \{ 
17. 
18. /\*\* Called when a drawer has settled in a completely closed state. \*/
19. **public****void** onDrawerClosed(View view) \{ 
20.  getActionBar().setTitle(mTitle); 
21.  \} 
22. 
23. /\*\* Called when a drawer has settled in a completely open state. \*/
24. **public****void** onDrawerOpened(View drawerView) \{ 
25.  getActionBar().setTitle(mDrawerTitle); 
26.  \} 
27.  \}; 
28. 
29. // Set the drawer toggle as the DrawerListener
30.  mDrawerLayout.setDrawerListener(mDrawerToggle); 
31. 
32.  getActionBar().setDisplayHomeAsUpEnabled(**true**); 
33.  getActionBar().setHomeButtonEnabled(**true**); 
34.  \} 
35. 
36. @Override
37. **protected****void** onPostCreate(Bundle savedInstanceState) \{ 
38. **super**.onPostCreate(savedInstanceState); 
39. // Sync the toggle state after onRestoreInstanceState has occurred.
40.  mDrawerToggle.syncState(); 
41.  \} 
42. 
43. @Override
44. **public****void** onConfigurationChanged(Configuration newConfig) \{ 
45. **super**.onConfigurationChanged(newConfig); 
46.  mDrawerToggle.onConfigurationChanged(newConfig); 
47.  \} 
48. 
49. @Override
50. **public****boolean** onOptionsItemSelected(MenuItem item) \{ 
51. // Pass the event to ActionBarDrawerToggle, if it returns
52. // true, then it has handled the app icon touch event
53. **if** (mDrawerToggle.onOptionsItemSelected(item)) \{ 
54. **return****true**; 
55.  \} 
56. // Handle your other action bar items...
57. 
58. **return****super**.onOptionsItemSelected(item); 
59.  \} 
60. 
61.  ... 
62. \}

本文转自chainli 51CTO博客，原文链接：http://blog.51cto.com/lichen/1211685，如需转载请自行联系原作者