Drawer panel Research

Source: Internet
Author: User

The first response to drawer controls is that the system provides the following:

In fact, the principle of the control is simply described as follows:

* Viewgroup such as linearlayout is used to place various views.

* The button is used to expand or collapse viewgroup.

Therefore, the general layout of the control should be as follows:

JavaCode

    1. <Panel>
    2. <Button/>
    3. <Linearlayout>
    4. <Textview/>
    5. <Imageview/>
    6. </Linearlayout>
    7. </Panel>

To reduce the development difficulty, I plan to define panel extends linearlayout

[Code steps]

1. Define the attributes used by XML

XML Code

    1. <? XML version = "1.0" encoding = "UTF-8"?>
    2. <Resources>
    3. <Declare-styleable name = "Panel">
    4. // Animation evolution duration
    5. <ATTR name = "animationduration" format = "integer"/>
    6. // Only four values can be removed from the position
    7. <ATTR name = "position">
    8. <Enum name = "TOP" value = "0"/>
    9. <Enum name = "bottom" value = "1"/>
    10. <Enum name = "Left" value = "2"/>
    11. <Enum name = "right" value = "3"/>
    12. </ATTR>
    13. // Whether the function is animated
    14. <ATTR name = "animationenable" format = "Boolean"/>
    15. </Declare-styleable>
    16. </Resources>

2. A standard XML is:

XML Code

  1. <Org. Panel. Panel
  2. Android: Id = "@ + ID/leftpanel"
  3. Android: layout_width = "wrap_content"
  4. Android: layout_height = "wrap_content"
  5. Panel: Position = "left"
  6. Panel: animationduration = "10"
  7. Panel: animationenable = "true"
  8. Android: layout_gravity = "left"
  9. >
  10. <Button
  11. Android: layout_width = "wrap_content"
  12. Android: layout_height = "wrap_content"
  13. />
  14. <Linearlayout
  15. Android: Orientation = "vertical"
  16. Android: layout_width = "wrap_content"
  17. Android: layout_height = "wrap_content"
  18. >
  19. <Checkbox
  20. Android: layout_width = "fill_parent"
  21. Android: layout_height = "wrap_content"
  22. Android: text = "top panel! "
  23. Android: textsize = "16dip"
  24. Android: textcolor = "# Eee"
  25. Android: textstyle = "bold"
  26. />
  27. <Edittext
  28. Android: layout_width = "200dip"
  29. Android: layout_height = "wrap_content"
  30. />
  31. <Button
  32. Android: layout_width = "100dp"
  33. Android: layout_height = "wrap_content"
  34. Android: text = "OK! "
  35. />
  36. </Linearlayout>
  37. </Org. Panel. Panel>

3. parse the XML and set it

Java code

  1. Public Panel (context, attributeset attrs ){
  2. Super (context, attrs );
  3. Typedarray A = context. obtainstyledattributes (attrs, R. styleable. Panel );
  4. Mduration = A. getinteger (R. styleable. panel_animation duration, 750 );
  5. Mposition = A. getinteger (R. styleable. panel_position, bottom );
  6. Isanimation = A. getboolean (R. styleable. panel_animationenable, true );
  7. A. Recycle ();
  8. // Determine the Android: Orientation attribute of linearlayout Based on mposition.
  9. Morientation = (mposition = Top | mposition = bottom )? Vertical: horizontal;
  10. Setorientation (morientation );
  11. // Initialize the mhandle background image
  12. Initialhandlerbg ();
  13. }

4. Set the button background image

Java code

  1. // Set the background image used by mhandle
  2. Private void initialhandlerbg (){
  3. If (mposition = Top ){
  4. Mopenedhandle = getresources (). getdrawable (R. drawable. top_switcher_expanded_background );
  5. Mclosedhandle = getresources (). getdrawable (R. drawable. top_switcher_collapsed_background );
  6. }
  7. Else if (mposition = bottom ){
  8. Mopenedhandle = getresources (). getdrawable (R. drawable. bottom_switcher_expanded_background );
  9. Mclosedhandle = getresources (). getdrawable (R. drawable. bottom_switcher_collapsed_background );
  10. }
  11. Else if (mposition = left ){
  12. Mopenedhandle = getresources (). getdrawable (R. drawable. left_switcher_expanded_background );
  13. Mclosedhandle = getresources (). getdrawable (R. drawable. left_switcher_collapsed_background );
  14. }
  15. Else if (mposition = right ){
  16. Mopenedhandle = getresources (). getdrawable (R. drawable. right_switcher_expanded_background );
  17. Mclosedhandle = getresources (). getdrawable (R. drawable. right_switcher_collapsed_background );
  18. }
  19. }

5. Retrieve the viewgroup & button

