抽屉显示控件SlidingDrawer入门

SlidingDrawer是一个抽屉控件，代码具体路径为：android.widget.SlidingDrawer，该控件从API  Level3引入，在API 17及之后的版本将不再被支持。具体效果如下图所示，它有委托视图handle和内容显示视图content组成：

抽屉显示控件支持横竖屏，它由两个子视图（用户拖动句柄handle和内容显示视图）组成，可以通过拖动或者点击handle的方式呼出内容显示视图，注意，SlidingDrawer的父布局只能是FrameLayout和RelativeLayout或者他们的子视图。

这个范例是在参考他人的基础上写的：

布局文件如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent">
6. <SlidingDrawer
7. android:id="@+id/slidingDrawer"
8. android:layout_width="match_parent"
9. android:layout_height="match_parent"
10. android:layout_centerHorizontal="true"
11. android:layout_marginTop="200dip"
12. android:content="@+id/content"
13. android:handle="@+id/handle">
14. <RelativeLayout
15. android:id="@+id/handle"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content" >
18. <ImageView
19. android:id="@+id/handlebg"
20. android:layout_width="wrap_content"
21. android:layout_height="30dip"
22. android:layout_centerHorizontal="true"
23. android:scaleType="fitXY"
24. android:src="@drawable/handle" />
25. <ImageView
26. android:id="@+id/directionImage"
27. android:layout_width="20dip"
28. android:layout_height="20dip"
29. android:layout_alignParentLeft="true"
30. android:layout_centerVertical="true"
31. android:layout_marginLeft="5dip"
32. android:src="@drawable/up" />
33. <TextView
34. android:id="@+id/handTextView"
35. android:paddingLeft="4dip"
36. android:layout_width="wrap_content"
37. android:layout_height="wrap_content"
38. android:layout_toRightOf="@id/directionImage"
39. android:layout_centerVertical="true"
40. android:textColor="#ffffffff"/>
41. </RelativeLayout>
42. <LinearLayout
43. android:id="@+id/content"
44. android:layout_width="match_parent"
45. android:layout_height="150dip"
46. android:background="#4455AA">
47. <TextView
48. android:layout_width="match_parent"
49. android:layout_height="wrap_content"
50. android:layout_gravity="center"
51. android:text="SlidingDrawer Content Layout!"
52. android:textAppearance="?android:attr/textAppearanceLarge" />
53. </LinearLayout>
54. </SlidingDrawer>
55. </RelativeLayout>

对应代码如下：

1. package com.demo.slidingdrawer;
2. import android.app.Activity;
3. import android.os.Bundle;
4. import android.view.animation.Animation;
5. import android.view.animation.AnimationUtils;
6. import android.widget.ImageView;
7. import android.widget.SlidingDrawer;
8. import android.widget.TextView;
9. public class SlidingDrawerActivity extends Activity {
10. @Override
11. public void onCreate(Bundle savedInstanceState) {
12. super.onCreate(savedInstanceState);
13. setContentView(R.layout.slidingdrawer_layout);
14. initSlidingDrawer();
15. }
16. private void initSlidingDrawer( ){
17. mDirectionImageView = (ImageView) findViewById(R.id.directionImage);
18. mHandleTextView = (TextView) findViewById(R.id.handTextView);
19. mHandleTextView.setText("展开");
20. mSlidingDrawer = (SlidingDrawer) findViewById(R.id.slidingDrawer);
21. mSlidingDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener() { // 打开抽屉
22. @Override
23. public void onDrawerOpened() {
24. mDirectionImageView.setImageResource(R.drawable.down);
25. Animation animation = AnimationUtils.loadAnimation(SlidingDrawerActivity.this, R.anim.arrowrote);
26. mDirectionImageView.setAnimation(animation);
27. mHandleTextView.setText("收起");
28. }
29. });
30. mSlidingDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() { // 关闭抽屉
31. @Override
32. public void onDrawerClosed() {
33. mDirectionImageView.setImageResource(R.drawable.up);
34. Animation animation = AnimationUtils.loadAnimation(SlidingDrawerActivity.this, R.anim.arrowrote);
35. mDirectionImageView.setAnimation(animation);
36. mHandleTextView.setText("展开");
37. }
38. });
39. }
40. private ImageView mDirectionImageView = null;
41. private SlidingDrawer mSlidingDrawer = null;
42. private TextView mHandleTextView = null;
43. }

附：

SlidingDrawer官方介绍

SlidingDrawer范例

创建一个抽屉导航(Creating a Navigation Drawer)

分类： android必知必会2013-09-27 22:01 305人阅读 评论(0) 收藏 举报

android抽屉导航navagation drawerdrawerlayout

