Android開發之SlidingDrawer(一)

Android開發之SlidingDrawer（一）

/*

 *  Android開發之SlidingDrawer

 *  北京Android俱樂部群：167839253

 * Created on: 2012-7-26

 * Author: blueeagle

 *  Email:liujiaxiang@gmail.com

 */

概述

       為了方便操作、美觀、節約空間等多方面原因的考慮，Android提供了SlidingDrawer這樣的控制項。SlidingDrawer——一個像抽屜一樣的控制項，我們暫且就稱之為抽屜。這種抽屜的效果隨處可見，比如Android通知欄的下拉效果，比如某個網頁工具箱的彈出框等等。

       我們來看一下SDK中是如何定義的：SlidingDrawer隱藏了再螢幕外的一些內容，並且允許使用者用拖拽“手柄”的方式使得內容再次顯示於螢幕中。SlidingDrawer可以用於水平和垂直兩個方向。一個SlidingDrawer控制項由兩個子View來組成，一個是“手柄”一個就是拖拽出來的內容。SlidingDrawer應該覆蓋在layout上面，這就是說SlidingDrawer應該只被用於一個FrameLayout或者是 RelativeLayout之中。SlidingDrawer的大小定義了它被拖拽出來的內容將佔據多大的空間。因此，SlidingDrawer通常使用match_parent來定義其大小。SlidingDrawer還必須定義“手柄”和其內容這兩個View的id號。

例如下面的布局檔案就是一個簡單的SlidingDrawer的描述:

<SlidingDrawer    android:id="@+id/drawer"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:handle="@+id/handle"    android:content="@+id/content">     <ImageView        android:id="@+id/handle"        android:layout_width="88dip"        android:layout_height="44dip" />     <GridView        android:id="@+id/content"         android:layout_width="match_parent"        android:layout_height="match_parent" /> </SlidingDrawer>

XML檔案中的屬性

屬性名稱	描述
android:allowSingleTap	是否可通過單擊handle開啟或關閉抽屜。 預設是true。（如果是false，使用者必須通過拖動，滑動或者使用軌跡球。）
android:animateOnClick	顧名思義，點擊的時候是否有動畫。預設是true。
android:bottomOffset	“手柄”距離SlidingDrawer底部的額外距離 。
android:content	SlidingDrawer的內容。
android:handle	SlidingDrawer的“手柄”。
android:orientation	SlidingDrawer的方向。
android:topOffset	“手柄”距離SlidingDrawer頂部的額外距離 。

 

一些重要的方法：

void setOnDrawerCloseListener (SlidingDrawer.OnDrawerCloseListener onDrawerCloseListener)

設定一個監聽器，用來接收當抽屜被關閉時候的通知。

void setOnDrawerOpenListener (SlidingDrawer.OnDrawerOpenListener onDrawerOpenListener)

Since: API Level 3

設定一個監聽器，用來接收當抽屜被開啟的時候的通知。

void setOnDrawerScrollListener (SlidingDrawer.OnDrawerScrollListener onDrawerScrollListener)

設定一個監聽器，用來接收當抽屜處於正在開啟或者正在結束的滾動時候的通知。

animateClose()：

使用動畫關閉抽屜。

animateOpen ()：

使用動畫開啟抽屜

getContent()：

擷取內容

isMoving()：

指示SlidingDrawer是否在移動。

isOpened()：

指示SlidingDrawer是否已全部開啟

lock()：

屏蔽觸摸事件。

unlock()：

解除屏蔽觸摸事件。

toggle()：

切換開啟和關閉的抽屜SlidingDrawer。

 

一個簡單的例子

我們可以引用SDK中給我們提供的XML檔案。

在JAVA檔案中如下編寫：

public class SlidingDrawerDemoActivity extends Activity {              private SlidingDrawer myDrawer;            private ImageView myImageView;            private GridView myGridView;            @Override            protected void onCreate(Bundle savedInstanceState) {                super.onCreate(savedInstanceState);                setContentView(R.layout.main);                myDrawer = (SlidingDrawer) findViewById(R.id.drawer);                myImageView = (ImageView)findViewById(R.id.handle);                myGridView = (GridView)findViewById(R.id.content);                myDrawer.setOnDrawerOpenListener(newSlidingDrawer.OnDrawerOpenListener() {                    @Override                    public void onDrawerOpened() {                        myImageView.setImageResource(R.drawable.down);                    }                });                myDrawer.setOnDrawerCloseListener(newSlidingDrawer.OnDrawerCloseListener() {                    @Override                    public void onDrawerClosed() {                        myImageView.setImageResource(R.drawable.up);                    }                });                    myGridView.setAdapter(new ImageAdapter(this));                   myGridView.setOnItemClickListener(newOnItemClickListener(){                     @Override                     public void onItemClick(AdapterView<?> arg0, Viewarg1, int arg2,                             long arg3) {                         // TODO Auto-generated method stub                         Toast.makeText(SlidingDrawerDemoActivity.this, "你選擇了"+(arg2+1)+" 號圖片 ", Toast.LENGTH_SHORT).show();                     }                 });    }}

對於ImageAdapter這個類前面我們已經討論過，這裡就不再贅述。上面代碼的效果如下：

當然，還需要在GridView的XML檔案中添加如下幾個參數：            

android:numColumns="auto_fit" 

android:verticalSpacing="10dp" 

android:horizontalSpacing="10dp" 

android:columnWidth="90dp" 

android:stretchMode="columnWidth" 

android:gravity="center"

如果將SildingDrawer的高度屬性改變一下例如：android:layout_height="100dip"，則效果就會變成如所示：

如果將SildingDrawer的topOffset屬性改變一下例如：android:topOffset="150dip"，則效果就會變成如所示：

小結

上述簡單的例子顯然不能夠滿足應用開發的需求，我們在寫程式的時候，經常遇見從左至右，從上到下，控制SlidingDrawer的大小等需求，要完成這個操作，我們需要自訂一個SlidingDrawer。自訂的SlidingDrawer則相當於是繼承了一個LinearLayout，我們會在後面的章節詳細討論如何自訂一個SlidingDrawer。