06 SlidingDrawer的使用

在开发的一个小 App 中用到了SlidingDrawer 控件，这里把工程中SlidingDrawer的使用方法总结了一下，保留起来以便下次方便使用。

一，  界面的效果

SlidingDrawer 在主界面上会有一个按钮，如图

打开后的效果

二，工程的组件和结构

主要涉及的类有三个

MainActivity，  SlidingDrawer， GridViewAdapter

Layout 文件有2个

activity_main.xml  和 grid.xml

MainActivity 和 activity_main.xml 不用多说是程序的主要框架，在activity_main.xml中会添加SlidingDrawer组件，当SlidingDrawer打开时，也就是把抽屉打开时我们希望把抽屉中的内容以某种方式展组织一下现出来，这里用到的就是一个GridView(就是grid.xml和GridViewAdapter)，他们会和SlidingDrawer绑定在一起。当然如果想以list的方式展现出来也没有问题。就定义ListView就好了。

有个图能清楚点，实际上在activity_main.xml 中 一个SlidingDrawer是包含了一个GridView,这样在打开的时候Grid就会被显示出来。

关于 MyGridViewAdapter，它是继承自BaseAdapter，是数据源和UI组件之间的桥梁，这里我们如果想为GridView的每个格子添加一个图标和字符的话，并不是直接赋值给GridView，而是通过创建一Adapter，并且把名称和图标的数组传递给他，并且由Adapter实现相应的接口。通过它实现显示和控制的分离。

三，代码实例

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Welcome to the SlidingDrawer Sampel" />

    <SlidingDrawer
        android:id="@+id/slidingdrawer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:content="@+id/SettingContent"
        android:handle="@+id/sliding_switch"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@id/sliding_switch"
            android:layout_width="50dip"
            android:layout_height="44dip"
            android:src="@drawable/open" />

        <GridView
            android:id="@id/SettingContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:numColumns="2" />
    </SlidingDrawer>
    
    
</RelativeLayout>

Main_Activity.java

package com.example.slidingdrawer;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.view.Menu;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.SlidingDrawer;
import android.view.View;


public class MainActivity extends Activity 
{
    private SlidingDrawer mDrawer;
    private Boolean m_flag = false;
    private ImageButton imgBtnMenu;
    private GridView girdView_MenuContent;
    
    private int[] ICONs = { R.drawable.pic_01, R.drawable.pic_02,
            R.drawable.pic_03, R.drawable.pic_04};

    private String[] items = { "ITEM A", "ITEM B", "ITEM C", "ITEM D" };

    
	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
        mDrawer = (SlidingDrawer) findViewById(R.id.slidingdrawer);
        imgBtnMenu = (ImageButton) findViewById(R.id.sliding_switch);
        girdView_MenuContent = (GridView) findViewById(R.id.SettingContent);
        
        MyGridViewAdapter adapter = new MyGridViewAdapter(this, items, ICONs);
        girdView_MenuContent.setAdapter(adapter);


        girdView_MenuContent.setOnItemClickListener(new OnItemClickListener()
        {
            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3)
            {
                switch (arg2)
                {
                case 0:
                	new AlertDialog.Builder(MainActivity.this)
                	 .setTitle("Your Selection") 
                	 .setMessage("I Choose ITEM A")
                	 	.setPositiveButton("确定", null)
                	 	.show();                	
                    break;
                case 1:
                	new AlertDialog.Builder(MainActivity.this)
                	 .setTitle("Your Selection") 
                	 .setMessage("I Choose ITEM B")
                	 	.setPositiveButton("确定", null)
                	 	.show();                	                	
                    break;
                case 2:
                	new AlertDialog.Builder(MainActivity.this)
               	 .setTitle("Your Selection") 
               	 .setMessage("I Choose ITEM C")
               	 	.setPositiveButton("确定", null)
               	 	.show();                	
                    break;
                case 3:
                	new AlertDialog.Builder(MainActivity.this)
               	 .setTitle("Your Selection") 
               	 .setMessage("I Choose ITEM D")
               	 	.setPositiveButton("确定", null)
               	 	.show();                	
                default:
                    break;
                }
            }
        });

        
        mDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()
        {
            @Override
            public void onDrawerOpened()
            {
            	m_flag = true;
                imgBtnMenu.setImageResource(R.drawable.close);
            }
        });

        mDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener()
        {
            @Override
            public void onDrawerClosed()
            {
            	m_flag = false;
                imgBtnMenu.setImageResource(R.drawable.open);
            }
        });

        mDrawer.setOnDrawerScrollListener(new SlidingDrawer.OnDrawerScrollListener()
        {
            @Override
            public void onScrollEnded()
            {
            }

            @Override
            public void onScrollStarted()
            {
            }
        });
	}
}

四，源码下载