抽屉导航是一个在应用程序主界面左侧显示的面板，它多数时候处于隐藏状态，用户可以通过用手指从屏幕左侧拖动或者点击Acion Bar的应用程序图标来呼出抽屉导航。

本课介绍如何使用android-support-v4.jar中的DrawerLayout来实现抽屉导航功能。

创建一个抽屉布局

为了在你的程序中实现抽屉导航功能，需要在你的窗口布局中定义一个DrawerLayout对象作为根视图，并且需要添加一个包含界面显示内容的视图（当抽屉导航处于隐藏状态下窗口所显示的视图）和包含抽屉导航显示内容的视图作为DrawerLayout的子视图。

比如，如下所示的布局就是将DrawerLayout作为布局的跟标签，包含一个FrameLayout帧布局作为内容显示视图和一个ListView作为抽屉导航显示视图。

1. <span style="font-size:18px"><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>
21. </span>

上面这个布局展示了抽屉导航布局的一些重要布局特点：

界面的内容显示视图（FrameLayout）必须是DrawerLayout的第一个子视图。

因为在抽屉导航处于隐藏状态时内容显示视图作为窗口的主界面，所以内容显示视图应设置为填充父布局。

抽屉显示视图（ListView）必须通过android:layout_gravity指定其水平Gravity属性。为了支持从右到左的语言，应该将android:layout_gravity属性指定为”start”而不是”left”，所以当布局模式为从右到左时抽屉显示在窗口右边。

初始化抽屉列表

在Acitivity里面，应该首先初始化抽屉视图。你如何处理取决于你程序的显示情况。但多数时候抽屉导航都是有ListView组成的，所以应该为抽屉列表指定一个Adapter(比如ArrayAdapter或者SimpleCursonAdapter)。

比如，如下所示的代码将教会你通过字符串数组初始化抽屉导航列表：

1. <span style="font-size:18px">public class MainActivity extends Activity {
2. private String[] mPlanetTitles;
3. private DrawerLayout mDrawerLayout;
4. private ListView mDrawerList;
5. ...
6. @Override
7. public void onCreate(Bundle savedInstanceState) {
8. super.onCreate(savedInstanceState);
9. setContentView(R.layout.activity_main);
10. mPlanetTitles = getResources().getStringArray(R.array.planets_array);
11. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
12. mDrawerList = (ListView) findViewById(R.id.left_drawer);
13. // 为抽屉导航列表设置适配器
14. mDrawerList.setAdapter(new ArrayAdapter<String>(this,
15. R.layout.drawer_list_item, mPlanetTitles));
16. // 为列表点击设置监听器
17. mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
18. ...
19. }
20. }
21. </span>

上面的代码通过调用setOnItemClickListener()方法监听抽屉导航列表项的点击事件，下面将介绍如何实现这个接口并在选择抽屉列表项时更新内容显示视图。

处理抽屉导航点击事件

当用户选择抽屉列表的某一项时，系统将调用OnItemClickListener接口的onItemClick()方法。

在onItemClick()方法中你做什么取决于如何实现你应用程序的结构，在下面的示例中，每选中列表的一项将在内容显示视图插入一个不同的Fragment(FrameLayout标签通过R.id.content_frame定义)：

1. <span style="font-size:18px">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. /** 在主视图中切换Fragment */
8. private void selectItem(int position) {
9. // 创建一个fragment并根据列表项的位置指定fragment的显示内容
10. Fragment fragment = new PlanetFragment();
11. Bundle args = new Bundle();
12. args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
13. fragment.setArguments(args);
14. // 将该fragement替换掉原fragment
15. FragmentManager fragmentManager = getFragmentManager();
16. fragmentManager.beginTransaction()
17. .replace(R.id.content_frame, fragment)
18. .commit();
19. // 高亮选中项，更新标题并且关闭抽屉
20. mDrawerList.setItemChecked(position, true);
21. setTitle(mPlanetTitles[position]);
22. mDrawerLayout.closeDrawer(mDrawerList);
23. }
24. @Override
25. public void setTitle(CharSequence title) {
26. mTitle = title;
27. getActionBar().setTitle(mTitle);
28. }
29. </span>

监听抽屉打开和关闭事件

通过实现DrawerLayout.DrawerListener接口来监听抽屉的打开和关闭事件。这个接口提供了如onDrawerOpened()和onDrawerClosed()。

除了通过实现DrawerLayout.DrawerListener接口来监听抽屉的打开和关闭事件外，如果你的窗口中包含action bar，你可以通过几成ActionBarDrawerToggle类来实现同样的功能，ActionBarDrawerToggle同样实现了DrawerLayout.DrawerListener接口，但它更利于action和抽屉导航栏的交互（将在下一部分讨论）。

