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

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

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” >

6. <SlidingDrawer

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

8. android:layout_width=“match_parent”

9. android:layout_height=“match_parent”

10. android:layout_centerHorizontal=“true”

11. android:orientation=“vertical”

12. android:layout_marginLeft=“80dp”

13. android:layout_marginTop=“150dp”

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

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

17. <Button

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

19. android:layout_width=“wrap_content”

20. android:layout_height=“wrap_content”

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

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”>

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” />

39. <CheckBox

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

41. android:layout_width=“wrap_content”

42. android:layout_height=“wrap_content”

43. android:layout_marginLeft=“20dp”

44. android:layout_marginTop=“20dp”

45. android:text=“Apple”

46. android:textSize=“17dp”

47. />

49. <CheckBox

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

51. android:layout_width=“wrap_content”

52. android:layout_height=“wrap_content”

53. android:layout_marginLeft=“20dp”

54. android:layout_marginTop=“10dp”

55. android:text=“Banana”

56. android:textSize=“17dp”

57. />

59. <CheckBox

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

61. android:layout_width=“wrap_content”

62. android:layout_height=“wrap_content”

63. android:layout_marginLeft=“20dp”

64. android:layout_marginTop=“10dp”

65. android:text=“powenko.com”

66. android:textSize=“17dp”

67. />

69. </LinearLayout>

70. </SlidingDrawer>

72. </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” >

6. <SlidingDrawer

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

8. android:layout_width=“match_parent”

9. android:layout_height=“match_parent”

10. android:layout_centerVertical=“true”

11. android:orientation=“horizontal”

12. android:layout_marginTop=“200dp”

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

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

16. <Button

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

18. android:layout_width=“wrap_content”

19. android:layout_height=“wrap_content”

20. android:text=“Handle” />

22. <LinearLayout

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

24. android:layout_width=“match_parent”

25. android:layout_height=“match_parent”

26. android:orientation=“vertical”

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

29. <TextView

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

31. android:layout_width=“wrap_content”

32. android:layout_height=“wrap_content”

33. android:layout_marginTop=“30dp”

34. android:layout_marginLeft=“42dp”

35. android:textSize=“25dp”

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

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. />

48. <CheckBox

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

50. android:layout_width=“wrap_content”

51. android:layout_height=“wrap_content”

52. android:layout_marginLeft=“20dp”

53. android:layout_marginTop=“10dp”

54. android:text=“Banana”

55. android:textSize=“17dp”

56. />

58. <CheckBox

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

60. android:layout_width=“wrap_content”

61. android:layout_height=“wrap_content”

62. android:layout_marginLeft=“20dp”

63. android:layout_marginTop=“10dp”

64. android:text=“powenko.com”

65. android:textSize=“17dp”

66. />

68. </LinearLayout>

69. </SlidingDrawer>

71. </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” >

6. <SlidingDrawer

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

8. android:layout_width=“match_parent”

9. android:layout_height=“match_parent”

10. android:layout_centerHorizontal=“true”

11. android:orientation=“vertical”

12. android:layout_marginLeft=“80dp”

13. android:layout_marginTop=“0dp”

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

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

16. android:rotation=“180″ >

18. <Button

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

20. android:layout_width=“wrap_content”

21. android:layout_height=“wrap_content”

22. android:text=“click me”

23. android:rotation=“180″

24. />

26. <LinearLayout

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

28. android:layout_width=“match_parent”

29. android:layout_height=“match_parent”

30. android:orientation=“vertical”

31. android:background=“#aa0000aa”

32. android:rotation=“180″ >

34. <TextView

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

36. android:layout_width=“wrap_content”

37. android:layout_height=“wrap_content”

38. android:layout_marginTop=“20dp”

39. android:layout_marginLeft=“42dp”

40. android:textSize=“25dp”

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

43. <CheckBox

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

45. android:layout_width=“wrap_content”

46. android:layout_height=“wrap_content”

47. android:layout_marginLeft=“20dp”

48. android:layout_marginTop=“20dp”

49. android:text=“Apple”

50. android:textSize=“17dp”

51. />

53. <CheckBox

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

55. android:layout_width=“wrap_content”

56. android:layout_height=“wrap_content”

57. android:layout_marginLeft=“20dp”

58. android:layout_marginTop=“10dp”

59. android:text=“Banana”

60. android:textSize=“17dp”

61. />

63. <CheckBox

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

65. android:layout_width=“wrap_content”

66. android:layout_height=“wrap_content”

67. android:layout_marginLeft=“20dp”

68. android:layout_marginTop=“10dp”

69. android:text=“powenko.com”

70. android:textSize=“17dp”

71. />

73. </LinearLayout>

74. </SlidingDrawer>

76. </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” >

6. <SlidingDrawer

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

8. android:layout_width=“match_parent”

9. android:layout_height=“match_parent”

10. android:layout_centerVertical=“true”

11. android:orientation=“horizontal”

12. android:layout_marginTop=“200dp”

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

14. android:handle=“@+id/handle” 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=“Handle” android:rotation=“180″/>

22. <LinearLayout

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

24. android:layout_width=“match_parent”

25. android:layout_height=“match_parent”

26. android:orientation=“vertical”

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

29. <TextView

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

31. android:layout_width=“wrap_content”

32. android:layout_height=“wrap_content”

33. android:layout_marginTop=“30dp”

34. android:layout_marginLeft=“42dp”

35. android:textSize=“25dp”

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

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. />

48. <CheckBox

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

50. android:layout_width=“wrap_content”

51. android:layout_height=“wrap_content”

52. android:layout_marginLeft=“20dp”

53. android:layout_marginTop=“10dp”

54. android:text=“Banana”

55. android:textSize=“17dp”

56. />

58. <CheckBox

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

60. android:layout_width=“wrap_content”

61. android:layout_height=“wrap_content”

62. android:layout_marginLeft=“20dp”

63. android:layout_marginTop=“10dp”

64. android:text=“powenko.com”

65. android:textSize=“17dp”

66. />

68. </LinearLayout>

69. </SlidingDrawer>

71. </RelativeLayout>

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

程式範例

Android 原始檔案

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

1. package com.powenko.tutorial_ui_slidingdrawer;

3. import android.app.Activity;

4. import android.os.Bundle;

5. import android.view.Menu;

6. importandroid.view.View;

7. importandroid.view.View.OnClickListener;

8. importandroid.widget.SlidingDrawer;

9. importandroid.widget.Toast;

11. publicclass MainActivity extends Activity {

13. @Override

14. protectedvoid onCreate(Bundle savedInstanceState) {

15. super.onCreate(savedInstanceState);

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

17. setContentView(R.layout.bottom);

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

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

23. }

25. @Override

26. publicboolean onCreateOptionsMenu(Menu menu) {

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

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

29. returntrue;

30. }

32. }

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

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

 

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