Drawer panel Research

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>
3. <Button/>
5. <Linearlayout>
6. <Textview/>
7. <Imageview/>
8. </Linearlayout>
10. </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>
17. </Resources>

2. A standard XML is:

XML Code

2. <Org. Panel. Panel
4. Android: Id = "@ + ID/leftpanel"
6. Android: layout_width = "wrap_content"
8. Android: layout_height = "wrap_content"
10. Panel: Position = "left"
12. Panel: animationduration = "10"
14. Panel: animationenable = "true"
16. Android: layout_gravity = "left"
18. >
20. <Button
22. Android: layout_width = "wrap_content"
24. Android: layout_height = "wrap_content"
26. />
28. <Linearlayout
30. Android: Orientation = "vertical"
32. Android: layout_width = "wrap_content"
34. Android: layout_height = "wrap_content"
36. >
38. <Checkbox
40. Android: layout_width = "fill_parent"
42. Android: layout_height = "wrap_content"
44. Android: text = "top panel! "
46. Android: textsize = "16dip"
48. Android: textcolor = "# Eee"
50. Android: textstyle = "bold"
52. />
54. <Edittext
56. Android: layout_width = "200dip"
58. Android: layout_height = "wrap_content"
60. />
62. <Button
64. Android: layout_width = "100dp"
66. Android: layout_height = "wrap_content"
68. Android: text = "OK! "
70. />
72. </Linearlayout>
74. </Org. Panel. Panel>

3. parse the XML and set it

Java code

2. Public Panel (context, attributeset attrs ){
4. Super (context, attrs );
8. Typedarray A = context. obtainstyledattributes (attrs, R. styleable. Panel );
12. Mduration = A. getinteger (R. styleable. panel_animation duration, 750 );
14. Mposition = A. getinteger (R. styleable. panel_position, bottom );
16. Isanimation = A. getboolean (R. styleable. panel_animationenable, true );
18. A. Recycle ();
22. // Determine the Android: Orientation attribute of linearlayout Based on mposition.
24. Morientation = (mposition = Top | mposition = bottom )? Vertical: horizontal;
26. Setorientation (morientation );
30. // Initialize the mhandle background image
32. Initialhandlerbg ();
36. }

4. Set the button background image

Java code

2. // Set the background image used by mhandle
4. Private void initialhandlerbg (){
6. If (mposition = Top ){
8. Mopenedhandle = getresources (). getdrawable (R. drawable. top_switcher_expanded_background );
10. Mclosedhandle = getresources (). getdrawable (R. drawable. top_switcher_collapsed_background );
14. }
16. Else if (mposition = bottom ){
18. Mopenedhandle = getresources (). getdrawable (R. drawable. bottom_switcher_expanded_background );
20. Mclosedhandle = getresources (). getdrawable (R. drawable. bottom_switcher_collapsed_background );
24. }
26. Else if (mposition = left ){
28. Mopenedhandle = getresources (). getdrawable (R. drawable. left_switcher_expanded_background );
30. Mclosedhandle = getresources (). getdrawable (R. drawable. left_switcher_collapsed_background );
34. }
36. Else if (mposition = right ){
38. Mopenedhandle = getresources (). getdrawable (R. drawable. right_switcher_expanded_background );
40. Mclosedhandle = getresources (). getdrawable (R. drawable. right_switcher_collapsed_background );
44. }
46. }

5. Retrieve the viewgroup & button

Java code

2. // Call the callback function interface at the end of initialization to obtain mhandle/mcontent
4. Protected void onfinishinflate (){
6. Super. onfinishinflate ();
10. // Obtain the mhandle instance
12. Mhandle = This. getchildat (0 );
16. If (mhandle = NULL ){
18. Throw new runtimeexception ("your panel must have a view-mhandle ");
20. }
24. Mhandle. setonclicklistener (clicklistener );
28. // Obtain the mcontent instance
30. Mcontent = This. getchildat (1 );
32. If (mcontent = NULL ){
34. Throw new runtimeexception ("your panel must have a view-mcontent ");
36. }
42. // Remove mhandle/mcontent first and then determine the order of adding the two based on position
44. Removeview (mhandle );
46. Removeview (mcontent );
48. If (mposition = Top | mposition = left ){
50. Addview (mcontent );
52. Addview (mhandle );
54. } Else {
56. Addview (mhandle );
58. Addview (mcontent );
60. }
64. If (mclosedhandle! = NULL ){
66. Mhandle. setbackgrounddrawable (mclosedhandle );
68. }
72. // Hide mcontent
74. Mcontent. setvisibility (gone );
76. }

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 );
5. Mcontentwidth = mcontent. getwidth ();
6. Mcontentheight = mcontent. getheight ();
8. Paddingtop = This. getpaddingtop ();
9. Paddingleft = This. getpaddingleft ();
10. }

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. }
12. // reverse: Enable-merge-open-...
13. iscontentexpand =! Iscontentexpand;
14. }
15. };

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 );
6. //-Close
7. Public void onpanelclosed (panel );
8. }

10. Instant Access: Open viewgroup

Java code

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

11. Define the opened Animation

Java code

