Sliding Drawer不同方向实现抽屉滑动效果

SlidingDrawer

                  

Sliding Drawer不同方向实现抽屉滑动效果_第1张图片

Sliding Drawer不同方向实现抽屉滑动效果_第2张图片

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

顯示畫面,完整的程式如下,

  1. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

  2. xmlns:tools=“http://schemas.android.com/tools”

  3. android:layout_width=“match_parent”

  4. android:layout_height=“match_parent” >

  5. <SlidingDrawer

  6. android:id=“@+id/SlidingDrawer1″

  7. android:layout_width=“match_parent”

  8. android:layout_height=“match_parent”

  9. android:layout_centerHorizontal=“true”

  10. android:orientation=“vertical”

  11. android:layout_marginLeft=“80dp”

  12. android:layout_marginTop=“150dp”

  13. android:content=“@+id/content”

  14. android:handle=“@+id/handle” >

  15. <Button

  16. android:id=“@+id/handle”

  17. android:layout_width=“wrap_content”

  18. android:layout_height=“wrap_content”

  19. android:text=“click me” />

  20. <LinearLayout

  21. android:id=“@+id/content”

  22. android:layout_width=“match_parent”

  23. android:layout_height=“match_parent”

  24. android:orientation=“vertical”

  25. android:background=“#aa0000aa”>

  26. <TextView

  27. android:id=“@+id/textView1″

  28. android:layout_width=“wrap_content”

  29. android:layout_height=“wrap_content”

  30. android:layout_marginTop=“20dp”

  31. android:layout_marginLeft=“42dp”

  32. android:textSize=“25dp”

  33. android:text=“Bottom to Top” />

  34. <CheckBox

  35. android:id=“@+id/checkBox1″

  36. android:layout_width=“wrap_content”

  37. android:layout_height=“wrap_content”

  38. android:layout_marginLeft=“20dp”

  39. android:layout_marginTop=“20dp”

  40. android:text=“Apple”

  41. android:textSize=“17dp”

  42. />

  43. <CheckBox

  44. android:id=“@+id/checkBox2″

  45. android:layout_width=“wrap_content”

  46. android:layout_height=“wrap_content”

  47. android:layout_marginLeft=“20dp”

  48. android:layout_marginTop=“10dp”

  49. android:text=“Banana”

  50. android:textSize=“17dp”

  51. />

  52. <CheckBox

  53. android:id=“@+id/checkBox3″

  54. android:layout_width=“wrap_content”

  55. android:layout_height=“wrap_content”

  56. android:layout_marginLeft=“20dp”

  57. android:layout_marginTop=“10dp”

  58. android:text=“powenko.com”

  59. android:textSize=“17dp”

  60. />

  61. </LinearLayout>

  62. </SlidingDrawer>

  63. </RelativeLayout>

這個畫面是透過SlidingDrawer 元件,來達到這樣的效果。

畫面顯示出來,看起來是這樣。

其實執行的時候,就會達到這樣的效果。

在這裡我們稍稍修改後就會有不

同的效果

