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

<?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>

<?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>

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

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);
            }
        });
    }
}

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);
			}
		});
	}
}