Java code

  1. // Call the callback function interface at the end of initialization to obtain mhandle/mcontent
  2. Protected void onfinishinflate (){
  3. Super. onfinishinflate ();
  4. // Obtain the mhandle instance
  5. Mhandle = This. getchildat (0 );
  6. If (mhandle = NULL ){
  7. Throw new runtimeexception ("your panel must have a view-mhandle ");
  8. }
  9. Mhandle. setonclicklistener (clicklistener );
  10. // Obtain the mcontent instance
  11. Mcontent = This. getchildat (1 );
  12. If (mcontent = NULL ){
  13. Throw new runtimeexception ("your panel must have a view-mcontent ");
  14. }
  15. // Remove mhandle/mcontent first and then determine the order of adding the two based on position
  16. Removeview (mhandle );
  17. Removeview (mcontent );
  18. If (mposition = Top | mposition = left ){
  19. Addview (mcontent );
  20. Addview (mhandle );
  21. } Else {
  22. Addview (mhandle );
  23. Addview (mcontent );
  24. }
  25. If (mclosedhandle! = NULL ){
  26. Mhandle. setbackgrounddrawable (mclosedhandle );
  27. }
  28. // Hide mcontent
  29. Mcontent. setvisibility (gone );
  30. }

6. Obtain the viewgroup width/height to determine the animation evolution range.

Note that its position is not in the starting place, because at that time, the returned values are all 0.

Java code

    1. @ Override // The callback function. At this time, the width and height of all the sub-views in the callback function are determined.
    2. Protected void onlayout (Boolean changed, int L, int T, int R, int B ){
    3. Super. onlayout (changed, L, t, R, B );
    4. Mcontentwidth = mcontent. getwidth ();
    5. Mcontentheight = mcontent. getheight ();
    6. Paddingtop = This. getpaddingtop ();
    7. Paddingleft = This. getpaddingleft ();
    8. }

7. Define the button to respond to events and execute the Opening and Closing viewgroup

Java code

    1. // defines the mhandle listener for opening and closing mcontent
    2. onclicklistener clicklistener = new onclicklistener () {
    3. Public void onclick (view v) {
    4. // todo auto-generated method stub
    5. If (! Iscontentexpand) {
    6. open ();
    7. }
    8. else {
    9. close ();
    10. }
    11. // reverse: Enable-merge-open-...
    12. iscontentexpand =! Iscontentexpand;
    13. }
    14. };

8. For details about the function, see setonclicklistener (onclicklistener listener)

Java code

    1. // The callback function is used to listen to the Opening and Closing effect of the Panel. For details, see setonclicklstener (onclicklistener listener)
    2. Public static interface onpanellistener {
    3. //-Open
    4. Public void onpanelopened (Panel panel );
    5. //-Close
    6. Public void onpanelclosed (panel );
    7. }

10. Instant Access: Open viewgroup

Java code

    1. Public void open (){
    2. If (isanimation ){
    3. Doanimationopen ();
    4. }
    5. Else {
    6. Doopen ();
    7. }
    8. }
    9. Public void doopen (){
    10. Mcontent. setvisibility (visible );
    11. }
    12. Public void doanimationopen (){
    13. Mcontent. setvisibility (visible );
    14. Post (aopen );
    15. }

11. Define the opened Animation

Java code

  1. //-Open
  2. Runnable aopen = new runnable (){
  3. Public void run (){
  4. Translateanimation animation;
  5. Int fromxdelta = 0, toxdelta = 0, fromydelta = 0, toydelta = 0;
  6. Int calculatedduration = 0;
  7. If (mposition = Top ){
  8. Fromydelta =-1 * mcontentheight;
  9. Toxdelta = 0;
  10. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
  11. }
  12. Else if (mposition = bottom ){
  13. Fromydelta = paddingtop;
  14. Toydelta = fromydelta + 1 * mcontentheight;
  15. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
  16. }
  17. Else if (mposition = left ){
  18. Fromxdelta =-1 * mcontentwidth;
  19. Toxdelta = 0;
  20. Calculatedduration = mduration * Math. Abs (toxdelta-fromxdelta)/mcontentwidth;
  21. }
  22. Else if (mposition = right ){
  23. Fromxdelta = paddingleft;
  24. Toxdelta = fromydelta + 1 * mcontentheight;
  25. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
  26. }
  27. Animation = new translateanimation (fromxdelta, toxdelta, fromydelta, toydelta );
  28. Animation. setduration (calculatedduration );
  29. Animation. setanimationlistener (aolistener );
  30. Startanimation (animation );
  31. }
  32. };

12. Close viewgroup

Java code

    1. Public void close (){
    2. If (isanimation ){
    3. Doanimationclose ();
    4. }
    5. Else {
    6. Doclose ();
    7. }
    8. }
    9. Public void doclose (){
    10. Mcontent. setvisibility (gone );
    11. }
    12. Public void doanimationclose (){
    13. Post (aclose );
    14. }

13. Define the combined Animation