right.xml

  1. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

  2. xmlns:tools=“http://schemas.android.com/tools”

  3. android:layout_width=“match_parent”

  4. android:layout_height=“match_parent” >

  5. <SlidingDrawer

  6. android:id=“@+id/SlidingDrawer1″

  7. android:layout_width=“match_parent”

  8. android:layout_height=“match_parent”

  9. android:layout_centerVertical=“true”

  10. android:orientation=“horizontal”

  11. android:layout_marginTop=“200dp”

  12. android:content=“@+id/content”

  13. android:handle=“@+id/handle” >

  14. <Button

  15. android:id=“@+id/handle”

  16. android:layout_width=“wrap_content”

  17. android:layout_height=“wrap_content”

  18. android:text=“Handle” />

  19. <LinearLayout

  20. android:id=“@+id/content”

  21. android:layout_width=“match_parent”

  22. android:layout_height=“match_parent”

  23. android:orientation=“vertical”

  24. android:background=“#00FF00″>

  25. <TextView

  26. android:id=“@+id/textView1″

  27. android:layout_width=“wrap_content”

  28. android:layout_height=“wrap_content”

  29. android:layout_marginTop=“30dp”

  30. android:layout_marginLeft=“42dp”

  31. android:textSize=“25dp”

  32. android:text=“Right to Left” />

  33. <CheckBox

  34. android:id=“@+id/checkBox1″

  35. android:layout_width=“wrap_content”

  36. android:layout_height=“wrap_content”

  37. android:layout_marginLeft=“20dp”

  38. android:layout_marginTop=“20dp”

  39. android:text=“Apple”

  40. android:textSize=“17dp”

  41. />

  42. <CheckBox

  43. android:id=“@+id/checkBox2″

  44. android:layout_width=“wrap_content”

  45. android:layout_height=“wrap_content”

  46. android:layout_marginLeft=“20dp”

  47. android:layout_marginTop=“10dp”

  48. android:text=“Banana”

  49. android:textSize=“17dp”

  50. />

  51. <CheckBox

  52. android:id=“@+id/checkBox3″

  53. android:layout_width=“wrap_content”

  54. android:layout_height=“wrap_content”

  55. android:layout_marginLeft=“20dp”

  56. android:layout_marginTop=“10dp”

  57. android:text=“powenko.com”

  58. android:textSize=“17dp”

  59. />

  60. </LinearLayout>

  61. </SlidingDrawer>

  62. </RelativeLayout>

畫面呈現的效果

其實執行的時候,就會達到這樣的效果。

那在改一下 來達到由上拉到下的效果

top.xml

  1. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

  2. xmlns:tools=“http://schemas.android.com/tools”

  3. android:layout_width=“match_parent”

  4. android:layout_height=“match_parent” >

  5. <SlidingDrawer

  6. android:id=“@+id/SlidingDrawer1″

  7. android:layout_width=“match_parent”

  8. android:layout_height=“match_parent”

  9. android:layout_centerHorizontal=“true”

  10. android:orientation=“vertical”

  11. android:layout_marginLeft=“80dp”

  12. android:layout_marginTop=“0dp”

  13. android:content=“@+id/content”

  14. android:handle=“@+id/handle”

  15. android:rotation=“180″ >

  16. <Button

  17. android:id=“@+id/handle”

  18. android:layout_width=“wrap_content”

  19. android:layout_height=“wrap_content”

  20. android:text=“click me”

  21. android:rotation=“180″

  22. />

  23. <LinearLayout

  24. android:id=“@+id/content”

  25. android:layout_width=“match_parent”

  26. android:layout_height=“match_parent”

  27. android:orientation=“vertical”

  28. android:background=“#aa0000aa”

  29. android:rotation=“180″ >

  30. <TextView

  31. android:id=“@+id/textView1″

  32. android:layout_width=“wrap_content”

  33. android:layout_height=“wrap_content”

  34. android:layout_marginTop=“20dp”

  35. android:layout_marginLeft=“42dp”

  36. android:textSize=“25dp”

  37. android:text=“Bottom to Top” />

  38. <CheckBox

  39. android:id=“@+id/checkBox1″

  40. android:layout_width=“wrap_content”

  41. android:layout_height=“wrap_content”

  42. android:layout_marginLeft=“20dp”

  43. android:layout_marginTop=“20dp”

  44. android:text=“Apple”

  45. android:textSize=“17dp”

  46. />

  47. <CheckBox

  48. android:id=“@+id/checkBox2″

  49. android:layout_width=“wrap_content”

  50. android:layout_height=“wrap_content”

  51. android:layout_marginLeft=“20dp”

  52. android:layout_marginTop=“10dp”

  53. android:text=“Banana”

  54. android:textSize=“17dp”

  55. />

  56. <CheckBox

  57. android:id=“@+id/checkBox3″

  58. android:layout_width=“wrap_content”

  59. android:layout_height=“wrap_content”

  60. android:layout_marginLeft=“20dp”

  61. android:layout_marginTop=“10dp”

  62. android:text=“powenko.com”

  63. android:textSize=“17dp”

  64. />

  65. </LinearLayout>

  66. </SlidingDrawer>

  67. </RelativeLayout>

