Android学习指南之四十二:用户界面View之SlidingDrawer

       研究Launcher源码时,发现并学习了SlidingDrawer类,即通常所说的“抽屉”类。

       实际上SlidingDrawer的使用比较简单,需要包括handle和content。handle 就是当你点击它的时候,content要么抽抽屉要么关抽屉。别的不多说了,具体步骤如下:

       1、新建Android 工程,命名为SlidingDrawer。

       2、准备素材,在这里我的图标是用Launcher2 里面的图标,放在drawable-hdpi 文件夹目录结构如下图:

Android学习指南之四十二:用户界面View之SlidingDrawer

       3、设置main.xml 布局,代码如下:

XML/HTML代码
  1.   
  2. <DIV class="bct fc05 fc11 nbw-blog ztag js-fs2" __1346152994956__="ev_1952644776"><SPAN><?xml version="1.0" encoding="utf-8"?>    
  3. <LinearLayout xmlns:android="<A href="http://schemas.android.com/apk/res/android" target=_blank><FONT color=#0066cc>http://schemas.android.com/apk/res/android</FONT></A>"    
  4. android<IMG border=0 alt="" src="http://dev.10086.cn/cmdn/bbs/images/smilies/default/shocked.gif" smilieid="6">rientation="vertical"    
  5. android:layout_width="fill_parent"    
  6. android:layout_height="fill_parent"    
  7. android:background="#808080"    
  8. >    
  9. <SlidingDrawer    
  10. android:id="@+id/slidingdrawer"    
  11. android:layout_width="fill_parent"    
  12. android:layout_height="fill_parent"    
  13. android<IMG border=0 alt="" src="http://dev.10086.cn/cmdn/bbs/images/smilies/default/shocked.gif" smilieid="6">rientation="vertical"    
  14. android:handle="@+id/handle"    
  15. android:content="@+id/content">    
  16. <Button    
  17. android:id="@+id/handle"    
  18. android:layout_width="88dip"    
  19. android:layout_height="44dip"    
  20. android:background="@drawable/handle"    
  21. />    
  22. <LinearLayout    
  23. android:id="@+id/content"    
  24. android:layout_width="fill_parent"    
  25. android:layout_height="fill_parent"    
  26. android:background="#00ff00">    
  27. <Button    
  28. android:id="@+id/button"    
  29. android:layout_width="wrap_content"    
  30. android:layout_height="wrap_content"    
  31. android:text="Button"    
  32. />    
  33. <EditText    
  34. android:id="@+id/editText"    
  35. android:layout_width="fill_parent"    
  36. android:layout_height="wrap_content"    
  37. />    
  38. </LinearLayout>    
  39. </SlidingDrawer>    
  40. </LinearLayout>    
  41. <?xml version="1.0" encoding="utf-8"?>  
  42. <LinearLayout xmlns:android="<A href="http://schemas.android.com/apk/res/android" target=_blank><FONT color=#0066cc>http://schemas.android.com/apk/res/android</FONT></A>"   
  43. android<IMG border=0 alt="" src="http://dev.10086.cn/cmdn/bbs/images/smilies/default/shocked.gif" smilieid="6">rientation="vertical"  
  44. android:layout_width="fill_parent"  
  45. android:layout_height="fill_parent"  
  46. android:background="#808080"  
  47. >  
  48. <SlidingDrawer  
  49. android:id="@+id/slidingdrawer"  
  50. android:layout_width="fill_parent"  
  51. android:layout_height="fill_parent"  
  52. android<IMG border=0 alt="" src="http://dev.10086.cn/cmdn/bbs/images/smilies/default/shocked.gif" smilieid="6">rientation="vertical"  
  53. android:handle="@+id/handle"  
  54. android:content="@+id/content">  
  55. <Button  
  56. android:id="@+id/handle"  
  57. android:layout_width="88dip"  
  58. android:layout_height="44dip"  
  59. android:background="@drawable/handle"  
  60. />  
  61. <LinearLayout  
  62. android:id="@+id/content"  
  63. android:layout_width="fill_parent"  
  64. android:layout_height="fill_parent"  
  65. android:background="#00ff00">  
  66. <Button  
  67. android:id="@+id/button"  
  68. android:layout_width="wrap_content"  
  69. android:layout_height="wrap_content"  
  70. android:text="Button"  
  71. />  
  72. <EditText  
  73. android:id="@+id/editText"  
  74. android:layout_width="fill_parent"  
  75. android:layout_height="wrap_content"  
  76. />  
  77. </LinearLayout>  
  78. </SlidingDrawer>  
  79. </LinearLayout>  
  80. </SPAN>  
  81. </DIV>  

       4、设置handle 图标的样式,在drawable 里添加handle.xml,代码如下:

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <selector xmlns:android="<A href="http://schemas.android.com/apk/res/android" target=_blank><FONT color=#0066cc>http://schemas.android.com/apk/res/android</FONT></A>">    
  3. <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/handle_normal" />    
  4. <item android:state_pressed="true" android:drawable="@drawable/handle_pressed" />    
  5. <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/handle_focused" />    
  6. <item android:state_enabled="true" android:drawable="@drawable/handle_normal" />    
  7. <item android:state_focused="true" android:drawable="@drawable/handle_focused" />    
  8. </selector>    
  9. <?xml version="1.0" encoding="utf-8"?>  
  10. <selector xmlns:android="<A href="http://schemas.android.com/apk/res/android" target=_blank><FONT color=#0066cc>http://schemas.android.com/apk/res/android</FONT></A>">  
  11. <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/handle_normal" />  
  12. <item android:state_pressed="true" android:drawable="@drawable/handle_pressed" />  
  13. <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/handle_focused" />  
  14. <item android:state_enabled="true" android:drawable="@drawable/handle_normal" />  
  15. <item android:state_focused="true" android:drawable="@drawable/handle_focused" />  
  16. </selector>  

       5、运行之。将会得到如下效果:

Android学习指南之四十二:用户界面View之SlidingDrawer

Android学习指南之四十二:用户界面View之SlidingDrawer

       本文所讲内容较为简单,若想深入研究SlidingDrawer抽屉,可以查看Launcher源码。


android开发学习网 » Android学习指南之四十二:用户界面View之SlidingDrawer