2. //-Open
4. Runnable aopen = new runnable (){
6. Public void run (){
8. Translateanimation animation;
10. Int fromxdelta = 0, toxdelta = 0, fromydelta = 0, toydelta = 0;
12. Int calculatedduration = 0;
16. If (mposition = Top ){
18. Fromydelta =-1 * mcontentheight;
20. Toxdelta = 0;
24. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
26. }
28. Else if (mposition = bottom ){
30. Fromydelta = paddingtop;
32. Toydelta = fromydelta + 1 * mcontentheight;
36. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
38. }
40. Else if (mposition = left ){
42. Fromxdelta =-1 * mcontentwidth;
44. Toxdelta = 0;
48. Calculatedduration = mduration * Math. Abs (toxdelta-fromxdelta)/mcontentwidth;
50. }
52. Else if (mposition = right ){
54. Fromxdelta = paddingleft;
56. Toxdelta = fromydelta + 1 * mcontentheight;
60. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
62. }
66. Animation = new translateanimation (fromxdelta, toxdelta, fromydelta, toydelta );
68. Animation. setduration (calculatedduration );
70. Animation. setanimationlistener (aolistener );
74. Startanimation (animation );
76. }
78. };

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 );
12. }
13. Public void doanimationclose (){
14. Post (aclose );
16. }

13. Define the combined Animation

Java code

2. //-Close
4. Runnable aclose = new runnable (){
6. Public void run (){
8. Translateanimation animation;
10. Int fromxdelta = 0, toxdelta = 0, fromydelta = 0, toydelta = 0;
12. Int calculatedduration = 0;
16. If (mposition = Top ){
18. Toydelta =-1 * mcontentheight;
22. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
24. }
26. Else if (mposition = bottom ){
28. Fromydelta = 1 * mcontentheight;
30. Toydelta = paddingtop;
34. Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
36. }
38. Else if (mposition = left ){
40. Toxdelta =-1 * mcontentwidth;
44. Calculatedduration = mduration * Math. Abs (toxdelta-fromxdelta)/mcontentwidth;
46. }
48. Else if (mposition = right ){
52. }
56. Animation = new translateanimation (fromxdelta, toxdelta, fromydelta, toydelta );
58. Animation. setduration (calculatedduration );
60. Animation. setanimationlistener (aclistener );
64. Startanimation (animation );
66. }
68. };

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

Java code

2. // Aftercare, for example, change the mhandle background image to notify the listener
4. Private void postprocess (){
6. // To update mhandle's background
8. If (! Iscontentexpand ){
10. Mhandle. setbackgrounddrawable (mclosedhandle );
12. }
14. Else {
16. Mhandle. setbackgrounddrawable (mopenedhandle );
18. }
22. // Invoke listener if any
24. If (panellistener! = NULL ){
26. If (iscontentexpand ){
28. Panellistener. onpanelopened (Panel. This );
30. }
32. Else {
34. Panellistener. onpanelclosed (Panel. This );
36. }
38. }
40. }

15. emulator run:

* First paste its layout

XML Code

2. <? XML version = "1.0" encoding = "UTF-8"?>
6. <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
8. Xmlns: Panel = "http://schemas.android.com/apk/res/org.panel"
10. Android: layout_width = "fill_parent"
12. Android: layout_height = "fill_parent"
14. Android: Orientation = "vertical"
16. >
20. <Org. Panel. Panel
22. Android: Id = "@ + ID/leftpanel"
24. Android: layout_width = "wrap_content"
26. Android: layout_height = "wrap_content"
28. Panel: Position = "left"
30. Panel: animationduration = "10"
32. Panel: animationenable = "true"
34. Android: layout_gravity = "left"
36. >
38. <Button
40. Android: layout_width = "wrap_content"
42. Android: layout_height = "wrap_content"
44. />
46. <Linearlayout
48. Android: Orientation = "vertical"
50. Android: layout_width = "wrap_content"
52. Android: layout_height = "wrap_content"
54. >
56. <Checkbox
58. Android: layout_width = "fill_parent"
60. Android: layout_height = "wrap_content"
62. Android: text = "top panel! "
64. Android: textsize = "16dip"
66. Android: textcolor = "# Eee"
68. Android: textstyle = "bold"
70. />
72. <Edittext
74. Android: layout_width = "200dip"
76. Android: layout_height = "wrap_content"
78. />
80. <Button
82. Android: layout_width = "100dp"
84. Android: layout_height = "wrap_content"
86. Android: text = "OK! "
88. />
90. </Linearlayout>
92. </Org. Panel. Panel>
96. <Org. Panel. Panel
98. Android: Id = "@ + ID/rightpanel"
100. Android: layout_width = "wrap_content"
102. Android: layout_height = "wrap_content"
104. Panel: Position = "right"
106. Panel: animationduration = "10"
108. Panel: animationenable = "true"
110. Android: layout_gravity = "right"
112. >
114. <Button
116. Android: layout_width = "wrap_content"
118. Android: layout_height = "wrap_content"
120. />
122. <Linearlayout
124. Android: Orientation = "vertical"
126. Android: layout_width = "wrap_content"
128. Android: layout_height = "wrap_content"
130. >
132. <Imageview
134. Android: layout_width = "wrap_content"
136. Android: layout_height = "wrap_content"
138. Android: src = "@ drawable/beijing4_ B"
140. />
142. </Linearlayout>
144. </Org. Panel. Panel>
148. <Linearlayout
150. Android: layout_width = "fill_parent"
152. Android: layout_height = "wrap_content"
154. Android: Orientation = "vertical"
156. >
158. <Textview
160. Android: layout_width = "fill_parent"
162. Android: layout_height = "wrap_content"
164. Android: textsize = "16dip"
166. Android: textcolor = "# DDD"
168. Android: text = "other area !!!!!!!! "
170. />
172. <Button
174. Android: Id = "@ + ID/button"
176. Android: layout_width = "100dp"
178. Android: layout_height = "wrap_content"
180. Android: text = "Yes! "
182. />
184. </Linearlayout>
190. </Linearlayout>

* Run:

-Open

-Integration