Android中抽屉(SlidingDrawer)的使用介绍及实例记录

SlidingDrawer类就是抽屉样式的显示效果，是自SDK 1.5 才新加入的成员。

按下一个按钮，就能展开一个"程序集"菜单，里面包含了各式各样的程序，而SlidingDrawer.Widget 正是为了这样的效果所准备的，当你在布局有限的UI Layout 时，可以应用SlidingDrawaer 来在可视范围内放置更多组件，在需要的时候才拉出"抽屉"里的"子功能图标"。

SlidingDrawer 配置上采用了水平展开或垂直展开两种（android:orientation）方式。

在XML里必须指定其使用的android:handle 与android:content，前者委托要展开的图片（Layout 配置），后者则是要展开的Layout Content。handle和content是最重要的两个属性。

运行结果如下

   SlidingDrawer 的使用，并不需复杂的设置才能启用，关键在于XML 里的属性设置，稍后将会看到XML 里的描述。在主程序中所建立的SlidingDrawer 对象，为了捕捉"打开完毕"与"已经关闭"这两个事件，所设置的Listener 为SlidingDrawer.setOnDrawerOpenListener()与SlidingDrawer.setOnDrawerCloseListener()。

 

先来看个XML例子

中的main.xml中填写布局的时候

[java] view plaincopy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:background="#808080"  
    >  
<SlidingDrawer  
    android:id="@+id/slidingdrawer"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical"  
    android:handle="@+id/handle"  
    android:content="@+id/content">  
    <Button  
            android:id="@+id/handle"  
            android:layout_width="88dip"  
            android:layout_height="44dip"  
            android:background="@drawable/handle"  
        />  
    <LinearLayout  
        android:id="@+id/content"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:background="#00ff00">  
        <Button  
            android:id="@+id/button"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="Button"  
        />  
        <EditText  
            android:id="@+id/editText"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
        />  
    </LinearLayout>  
</SlidingDrawer>  
</LinearLayout>  

再来看看handle，在drawable中写入，当抽屉在不同的情况下显示不同的图标。

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/handle_normal" />  
    <item android:state_pressed="true" android:drawable="@drawable/handle_pressed" />  
    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/handle_focused" />  
    <item android:state_enabled="true" android:drawable="@drawable/handle_normal" />  
    <item android:state_focused="true" android:drawable="@drawable/handle_focused" />  
</selector>  

 

显示的效果就是，不触发的情况下收起来的，只看到抽屉。点击之后就会展开，看到一个按钮和一个输入框

      

下面来看看完整的使用例子：

首先来个简单好懂的：

XML文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical" android:background="@drawable/default_bg">
<SlidingDrawer android:layout_width="fill_parent"
android:layout_height="fill_parent" android:handle="@+id/handle"
android:content="@+id/content" android:orientation="vertical"
android:id="@+id/slidingdrawer">
<ImageButton android:id="@id/handle" android:layout_width="50dip"
android:layout_height="44dip" android:src="@drawable/up" />
<LinearLayout android:id="@id/content"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:text="这是一个滑动式抽屉的示例"
android:id="@+id/tv"
android:textSize="18px"
android:textColor="#000000"
android:gravity="center_vertical|center_horizontal"
android:layout_width="match_parent"
android:textStyle="bold"
android:layout_height="match_parent"></TextView>
</LinearLayout>
</SlidingDrawer>
</LinearLayout>

然后是Activity内容：

package com.wjq;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.SlidingDrawer;
import android.widget.TextView;

public class SlidingDrawerDemo extends Activity {
private SlidingDrawer mDrawer;
private ImageButton imbg;
private Boolean flag=false;
private TextView tv;
/* (non-Javadoc)
  * @see android.app.Activity#onCreate(android.os.Bundle)
  */
@Override
protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.sildingdrawer);

  imbg=(ImageButton)findViewById(R.id.handle);
  mDrawer=(SlidingDrawer)findViewById(R.id.slidingdrawer);
  tv=(TextView)findViewById(R.id.tv);

  mDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()
  {
   @Override
   public void onDrawerOpened() {
    flag=true;
    imbg.setImageResource(R.drawable.down);
   }
  });

  mDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener(){
   @Override
   public void onDrawerClosed() {
    flag=false;
    imbg.setImageResource(R.drawable.up);
   }
  });

  mDrawer.setOnDrawerScrollListener(new SlidingDrawer.OnDrawerScrollListener(){
   @Override
   public void onScrollEnded() {
    tv.setText("结束拖动");
   }
   @Override
   public void onScrollStarted() {
   tv.setText("开始拖动");
   }
  });
}
}

很简单的，只要在

setOnDrawerOpenListener()和setOnDrawerCloseListener()来进行处理就行了

再来看个复杂点的例子：