正如在Navagation Drawer设计范式中讨论的一样，你可以在抽屉导航处于可见状态时修改action bar的显示内容，比如改变标题等。下例中的代码展示了怎样通过ActionBarDrawerToggle实例复写DrawerLayout.DrawerListener回调方法。

1. <span style="font-size:18px">public class MainActivity extends Activity {
2. private DrawerLayout mDrawerLayout;
3. private ActionBarDrawerToggle mDrawerToggle;
4. private CharSequence mDrawerTitle;
5. private CharSequence mTitle;
6. ...
7. @Override
8. public void onCreate(Bundle savedInstanceState) {
9. super.onCreate(savedInstanceState);
10. setContentView(R.layout.activity_main);
11. ...
12. mTitle = mDrawerTitle = getTitle();
13. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
14. mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
15. R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
16. /** 在抽屉导航完全处于关闭状态时调用. */
17. public void onDrawerClosed(View view) {
18. getActionBar().setTitle(mTitle);
19. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
20. }
21. /** 在抽屉导航完全处于打开状态时调用. */
22. public void onDrawerOpened(View drawerView) {
23. getActionBar().setTitle(mDrawerTitle);
24. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
25. }
26. };
27. // Set the drawer toggle as the DrawerListener
28. mDrawerLayout.setDrawerListener(mDrawerToggle);
29. }
30. /* Called whenever we call invalidateOptionsMenu() */
31. @Override
32. public boolean onPrepareOptionsMenu(Menu menu) {
33. // If the nav drawer is open, hide action items related to the content view
34. boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
35. menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
36. return super.onPrepareOptionsMenu(menu);
37. }
38. }
39. </span>

 

通过应用程序图标打开和关闭抽屉

用户可以通过从屏幕左边缘滑动的方式来开启和关闭抽屉导航，如果你同时也使用了action bar，你也需要在当用户点击应用程序图标时实现打开和关闭抽屉导航的功能。也要指定一个特殊的图标来指示抽屉导航的存在，你可以通过使用ActionBarDrawerToggle方法来显示之前的选择。

为了使ActionBarDrawerToggle能够工作，通过其带参构造方法实例化该类，必须包含如下参数：

抽屉导航附属的窗口实例

DrawerLayout实例

指示抽屉的图标资源

描述“打开抽屉”动作的字符串资源

描述“关闭抽屉”动作的字符串资源

然后，你是否创建了一个ActionBarDrawerToggle的子类作为你对抽屉的监听，你需要在你窗口的生命周期回调中调用ActionBarDrawerToggle的相关方法。

publicclassMainActivityextendsActivity{
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    ...

public void onCreate(Bundle savedInstanceState){
       ...

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
       mDrawerToggle = new ActionBarDrawerToggle(
               this,                 /* host Activity*/
               mDrawerLayout,         /* DrawerLayout object */
               R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
               R.string.drawer_open,  /* "open drawer" description */
               R.string.drawer_close  /* "close drawer" description */
               ) {

/** Called when a drawer has settled in a completely closed state. */
           public void onDrawerClosed(View view){
               getActionBar().setTitle(mTitle);
           }

/** Called when a drawer has settled in a completely open state. */
           public void onDrawerOpened(View drawerView){
               getActionBar().setTitle(mDrawerTitle);
           }
       };

// Set thedrawer toggle as the DrawerListener
       mDrawerLayout.setDrawerListener(mDrawerToggle);

getActionBar().setDisplayHomeAsUpEnabled(true);
       getActionBar().setHomeButtonEnabled(true);
    }

@Override
    protected void onPostCreate(Bundle savedInstanceState){
       super.onPostCreate(savedInstanceState);
       // Syncthe toggle state after onRestoreInstanceState has occurred.
       mDrawerToggle.syncState();
    }

@Override
    public void onConfigurationChanged(Configuration newConfig){
       super.onConfigurationChanged(newConfig);
       mDrawerToggle.onConfigurationChanged(newConfig);
    }

@Override
    public boolean onOptionsItemSelected(MenuItem item){
       // Passthe event to ActionBarDrawerToggle, if it returns
       // true,then it has handled the app icon touch event
       if (mDrawerToggle.onOptionsItemSelected(item)){
         return true;
       }
       // Handleyour other action bar items...

return super.onOptionsItemSelected(item);
    }

...
}

详细地示例请在本页面的顶部下载。

原文：Creating a Navigation Drawer

关于抽屉导航的设计，极客公园的这篇文章不错：Android Design 趋势——Navigation Drawer

第一次翻译文档，难免会有很多错误，呵呵。