Android UI開發第九篇——SlidingDrawer 抽屜效果

SlidingDrawer是自SDK 1.5才新加入的，實現Launcher的抽屜效果。SlidingDrawer配置上採用了水平展開或垂直展開兩種（android:orientation）方式，在XML裡必須指定其使用的android:handle與android:content，前者委託要展開的圖片（Layout配置），後者則是要展開的Layout Content。

 

1. <?xml version="1.0" encoding="utf-8"?> 
2.  
3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      
4.  
5.     android:orientation="vertical"      
6.  
7.     android:layout_width="fill_parent"      
8.  
9.     android:layout_height="fill_parent"    
10.  
11.     android:background="@drawable/i1"      
12.  
13.     >       
14.  
15. <SlidingDrawer       
16.  
17.     android:id="@+id/slidingdrawer"      
18.  
19.     android:layout_width="fill_parent"      
20.  
21.     android:layout_height="fill_parent"      
22.  
23.     android:orientation="vertical"      
24.  
25.     android:handle="@+id/handle"      
26.  
27.     android:content="@+id/content">       
28.  
29.     <Button       
30.  
31.             android:id="@+id/handle"      
32.  
33.             android:layout_width="wrap_content"     
34.  
35.             android:layout_height="wrap_content"   
36.  
37.             android:background="@drawable/ic_dialog_dialer"      
38.  
39.         />       
40.  
41.     <LinearLayout       
42.  
43.         android:id="@+id/content"      
44.  
45.         android:layout_width="fill_parent"      
46.  
47.         android:layout_height="fill_parent" 
48.  
49.         android:background="@drawable/default_bg">       
50.  
51.         <Button       
52.  
53.             android:id="@+id/button"      
54.  
55.             android:layout_width="wrap_content"      
56.  
57.             android:layout_height="wrap_content"      
58.  
59.             android:text="Button"      
60.  
61.         />       
62.  
63.         <EditText       
64.  
65.             android:id="@+id/editText"      
66.  
67.             android:layout_width="fill_parent"      
68.  
69.             android:layout_height="wrap_content"      
70.  
71.         />       
72.  
73.     </LinearLayout>       
74.  
75. </SlidingDrawer>       
76.  
77. </LinearLayout>     

補充：

 

 

一、簡介 SlidingDrawer隱藏屏外的內容，並允許使用者通過handle以顯示隱藏內容。它可以垂直或水平滑動，它有倆個View組成，其一是可以拖動的handle,其二是隱藏內容的View.它裡面的控制元件必須設定佈局，在佈局檔案中必須指定handle和content. 例如下面 <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> 二、重要屬性 android:allowSingleTap：指示是否可以通過handle開啟或關閉 android:animateOnClick：指示是否當使用者按下手柄開啟/關閉時是否該有一個動畫。 android:content：隱藏的內容 android:handle：handle（手柄） 三、重要方法 animateClose()：關閉時實現動畫。 close()：即時關閉 getContent()：獲取內容 isMoving()：指示SlidingDrawer是否在移動。 isOpened()：指示SlidingDrawer是否已全部開啟 lock()：遮蔽觸控事件。 setOnDrawerCloseListener(SlidingDrawer.OnDrawerCloseListener onDrawerCloseListener)：SlidingDrawer關閉時呼叫 unlock()：解除遮蔽觸控事件。 toggle()：切換開啟和關閉的抽屜SlidingDrawer。 四、完整例項 1.佈局檔案slidingdrawer.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> 2.Java程式碼 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("開始拖動"); } }); } }

     本文轉自xyz_lmn51CTO部落格，原文連結：http://blog.51cto.com/xyzlmn/817346，如需轉載請自行聯絡原作者