先看看XML文件：

 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.    >
   7.     <TextView
   8.        android:layout_width="fill_parent"
   9.        android:layout_height="wrap_content"
   10.       android:text="@string/hello"
   11.       android:textSize="16sp"
   12.     />
   13.    <SlidingDrawer  //这个就是抽屉里面的布局了
   14.       android:id="@+id/drawer1"
   15.       android:layout_width="fill_parent"
   16.       android:layout_height="fill_parent"
   17.       android:handle="@+id/layout1"
   18.       android:content="@+id/myContent1"
   19.       android:orientation="horizontal"
   20.     >
   21.      <LinearLayout
   22.         android:id="@id/layout1"
   23.         android:layout_width="35px"
   24.         android:layout_height="fill_parent"
   25.         android:background="@drawable/black"
   26.         android:gravity="center"
   27.       >
   28.        <ImageView
   29.           android:id="@+id/myImage1"
   30.           android:layout_width="wrap_content"
   31.          android:layout_height="wrap_content"
   32.          android:src="@drawable/open"
   33.        />
   34.      </LinearLayout>
   35.      <GridView
   36.        android:id="@id/myContent1"
   37.        android:layout_width="wrap_content"
   38.        android:layout_height="wrap_content"
   39.        android:numColumns="2"
   40.        android:background="@drawable/black"
   41.        android:gravity="center"
   42.      />
   43.    </SlidingDrawer>
   44.  </RelativeLayout>

然后再来看看Activity：

 1.  
 2.   import android.widget.GridView; 
 3.   import android.widget.ImageView;
 4.    import android.widget.SlidingDrawer;
   5.
   6.   public class EX04_27 extends Activity
   7.    {
   8.     private GridView gv;
   9.     private SlidingDrawer sd;
   10.    private ImageView im;
   11.    private int[] icons={R.drawable.alarm,R.drawable.calendar,
   12.                         R.drawable.camera,R.drawable.clock,
   13.                         R.drawable.music,R.drawable.tv};
   14.    private String[] items=
   15.     {
   16.       "Alarm","Calendar","Camera","Clock","Music","TV"
   17.     };
   18.
   19.    
   20.     @Override
   21.    public void onCreate(Bundle savedInstanceState)
   22.     {
   23.       super.onCreate(savedInstanceState);
   24.      
   25.       setContentView(R.layout.main);
   26.      
   27.       gv = (GridView)findViewById(R.id.myContent1);.//抽屉SlidingDrawing打开之后，布局就是GirdView来分布控件
   28.       sd = (SlidingDrawer)findViewById(R.id.drawer1);
   29.       im=(ImageView)findViewById(R.id.myImage1);
   30.
   31.      
   32.      MyGridViewAdapter adapter=new MyGridViewAdapter(this,items,icons);
   33.       gv.setAdapter(adapter);
   34.
   35.      
   36.       sd.setOnDrawerOpenListener
   37.       (new SlidingDrawer.OnDrawerOpenListener()
    {
    39.         @Override
    40.         public void onDrawerOpened()
    41.          {
    42.            im.setImageResource(R.drawable.close);//触及的图标变换
    43.          }
    44.       });
    45.      
    46.       sd.setOnDrawerCloseListener
    47.        (new SlidingDrawer.OnDrawerCloseListener()
    48.       {
    49.         @Override
    50.         public void onDrawerClosed()
    51.          {
    52.            im.setImageResource(R.drawable.open);
    53.          }
    54.       });
    55.     }
    56.   }


  

  MyGridViewAdapter 在本范例中，是为了"拉开SlindingDrawer"所要显示的GridView 配置
的图标，以下是自定义继承自BaseAdapter 的类。
    1.   
    2.
    3.   
    4.    public class MyGridViewAdapter extends BaseAdapter
    5.    {
    6.      private Context _con;
    7.      private String[] _items;
    8.      private int[] _icons;
    9.     
    10.     public MyGridViewAdapter(Context con,String[] items,int[] icons)
    11.     {
    12.      _con=con;
    13.      _items=items;
    14.      _icons=icons;
    15.     }
     16.
     17.     @Override
     18.     public int getCount()
     19.     {
     20.       return _items.length;
     21.     }
     22.
     23.     @Override
     24.     public Object getItem(int arg0)
     25.     {
     26.       return _items[arg0];
     27.     }
     28.
     29.     @Override
     30.     public long getItemId(int position)
     31.     {
     32.       return position;
     33.     }
     34.
     35.     @Override
     36.     public View getView(int position, View convertView, ViewGroup parent)
     37.     {
     38.       LayoutInflater factory = LayoutInflater.from(_con);
     39.      
     40.       View v = (View) factory.inflate(R.layout.grid, null);
     41.      
     42.       ImageView iv = (ImageView) v.findViewById(R.id.icon);
     43.       TextView tv = (TextView) v.findViewById(R.id.text);
     44.      
     45.       iv.setImageResource(_icons[position]);
     46.       tv.setText(_items[position]);
     47.       return v;
     48.     }
     49.   }

 

显示结果：