Android进阶2之SlidingDrawer（滑动式抽屉）

一概述

SlidingDrawer（滑动式抽屉）隐藏屏外的内容，并允许用户拖拽一个handle以显示隐藏的内容。SlidingDrawer可以在垂直或者水平使用。它由两个子视图组成：一个是用户拖拽的handle（柄），另一个是随着拖动变化的content（内容）。SlidingDrawer应当作为内部布局的覆盖来使用，也就是说SlidingDrawer内部应该使用FrameLayout或RelativeLayout布局。SlidingDrawer的大小决定了其内容显示时所占空间的大小，所以它的尺寸一般定义为match_parent。在XML布局中SlidingDrawer必须指定handle和content的id：

二 xml属性

属性名称	描述
android:allowSingleTap	指示是否可通过单击handle打开或关闭（如果是false，刚用户必须通过拖动，滑动或者使用轨迹球，来打开/关闭抽屉。）默认的是true。
android:animateOnClick	指示当用户点击handle的时候，抽屉是否以动画的形式打开或关闭。默认的是true。
android:bottomOffset	Handle距离SlidingDrawer底部的额外距离
android:content	标识SlidingDrawer的内容
android:handle	标识SlidingDrawer的handle（译者注：如按钮）
android:orientation	SlidingDrawer的方向。必须是下面的一个值： 常量 值 描述 horizontal 0 水平方向对齐 vertical 1 竖直方向对齐
android:topOffset	Handle距离SlidingDrawer顶部的额外距离

具体实现：

main.xml

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:background="@drawable/b" >  
6.   
7.     <SlidingDrawer  
8.         android:id="@+id/slidingDrawer"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"  
11.         android:content="@+id/content"  
12.         android:handle="@+id/handle"  
13.         android:orientation="vertical" >  
14.           
15.         <!-- 抽屉把手 -->  
16.         <ImageButton  
17.             android:id="@+id/handle"  
18.             android:layout_width="50dip"  
19.             android:layout_height="44dip"  
20.             android:src="@drawable/arrow_bottom_pressed" />  
21.         <!-- 抽屉内容布局 -->  
22.         <LinearLayout  
23.             android:id="@+id/content"  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="fill_parent"  
26.             android:background="@drawable/a"  
27.             android:orientation="vertical" >  
28.   
29.             <LinearLayout  
30.                 android:layout_width="fill_parent"  
31.                 android:layout_height="wrap_content"  
32.                 android:orientation="horizontal" >  
33.   
34.                 <ImageView  
35.                     android:layout_width="150dip"  
36.                     android:layout_height="100dip"  
37.                     android:src="@drawable/free_bg_10" />  
38.   
39.                 <ImageView  
40.                     android:layout_width="150dip"  
41.                     android:layout_height="100dip"  
42.                     android:src="@drawable/free_bg_8" />  
43.             </LinearLayout>  
44.   
45.             <LinearLayout  
46.                 android:layout_width="fill_parent"  
47.                 android:layout_height="wrap_content"  
48.                 android:layout_marginTop="20dip"  
49.                 android:orientation="horizontal" >  
50.   
51.                 <ImageView  
52.                     android:layout_width="150dip"  
53.                     android:layout_height="100dip"  
54.                     android:src="@drawable/free_bg_9" />  
55.   
56.                 <ImageView  
57.                     android:layout_width="150dip"  
58.                     android:layout_height="100dip"  
59.                     android:src="@drawable/free_bg_small_1" />  
60.             </LinearLayout>  
61.         </LinearLayout>  
62.     </SlidingDrawer>  
63.   
64. </RelativeLayout>  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/b" >

    <SlidingDrawer
        android:id="@+id/slidingDrawer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:content="@+id/content"
        android:handle="@+id/handle"
        android:orientation="vertical" >
        
        <!-- 抽屉把手 -->
        <ImageButton
            android:id="@+id/handle"
            android:layout_width="50dip"
            android:layout_height="44dip"
            android:src="@drawable/arrow_bottom_pressed" />
        <!-- 抽屉内容布局 -->
        <LinearLayout
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:background="@drawable/a"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <ImageView
                    android:layout_width="150dip"
                    android:layout_height="100dip"
                    android:src="@drawable/free_bg_10" />

                <ImageView
                    android:layout_width="150dip"
                    android:layout_height="100dip"
                    android:src="@drawable/free_bg_8" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dip"
                android:orientation="horizontal" >

                <ImageView
                    android:layout_width="150dip"
                    android:layout_height="100dip"
                    android:src="@drawable/free_bg_9" />

                <ImageView
                    android:layout_width="150dip"
                    android:layout_height="100dip"
                    android:src="@drawable/free_bg_small_1" />
            </LinearLayout>
        </LinearLayout>
    </SlidingDrawer>

</RelativeLayout>

抽屉里的内容是两行图片，一行两个。

[java] view plain copy print ?

1. package xiaosi.SlidingDrawer;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.ImageButton;  
6. import android.widget.SlidingDrawer;  
7.   
8. public class SlidingDrawerActivity extends Activity  
9. {  
10.     private SlidingDrawer slidingDrawer;  
11.     private ImageButton handle = null;  
12.   
13.     /** Called when the activity is first created. */  
14.     @Override  
15.     public void onCreate(Bundle savedInstanceState)  
16.     {  
17.         super.onCreate(savedInstanceState);  
18.         setContentView(R.layout.main);  
19.         handle = (ImageButton)findViewById(R.id.handle);  
20.         slidingDrawer = (SlidingDrawer) findViewById(R.id.slidingDrawer);  
21.         /* 
22.          * 打开抽屉 
23.          */  
24.         slidingDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()  
25.         {  
26.             public void onDrawerOpened()  
27.             {  
28.                 /* 
29.                  * 给抽屉把手换图片 
30.                  */  
31.                 handle.setImageResource(R.drawable.arrow_bottom_pressed);  
32.             }  
33.         });  
34.         /* 
35.          * 关闭抽屉 
36.          */  
37.         slidingDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() {  
38.             public void onDrawerClosed()  
39.             {  
40.                 /* 
41.                  * 给抽屉把手换图片 
42.                  */  
43.                 handle.setImageResource(R.drawable.arrow_top_pressed);  
44.             }  
45.         });  
46.     }  
47. }  

package xiaosi.SlidingDrawer;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.SlidingDrawer;

public class SlidingDrawerActivity extends Activity
{
	private SlidingDrawer slidingDrawer;
	private ImageButton handle = null;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		handle = (ImageButton)findViewById(R.id.handle);
		slidingDrawer = (SlidingDrawer) findViewById(R.id.slidingDrawer);
		/*
		 * 打开抽屉
		 */
		slidingDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()
		{
			public void onDrawerOpened()
			{
				/*
				 * 给抽屉把手换图片
				 */
				handle.setImageResource(R.drawable.arrow_bottom_pressed);
			}
		});
		/*
		 * 关闭抽屉
		 */
		slidingDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() {
			public void onDrawerClosed()
			{
				/*
				 * 给抽屉把手换图片
				 */
				handle.setImageResource(R.drawable.arrow_top_pressed);
			}
		});
	}
}