SlidingDrawer

January 10, 2013   ·   0 Comments

Screen Shot 2013-01-09 at 9.20.27 PM

Screen Shot 2013-01-09 at 9.20.27 PM

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 設定就好了,不用寫任何的程式,就可以達到這樣的效果。

shareShare on FacebookShare on Google+Share on LinkedInEmail this to someonePrint this pageBuffer this pageDigg thisFlattr the authorShare on RedditPin on PinterestShare on StumbleUponShare on TumblrTweet about this on Twitter

By


Readers Comments (0)


You must be logged in to post a comment.

PowenKo’s Online Store

powenko_arduinoBook
Android7

Amazon

adsbygoogle

Recent Posts

Categories

Amazon