其實執行的時候,就會達到這樣的效果。

那由左到右的 left.xml

  1. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

  2. xmlns:tools=“http://schemas.android.com/tools”

  3. android:layout_width=“match_parent”

  4. android:layout_height=“match_parent” >

  5. <SlidingDrawer

  6. android:id=“@+id/SlidingDrawer1″

  7. android:layout_width=“match_parent”

  8. android:layout_height=“match_parent”

  9. android:layout_centerVertical=“true”

  10. android:orientation=“horizontal”

  11. android:layout_marginTop=“200dp”

  12. android:content=“@+id/content”

  13. android:handle=“@+id/handle” android:rotation=“180″ >

  14. <Button

  15. android:id=“@+id/handle”

  16. android:layout_width=“wrap_content”

  17. android:layout_height=“wrap_content”

  18. android:text=“Handle” android:rotation=“180″/>

  19. <LinearLayout

  20. android:id=“@+id/content”

  21. android:layout_width=“match_parent”

  22. android:layout_height=“match_parent”

  23. android:orientation=“vertical”

  24. android:background=“#00FF00″ android:rotation=“180″>

  25. <TextView

  26. android:id=“@+id/textView1″

  27. android:layout_width=“wrap_content”

  28. android:layout_height=“wrap_content”

  29. android:layout_marginTop=“30dp”

  30. android:layout_marginLeft=“42dp”

  31. android:textSize=“25dp”

  32. android:text=“Left to Right” />

  33. <CheckBox

  34. android:id=“@+id/checkBox1″

  35. android:layout_width=“wrap_content”

  36. android:layout_height=“wrap_content”

  37. android:layout_marginLeft=“20dp”

  38. android:layout_marginTop=“20dp”

  39. android:text=“Apple”

  40. android:textSize=“17dp”

  41. />

  42. <CheckBox

  43. android:id=“@+id/checkBox2″

  44. android:layout_width=“wrap_content”

  45. android:layout_height=“wrap_content”

  46. android:layout_marginLeft=“20dp”

  47. android:layout_marginTop=“10dp”

  48. android:text=“Banana”

  49. android:textSize=“17dp”

  50. />

  51. <CheckBox

  52. android:id=“@+id/checkBox3″

  53. android:layout_width=“wrap_content”

  54. android:layout_height=“wrap_content”

  55. android:layout_marginLeft=“20dp”

  56. android:layout_marginTop=“10dp”

  57. android:text=“powenko.com”

  58. android:textSize=“17dp”

  59. />

  60. </LinearLayout>

  61. </SlidingDrawer>

  62. </RelativeLayout>

其實執行的時候,就會達到這樣的效果。

程式範例

Android 原始檔案

MainActivity.java的代碼片段如下所示:

  1. package com.powenko.tutorial_ui_slidingdrawer;

  2. import android.app.Activity;

  3. import android.os.Bundle;

  4. import android.view.Menu;

  5. importandroid.view.View;

  6. importandroid.view.View.OnClickListener;

  7. importandroid.widget.SlidingDrawer;

  8. importandroid.widget.Toast;

  9. publicclass MainActivity extends Activity {

  10. @Override

  11. protectedvoid onCreate(Bundle savedInstanceState) {

  12. super.onCreate(savedInstanceState);

  13. // setContentView(R.layout.top);

  14. setContentView(R.layout.bottom);

  15. // setContentView(R.layout.left);

  16. // setContentView(R.layout.right );

  17. }

  18. @Override

  19. publicboolean onCreateOptionsMenu(Menu menu) {

  20. // Inflate the menu; this adds items to the action bar if it is present.

  21. getMenuInflater().inflate(R.menu.activity_main, menu);

  22. returntrue;

  23. }

  24. }

好,我們來看看完成後的效果。

其實你會發現,這個效果其實只要layout 設定就好了,不用寫任何的程式,就可以達到這樣的效果。

 

引自:   http://www.powenko.com/en/?cat=158

你可能感兴趣的:(Sliding Drawer不同方向实现抽屉滑动效果)