Java code

  1. //-Close
  2. Runnable aclose = new runnable (){
  3. Public void run (){
  4. Translateanimation animation;
  5. Int fromxdelta = 0, toxdelta = 0, fromydelta = 0, toydelta = 0;
  6. Int calculatedduration = 0;
  7. If (mposition = Top ){
  8. Toydelta =-1 * mcontentheight;
  9. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
  10. }
  11. Else if (mposition = bottom ){
  12. Fromydelta = 1 * mcontentheight;
  13. Toydelta = paddingtop;
  14. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
  15. }
  16. Else if (mposition = left ){
  17. Toxdelta =-1 * mcontentwidth;
  18. Calculatedduration = mduration * Math. Abs (toxdelta-fromxdelta)/mcontentwidth;
  19. }
  20. Else if (mposition = right ){
  21. }
  22. Animation = new translateanimation (fromxdelta, toxdelta, fromydelta, toydelta );
  23. Animation. setduration (calculatedduration );
  24. Animation. setanimationlistener (aclistener );
  25. Startanimation (animation );
  26. }
  27. };

14. Define the animation callback function of the two: Change the button background image after the end to notify onpanellistener

Java code

  1. // Aftercare, for example, change the mhandle background image to notify the listener
  2. Private void postprocess (){
  3. // To update mhandle's background
  4. If (! Iscontentexpand ){
  5. Mhandle. setbackgrounddrawable (mclosedhandle );
  6. }
  7. Else {
  8. Mhandle. setbackgrounddrawable (mopenedhandle );
  9. }
  10. // Invoke listener if any
  11. If (panellistener! = NULL ){
  12. If (iscontentexpand ){
  13. Panellistener. onpanelopened (Panel. This );
  14. }
  15. Else {
  16. Panellistener. onpanelclosed (Panel. This );
  17. }
  18. }
  19. }

15. emulator run:

* First paste its layout

XML Code

  1. <? XML version = "1.0" encoding = "UTF-8"?>
  2. <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
  3. Xmlns: Panel = "http://schemas.android.com/apk/res/org.panel"
  4. Android: layout_width = "fill_parent"
  5. Android: layout_height = "fill_parent"
  6. Android: Orientation = "vertical"
  7. >
  8. <Org. Panel. Panel
  9. Android: Id = "@ + ID/leftpanel"
  10. Android: layout_width = "wrap_content"
  11. Android: layout_height = "wrap_content"
  12. Panel: Position = "left"
  13. Panel: animationduration = "10"
  14. Panel: animationenable = "true"
  15. Android: layout_gravity = "left"
  16. >
  17. <Button
  18. Android: layout_width = "wrap_content"
  19. Android: layout_height = "wrap_content"
  20. />
  21. <Linearlayout
  22. Android: Orientation = "vertical"
  23. Android: layout_width = "wrap_content"
  24. Android: layout_height = "wrap_content"
  25. >
  26. <Checkbox
  27. Android: layout_width = "fill_parent"
  28. Android: layout_height = "wrap_content"
  29. Android: text = "top panel! "
  30. Android: textsize = "16dip"
  31. Android: textcolor = "# Eee"
  32. Android: textstyle = "bold"
  33. />
  34. <Edittext
  35. Android: layout_width = "200dip"
  36. Android: layout_height = "wrap_content"
  37. />
  38. <Button
  39. Android: layout_width = "100dp"
  40. Android: layout_height = "wrap_content"
  41. Android: text = "OK! "
  42. />
  43. </Linearlayout>
  44. </Org. Panel. Panel>
  45. <Org. Panel. Panel
  46. Android: Id = "@ + ID/rightpanel"
  47. Android: layout_width = "wrap_content"
  48. Android: layout_height = "wrap_content"
  49. Panel: Position = "right"
  50. Panel: animationduration = "10"
  51. Panel: animationenable = "true"
  52. Android: layout_gravity = "right"
  53. >
  54. <Button
  55. Android: layout_width = "wrap_content"
  56. Android: layout_height = "wrap_content"
  57. />
  58. <Linearlayout
  59. Android: Orientation = "vertical"
  60. Android: layout_width = "wrap_content"
  61. Android: layout_height = "wrap_content"
  62. >
  63. <Imageview
  64. Android: layout_width = "wrap_content"
  65. Android: layout_height = "wrap_content"
  66. Android: src = "@ drawable/beijing4_ B"
  67. />
  68. </Linearlayout>
  69. </Org. Panel. Panel>
  70. <Linearlayout
  71. Android: layout_width = "fill_parent"
  72. Android: layout_height = "wrap_content"
  73. Android: Orientation = "vertical"
  74. >
  75. <Textview
  76. Android: layout_width = "fill_parent"
  77. Android: layout_height = "wrap_content"
  78. Android: textsize = "16dip"
  79. Android: textcolor = "# DDD"
  80. Android: text = "other area !!!!!!!! "
  81. />
  82. <Button
  83. Android: Id = "@ + ID/button"
  84. Android: layout_width = "100dp"
  85. Android: layout_height = "wrap_content"
  86. Android: text = "Yes! "
  87. />
  88. </Linearlayout>
  89. </Linearlayout>

* Run:

-Open

-Integration

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.