Sliding Drawer不同方向实现抽屉滑动效果
SlidingDrawer
SlidingDrawer的範例程式
SlidingDrawer 是一個很好用的畫面展開的元件，而且使用的方法，比你想的簡單，只要在layout 上面做就手腳就可以了，完全不用動到程式。
範例程式
Android的 的範例程式其路徑爲： Tutorial_ui_slidingdrawer
其中各個文件目錄爲：
AndroidManifest.xml：各個應用描述文件
asset/：資産文件
res/：資源檔案目錄
res/layout/畫面設定資源代碼
MainActivity.java 主程式
概念性描述
SlidingDrawer 可以用在很多好的地方，例如手機版本的UI，當你點選桌面的程式集的時候，便會把所有的程式列出來。
SDK版本： API 3,Android 1.5
畫面設定資源
這一個功能是透過 layout 來表現。
Buttom.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” >
-
<SlidingDrawer
-
android:id=“@+id/SlidingDrawer1″
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:layout_centerHorizontal=“true”
-
android:orientation=“vertical”
-
android:layout_marginLeft=“80dp”
-
android:layout_marginTop=“150dp”
-
android:content=“@+id/content”
-
android:handle=“@+id/handle” >
-
<Button
-
android:id=“@+id/handle”
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:text=“click me” />
-
<LinearLayout
-
android:id=“@+id/content”
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:orientation=“vertical”
-
android:background=“#aa0000aa”>
-
<TextView
-
android:id=“@+id/textView1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginTop=“20dp”
-
android:layout_marginLeft=“42dp”
-
android:textSize=“25dp”
-
android:text=“Bottom to Top” />
-
<CheckBox
-
android:id=“@+id/checkBox1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“20dp”
-
android:text=“Apple”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox2″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“Banana”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox3″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“powenko.com”
-
android:textSize=“17dp”
-
/>
-
</LinearLayout>
-
</SlidingDrawer>
-
</RelativeLayout>
這個畫面是透過SlidingDrawer 元件，來達到這樣的效果。
畫面顯示出來，看起來是這樣。
其實執行的時候，就會達到這樣的效果。
在這裡我們稍稍修改後就會有不
同的效果
right.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” >
-
<SlidingDrawer
-
android:id=“@+id/SlidingDrawer1″
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:layout_centerVertical=“true”
-
android:orientation=“horizontal”
-
android:layout_marginTop=“200dp”
-
android:content=“@+id/content”
-
android:handle=“@+id/handle” >
-
<Button
-
android:id=“@+id/handle”
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:text=“Handle” />
-
<LinearLayout
-
android:id=“@+id/content”
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:orientation=“vertical”
-
android:background=“#00FF00″>
-
<TextView
-
android:id=“@+id/textView1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginTop=“30dp”
-
android:layout_marginLeft=“42dp”
-
android:textSize=“25dp”
-
android:text=“Right to Left” />
-
<CheckBox
-
android:id=“@+id/checkBox1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“20dp”
-
android:text=“Apple”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox2″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“Banana”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox3″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“powenko.com”
-
android:textSize=“17dp”
-
/>
-
</LinearLayout>
-
</SlidingDrawer>
-
</RelativeLayout>
畫面呈現的效果
其實執行的時候，就會達到這樣的效果。
那在改一下 來達到由上拉到下的效果
top.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” >
-
<SlidingDrawer
-
android:id=“@+id/SlidingDrawer1″
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:layout_centerHorizontal=“true”
-
android:orientation=“vertical”
-
android:layout_marginLeft=“80dp”
-
android:layout_marginTop=“0dp”
-
android:content=“@+id/content”
-
android:handle=“@+id/handle”
-
android:rotation=“180″ >
-
<Button
-
android:id=“@+id/handle”
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:text=“click me”
-
android:rotation=“180″
-
/>
-
<LinearLayout
-
android:id=“@+id/content”
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:orientation=“vertical”
-
android:background=“#aa0000aa”
-
android:rotation=“180″ >
-
<TextView
-
android:id=“@+id/textView1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginTop=“20dp”
-
android:layout_marginLeft=“42dp”
-
android:textSize=“25dp”
-
android:text=“Bottom to Top” />
-
<CheckBox
-
android:id=“@+id/checkBox1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“20dp”
-
android:text=“Apple”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox2″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“Banana”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox3″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“powenko.com”
-
android:textSize=“17dp”
-
/>
-
</LinearLayout>
-
</SlidingDrawer>
-
</RelativeLayout>
其實執行的時候，就會達到這樣的效果。
那由左到右的 left.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” >
-
<SlidingDrawer
-
android:id=“@+id/SlidingDrawer1″
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:layout_centerVertical=“true”
-
android:orientation=“horizontal”
-
android:layout_marginTop=“200dp”
-
android:content=“@+id/content”
-
android:handle=“@+id/handle” android:rotation=“180″ >
-
<Button
-
android:id=“@+id/handle”
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:text=“Handle” android:rotation=“180″/>
-
<LinearLayout
-
android:id=“@+id/content”
-
android:layout_width=“match_parent”
-
android:layout_height=“match_parent”
-
android:orientation=“vertical”
-
android:background=“#00FF00″ android:rotation=“180″>
-
<TextView
-
android:id=“@+id/textView1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginTop=“30dp”
-
android:layout_marginLeft=“42dp”
-
android:textSize=“25dp”
-
android:text=“Left to Right” />
-
<CheckBox
-
android:id=“@+id/checkBox1″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“20dp”
-
android:text=“Apple”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox2″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“Banana”
-
android:textSize=“17dp”
-
/>
-
<CheckBox
-
android:id=“@+id/checkBox3″
-
android:layout_width=“wrap_content”
-
android:layout_height=“wrap_content”
-
android:layout_marginLeft=“20dp”
-
android:layout_marginTop=“10dp”
-
android:text=“powenko.com”
-
android:textSize=“17dp”
-
/>
-
</LinearLayout>
-
</SlidingDrawer>
-
</RelativeLayout>
其實執行的時候，就會達到這樣的效果。
程式範例
Android 原始檔案
MainActivity.java的代碼片段如下所示：
-
package com.powenko.tutorial_ui_slidingdrawer;
-
import android.app.Activity;
-
import android.os.Bundle;
-
import android.view.Menu;
-
importandroid.view.View;
-
importandroid.view.View.OnClickListener;
-
importandroid.widget.SlidingDrawer;
-
importandroid.widget.Toast;
-
publicclass MainActivity extends Activity {
-
@Override
-
protectedvoid onCreate(Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
// setContentView(R.layout.top);
-
setContentView(R.layout.bottom);
-
// setContentView(R.layout.left);
-
// setContentView(R.layout.right );
-
}
-
@Override
-
publicboolean onCreateOptionsMenu(Menu menu) {
-
// Inflate the menu; this adds items to the action bar if it is present.
-
getMenuInflater().inflate(R.menu.activity_main, menu);
-
returntrue;
-
}
-
}
好，我們來看看完成後的效果。
其實你會發現，這個效果其實只要layout 設定就好了，不用寫任何的程式，就可以達到這樣的效果。
引自： http://www.powenko.com/en/?cat=158