今天研究了一个别人写的仿多米音乐的源码，其中有一个功能是抽拉的效果，可以把两个界面的内容显示在一个activity中，利用抽拉实现多内容显示。自己通过摸索参考网上解释实现这一功能，并实现了自己想要的一个功能（为一个程序添加这个功能），接下来上图，没图说个MX。

 

未拉之前

拉的过程中

拉出来之后

 

SlidingDrawer是一个可以实现抽取式显示的控件，可以垂直，水平拉取，每个抽屉都包含两个东西：一个是拉手（handle），一个是抽屉里面的东西（content），SlidingDrawer需要放置在另外的一个layout之上，这意味着SlidingDrawer只能放置在 FrameLayout or a RelativeLayout里面。SlidingDrawer需要设置宽高为match_parent，而且在SlidingDrawer里面必须设置handle与content：。SlidingDrawer隐藏屏外的内容，并允许用户通过handle以显示隐藏内容。它可以垂直或水平滑动，它有俩个View组成，其一是可以拖动的 handle，其二是隐藏内容的View。它里面的控件必须设置布局，在布局文件中必须指定handle和content。

官方文档中的描述是:


    
    
    

     
     
  1. public class SlidingDrawerextends ViewGroupjava.lang.Object Android.view.View android.view.ViewGroup android.widget.SlidingDrawer   
    2.

    原文：SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen. SlidingDrawer can be used vertically or horizontally. A special widget composed of two children views: the handle, that the users drags, and the content, attached to the handle and dragged with it. SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance. The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions. Inside an XML layout, SlidingDrawer must define the id of the handle and of the content:

    主布局配置文件内容：layout/main.xml


    
    
    

     
     
  1. <?xml version="1.0" encoding="utf-8"?>  
    2. 

     
     
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3. 

     
     
  3.     android:layout_width="fill_parent"  
    4. 

     
     
  4.     android:layout_height="fill_parent"  
    5. 

     
     
  5.     android:background="@drawable/background"  
    6. 

     
     
  6.     android:orientation="vertical" >  
    7. 

     
     
  7.      <LinearLayout  
    8. 

     
     
  8.         android:id="@+id/linearLayout"  
    9. 

     
     
  9.         android:layout_width="fill_parent"  
    10. 

     
     
  10.         android:layout_height="80px"  
    11. 

     
     
  11.         android:background="#0000ff"   
    12. 

     
     
  12.         >  
    13. 

     
     
  13.          <TextView  
    14. 

     
     
  14.              android:id="@+id/textView1"  
    15. 

     
     
  15.              android:layout_width="wrap_content"  
    16. 

     
     
  16.              android:layout_height="wrap_content"  
    17. 

     
     
  17.              android:text="该区域大小可通过抽屉控制（马国会）"  
    18. 

     
     
  18.              android:textAppearance="?android:attr/textAppearanceMedium" />  
    19. 

     
     
  19.   
    20. 

     
     
  20.      </LinearLayout>  
    21. 

     
     
  21.         <SlidingDrawer  
    22. 

     
     
  22.             android:id="@+id/slidingdrawer"  
    23. 

     
     
  23.             android:layout_width="fill_parent"  
    24. 

     
     
  24.             android:layout_height="fill_parent"  
    25. 

     
     
  25.             android:content="@+id/content"  
    26. 

     
     
  26.             android:handle="@+id/handle"  
    27. 

     
     
  27.             android:orientation="horizontal"   
    28. 

     
     
  28.             >  
    29. 

     
     
  29.   
    30. 

     
     
  30.             <Button  
    31. 

     
     
  31.                 android:id="@+id/handle"  
    32. 

     
     
  32.                 android:layout_width="wrap_content"  
    33. 

     
     
  33.                 android:layout_height="fill_parent"  
    34. 

     
     
  34.                 android:background="@drawable/handle" />  
    35. 

     
     
  35.   
    36. 

     
     
  36.             <ListView  
    37. 

     
     
  37.                 android:id="@+id/content"  
    38. 

     
     
  38.                 android:layout_width="fill_parent"  
    39. 

     
     
  39.                 android:layout_height="wrap_content"   
    40. 

     
     
  40.                   
    41. 

     
     
  41.                 />  
    42. 

     
     
  42.         </SlidingDrawer>         
    43. 

     
     
  43.     </LinearLayout>  
    44. 

     
     
  44.      ListView条目项显示内容布局文件。layout/listview_layout.xml 
    45. 

     
     
  45.  
    46. 

     
     
  46.  
    47. 

     
     
  47.  
    48. 

     
     
  48. <?xml version="1.0" encoding="utf-8"?>  
    49. 

     
     
  49. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    50. 

     
     
  50.     android:orientation="vertical"  
    51. 

     
     
  51.     android:layout_width="fill_parent"  
    52. 

     
     
  52.     android:layout_height="fill_parent"  
    53. 

     
     
  53.     android:background="#ffffff"    >    
    54. 

     
     
  54.     <LinearLayout  
    55. 

     
     
  55.      android:orientation="vertical"  
    56. 

     
     
  56.      android:layout_width="fill_parent"  
    57. 

     
     
  57.         android:layout_height="fill_parent"  
    58. 

     
     
  58.         android:background="@drawable/listview_selected"  
    59. 

     
     
  59.         android:padding="6px">  
    60. 

     
     
  60.  <TextView  
    61. 

     
     
  61.   android:id="@+id/webName"    
    62. 

     
     
  62.      android:layout_width="fill_parent"   
    63. 

     
     
  63.      android:layout_height="wrap_content"   
    64. 

     
     
  64.      android:textSize="20px"  
    65. 

     
     
  65.      android:textColor="#000000"/>  
    66. 

     
     
  66.  <TextView  
    67. 

     
     
  67.   android:id="@+id/webDescript"    
    68. 

     
     
  68.      android:layout_width="fill_parent"   
    69. 

     
     
  69.      android:layout_height="wrap_content"   
    70. 

     
     
  70.      android:textSize="16px"  
    71. 

     
     
  71.      android:textColor="#000000"/>  
    72. 

     
     
  72.      </LinearLayout>  
    73. 

     
     
  73. </LinearLayout>  
    74.

    组件运行时的状态信息配置文件。drable/handle.xml(按钮在按住和正常状态显示不同图片)


    
    
    

     
     
  1. <?xml version="1.0" encoding="utf-8"?> 
    2. 

     
     
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    3. 

     
     
  3.     <item android:state_window_focused="false"  android:drawable="@drawable/handle_normal" /> 
    4. 

     
     
  4.     <item android:state_focused="true" android:drawable="@drawable/handle_focused" /> 
    5. 

     
     
  5.     <item android:state_pressed="true" android:drawable="@drawable/handle_pressed" /> 
    6. 

     
     
  6. </selector> 
    7.

    组件运行时的状态信息配置文件。drable/listview_selected.xml(listview选项选中效果)


    
    
    

     
     
  1. <?xml version="1.0" encoding="utf-8"?> 
    2. 

     
     
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    3. 

     
     
  3.     <item android:state_pressed="true" 
    4. 

     
     
  4.         android:drawable="@drawable/list_selector_background_pressed" /> 
    5. 

     
     
  5. </selector> 
    6.

    java类文件，activity代码：com.magh.test.SlidingDrawerTestActivity.java


    
    
    

     
     
  1. package com.magh.test; 
    2. 

     
     
  2. import android.app.Activity; 
    3. 

     
     
  3. import android.os.Bundle; 
    4. 

     
     
  4. import android.view.LayoutInflater; 
    5. 

     
     
  5. import android.view.MotionEvent; 
    6. 

     
     
  6. import android.view.View; 
    7. 

     
     
  7. import android.view.ViewGroup; 
    8. 

     
     
  8. import android.widget.BaseAdapter; 
    9. 

     
     
  9. import android.widget.LinearLayout; 
    10. 

     
     
  10. import android.widget.ListView; 
    11. 

     
     
  11. import android.widget.TextView; 
    12. 

     
     
  12. /**  
    13. 

     
     
  13.  * @author Ma Guohui 
    14. 

     
     
  14.  * @FileDescription:SlidingDrawer实现伸拉效果案例 
    15. 

     
     
  15.  * @version 2012-12-17 下午7:33:06 
    16. 

     
     
  16.  * @ChangeList: 
    17. 

     
     
  17.  */ 
    18. 

     
     
  18. public class SlidingDrawerTestActivity extends Activity { 
    19. 

     
     
  19.     /** Called when the activity is first created. */ 
    20. 

     
     
  20.     private ListView myListView; 
    21. 

     
     
  21.     LinearLayout mLinearLayout; 
    22. 

     
     
  22.  
    23. 

     
     
  23.     @Override 
    24. 

     
     
  24.     public void onCreate(Bundle savedInstanceState) { 
    25. 

     
     
  25.         super.onCreate(savedInstanceState); 
    26. 

     
     
  26.         setContentView(R.layout.main); 
    27. 

     
     
  27.         setupViews(); 
    28. 

     
     
  28.                 actionProcess(); 
    29. 

     
     
  29.     } 
    30. 

     
     
  30.  
    31. 

     
     
  31.     private void setupViews() { 
    32. 

     
     
  32.         myListView = (ListView) findViewById(R.id.content); 
    33. 

     
     
  33.         myListView.setAdapter(new ListViewAdapter()); 
    34. 

     
     
  34.     } 
    35. 

     
     
  35.  
    36. 

     
     
  36.     private void actionProcess() {// 伸拉操作时执行不同事件 
    37. 

     
     
  37.         android.widget.SlidingDrawer mDrawer = (android.widget.SlidingDrawer) findViewById(R.id.slidingdrawer); 
    38. 

     
     
  38.         // mDrawer.open(); //设置抽屉为打开状态 
    39. 

     
     
  39.         mLinearLayout = (LinearLayout) findViewById(R.id.linearLayout); // 获取需要控制区域的布局 
    40. 

     
     
  40.  
    41. 

     
     
  41.         mDrawer.setOnDrawerOpenListener(new android.widget.SlidingDrawer.OnDrawerOpenListener() { 
    42. 

     
     
  42.  
    43. 

     
     
  43.             public void onDrawerOpened() {// 当抽屉打开时执行此操作 
    44. 

     
     
  44.  
    45. 

     
     
  45.                 // TODO Auto-generated method stub 
    46. 

     
     
  46.  
    47. 

     
     
  47.                 LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) mLinearLayout 
    48. 

     
     
  48.                         .getLayoutParams(); 
    49. 

     
     
  49.  
    50. 

     
     
  50.                 linearParams.height = 40; 
    51. 

     
     
  51.  
    52. 

     
     
  52.                 mLinearLayout.setLayoutParams(linearParams); 
    53. 

     
     
  53.  
    54. 

     
     
  54.             } 
    55. 

     
     
  55.  
    56. 

     
     
  56.         }); 
    57. 

     
     
  57.  
    58. 

     
     
  58.         mDrawer.setOnDrawerCloseListener(new android.widget.SlidingDrawer.OnDrawerCloseListener() { 
    59. 

     
     
  59.  
    60. 

     
     
  60.             public void onDrawerClosed() {// 抽屉关闭时执行此操作 
    61. 

     
     
  61.  
    62. 

     
     
  62.                 // TODO Auto-generated method stub 
    63. 

     
     
  63.  
    64. 

     
     
  64.                 LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) mLinearLayout 
    65. 

     
     
  65.                         .getLayoutParams(); 
    66. 

     
     
  66.  
    67. 

     
     
  67.                 linearParams.height = 80; 
    

    68. 

     
     
  68.                 mLinearLayout.setLayoutParams(linearParams); 
    69. 

     
     
  69.  
    70. 

     
     
  70.             } 
    71. 

     
     
  71.         }); 
    72. 

     
     
  72.  
    73. 

     
     
  73.         mDrawer.setOnTouchListener(new View.OnTouchListener() { 
    74. 

     
     
  74.  
    75. 

     
     
  75.             @Override 
    76. 

     
     
  76.             public boolean onTouch(View v, MotionEvent event) { 
    77. 

     
     
  77.                 // TODO Auto-generated method stub 
    78. 

     
     
  78.                 return false; 
    79. 

     
     
  79.             } 
    80. 

     
     
  80.         }); 
    81. 

     
     
  81.  
    82. 

     
     
  82.     } 
    83. 

     
     
  83.  
    84. 

     
     
  84.     private class ListViewAdapter extends BaseAdapter {// 自定义ListView适配器 
    85. 

     
     
  85.         // 这里返回10行，ListView有多少行取决于getCount()方法 
    86. 

     
     
  86.         @Override 
    87. 

     
     
  87.         public int getCount() { 
    88. 

     
     
  88.             return 8; 
    89. 

     
     
  89.         } 
    90. 

     
     
  90.  
    91. 

     
     
  91.         @Override 
    92. 

     
     
  92.         public Object getItem(int arg0) { 
    93. 

     
     
  93.             return null; 
    94. 

     
     
  94.         } 
    95. 

     
     
  95.  
    96. 

     
     
  96.         @Override 
    97. 

     
     
  97.         public long getItemId(int arg0) { 
    98. 

     
     
  98.             return 0; 
    99. 

     
     
  99.         } 
    100. 

     
     
  100.  
    101. 

     
     
  101.         @Override 
    102. 

     
     
  102.         public View getView(int position, View v, ViewGroup parent) { 
    103. 

     
     
  103.             final LayoutInflater inflater = LayoutInflater 
    104. 

     
     
  104.                     .from(getApplicationContext()); 
    105. 

     
     
  105.             if (v == null) { 
    106. 

     
     
  106.                 v = inflater.inflate(R.layout.listview_layout, null); 
    107. 

     
     
  107.             } 
    108. 

     
     
  108.             TextView myWebName = (TextView) v.findViewById(R.id.webName); 
    109. 

     
     
  109.             TextView myWebDescript = (TextView) v 
    110. 

     
     
  110.                     .findViewById(R.id.webDescript); 
    111. 

     
     
  111.             myWebName.setText("Android小功能案例" + position); 
    112. 

     
     
  112.             myWebDescript.setText("自己动手，丰衣足食，马国会" + position); 
    113. 

     
     
  113.             return v; 
    114. 

     
     
  114.         } 
    115. 

     
     
  115.     } 
    116. 

     
     
  116. } 
    117. 

     
     
  117. /* 
    118. 

     
     
  118.  * 重要属性 android:allowSingleTap：指示是否可以通过handle打开或关闭 
    119. 

     
     
  119.  * android:animateOnClick：指示是否当使用者按下手柄打开/关闭时是否该有一个动画。 
    120. 

     
     
  120.  * android:content：隐藏的内容 
    121. 

     
     
  121.  * android:handle：handle（手柄） 
    122. 

     
     
  122.  *  
    123. 

     
     
  123.  * 重要方法 animateClose()：关闭时实现动画
    124. 

     
     
  124.  * close()：即时关闭 getContent()：获取内容 
    125. 

     
     
  125.  * isMoving()：指示SlidingDrawer是否在移动   * isOpened()：指示SlidingDrawer是否已全部打开 
    126. 

     
     
  126.  * lock()：屏蔽触摸事件 setOnDrawerCloseListener(SlidingDrawer.OnDrawerCloseListener 
    127. 

     
     
  127.  * onDrawerCloseListener)：SlidingDrawer关闭时调用 unlock()：解除屏蔽触摸事件 
    128. 

     
     
  128.  * toggle()：切换打开和关闭的抽屉SlidingDrawer 
    129. 

     
     
  129.  */
    130.