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
- <Panel>
- <Button/>
- <Linearlayout>
- <Textview/>
- <Imageview/>
- </Linearlayout>
- </Panel>
To reduce the development difficulty, I plan to define panel extends linearlayout
[Code steps]
1. Define the attributes used by XML
XML Code
- <? XML version = "1.0" encoding = "UTF-8"?>
- <Resources>
- <Declare-styleable name = "Panel">
- // Animation evolution duration
- <ATTR name = "animationduration" format = "integer"/>
- // Only four values can be removed from the position
- <ATTR name = "position">
- <Enum name = "TOP" value = "0"/>
- <Enum name = "bottom" value = "1"/>
- <Enum name = "Left" value = "2"/>
- <Enum name = "right" value = "3"/>
- </ATTR>
- // Whether the function is animated
- <ATTR name = "animationenable" format = "Boolean"/>
- </Declare-styleable>
- </Resources>
2. A standard XML is:
XML Code
-
- <Org. Panel. Panel
-
- Android: Id = "@ + ID/leftpanel"
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- Panel: Position = "left"
-
- Panel: animationduration = "10"
-
- Panel: animationenable = "true"
-
- Android: layout_gravity = "left"
-
- >
-
- <Button
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- />
-
- <Linearlayout
-
- Android: Orientation = "vertical"
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- >
-
- <Checkbox
-
- Android: layout_width = "fill_parent"
-
- Android: layout_height = "wrap_content"
-
- Android: text = "top panel! "
- Android: textsize = "16dip"
-
- Android: textcolor = "# Eee"
-
- Android: textstyle = "bold"
-
- />
-
- <Edittext
-
- Android: layout_width = "200dip"
-
- Android: layout_height = "wrap_content"
-
- />
-
- <Button
-
- Android: layout_width = "100dp"
-
- Android: layout_height = "wrap_content"
-
- Android: text = "OK! "
-
- />
-
- </Linearlayout>
-
- </Org. Panel. Panel>
3. parse the XML and set it
Java code
-
- Public Panel (context, attributeset attrs ){
-
- Super (context, attrs );
-
- Typedarray A = context. obtainstyledattributes (attrs, R. styleable. Panel );
-
-
- Mduration = A. getinteger (R. styleable. panel_animation duration, 750 );
-
- Mposition = A. getinteger (R. styleable. panel_position, bottom );
-
- Isanimation = A. getboolean (R. styleable. panel_animationenable, true );
-
- A. Recycle ();
-
-
- // Determine the Android: Orientation attribute of linearlayout Based on mposition.
-
- Morientation = (mposition = Top | mposition = bottom )? Vertical: horizontal;
- Setorientation (morientation );
-
-
- // Initialize the mhandle background image
-
- Initialhandlerbg ();
-
-
- }
4. Set the button background image
Java code
-
- // Set the background image used by mhandle
-
- Private void initialhandlerbg (){
-
- If (mposition = Top ){
-
- Mopenedhandle = getresources (). getdrawable (R. drawable. top_switcher_expanded_background );
-
- Mclosedhandle = getresources (). getdrawable (R. drawable. top_switcher_collapsed_background );
-
- }
-
- Else if (mposition = bottom ){
-
- Mopenedhandle = getresources (). getdrawable (R. drawable. bottom_switcher_expanded_background );
-
- Mclosedhandle = getresources (). getdrawable (R. drawable. bottom_switcher_collapsed_background );
-
-
- }
-
- Else if (mposition = left ){
-
- Mopenedhandle = getresources (). getdrawable (R. drawable. left_switcher_expanded_background );
- Mclosedhandle = getresources (). getdrawable (R. drawable. left_switcher_collapsed_background );
-
-
- }
-
- Else if (mposition = right ){
-
- Mopenedhandle = getresources (). getdrawable (R. drawable. right_switcher_expanded_background );
-
- Mclosedhandle = getresources (). getdrawable (R. drawable. right_switcher_collapsed_background );
-
-
- }
-
- }
5. Retrieve the viewgroup & button
Java code
- // Call the callback function interface at the end of initialization to obtain mhandle/mcontent
-
- Protected void onfinishinflate (){
-
- Super. onfinishinflate ();
-
-
- // Obtain the mhandle instance
-
- Mhandle = This. getchildat (0 );
-
-
- If (mhandle = NULL ){
-
- Throw new runtimeexception ("your panel must have a view-mhandle ");
-
- }
-
-
- Mhandle. setonclicklistener (clicklistener );
-
-
- // Obtain the mcontent instance
-
- Mcontent = This. getchildat (1 );
-
- If (mcontent = NULL ){
- Throw new runtimeexception ("your panel must have a view-mcontent ");
-
- }
-
-
-
- // Remove mhandle/mcontent first and then determine the order of adding the two based on position
-
- Removeview (mhandle );
-
- Removeview (mcontent );
-
- If (mposition = Top | mposition = left ){
-
- Addview (mcontent );
-
- Addview (mhandle );
-
- } Else {
-
- Addview (mhandle );
- Addview (mcontent );
-
- }
-
-
- If (mclosedhandle! = NULL ){
-
- Mhandle. setbackgrounddrawable (mclosedhandle );
-
- }
-
-
- // Hide mcontent
-
- Mcontent. setvisibility (gone );
-
- }
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
- @ Override // The callback function. At this time, the width and height of all the sub-views in the callback function are determined.
- Protected void onlayout (Boolean changed, int L, int T, int R, int B ){
- Super. onlayout (changed, L, t, R, B );
- Mcontentwidth = mcontent. getwidth ();
- Mcontentheight = mcontent. getheight ();
- Paddingtop = This. getpaddingtop ();
- Paddingleft = This. getpaddingleft ();
- }
7. Define the button to respond to events and execute the Opening and Closing viewgroup
Java code
- // defines the mhandle listener for opening and closing mcontent
- onclicklistener clicklistener = new onclicklistener () {
- Public void onclick (view v) {
- // todo auto-generated method stub
- If (! Iscontentexpand) {
- open ();
- }
- else {
- close ();
- }
-
- // reverse: Enable-merge-open-...
- iscontentexpand =! Iscontentexpand;
- }
- };
8. For details about the function, see setonclicklistener (onclicklistener listener)
Java code
- // The callback function is used to listen to the Opening and Closing effect of the Panel. For details, see setonclicklstener (onclicklistener listener)
- Public static interface onpanellistener {
- //-Open
- Public void onpanelopened (Panel panel );
- //-Close
- Public void onpanelclosed (panel );
- }
10. Instant Access: Open viewgroup
Java code
- Public void open (){
- If (isanimation ){
- Doanimationopen ();
- }
- Else {
- Doopen ();
- }
- }
- Public void doopen (){
- Mcontent. setvisibility (visible );
- }
- Public void doanimationopen (){
- Mcontent. setvisibility (visible );
- Post (aopen );
- }
11. Define the opened Animation
Java code
- //-Open
-
- Runnable aopen = new runnable (){
-
- Public void run (){
-
- Translateanimation animation;
-
- Int fromxdelta = 0, toxdelta = 0, fromydelta = 0, toydelta = 0;
-
- Int calculatedduration = 0;
-
-
- If (mposition = Top ){
-
- Fromydelta =-1 * mcontentheight;
-
- Toxdelta = 0;
-
- Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
-
- }
-
- Else if (mposition = bottom ){
-
- Fromydelta = paddingtop;
-
- Toydelta = fromydelta + 1 * mcontentheight;
-
-
- Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
-
- }
- Else if (mposition = left ){
-
- Fromxdelta =-1 * mcontentwidth;
-
- Toxdelta = 0;
-
-
- Calculatedduration = mduration * Math. Abs (toxdelta-fromxdelta)/mcontentwidth;
-
- }
-
- Else if (mposition = right ){
-
- Fromxdelta = paddingleft;
- Toxdelta = fromydelta + 1 * mcontentheight;
-
-
- Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
-
- }
-
-
- Animation = new translateanimation (fromxdelta, toxdelta, fromydelta, toydelta );
-
- Animation. setduration (calculatedduration );
-
- Animation. setanimationlistener (aolistener );
-
- Startanimation (animation );
-
- }
-
- };
12. Close viewgroup
Java code
- Public void close (){
- If (isanimation ){
- Doanimationclose ();
- }
- Else {
- Doclose ();
- }
- }
- Public void doclose (){
- Mcontent. setvisibility (gone );
- }
- Public void doanimationclose (){
- Post (aclose );
- }
13. Define the combined Animation
Java code
-
- //-Close
- Runnable aclose = new runnable (){
-
- Public void run (){
-
- Translateanimation animation;
-
- Int fromxdelta = 0, toxdelta = 0, fromydelta = 0, toydelta = 0;
-
- Int calculatedduration = 0;
-
-
- If (mposition = Top ){
-
- Toydelta =-1 * mcontentheight;
-
-
- Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
-
- }
- Else if (mposition = bottom ){
-
- Fromydelta = 1 * mcontentheight;
-
- Toydelta = paddingtop;
-
-
- Calculatedduration = mduration * Math. Abs (toydelta-fromydelta)/mcontentheight;
-
- }
-
- Else if (mposition = left ){
-
- Toxdelta =-1 * mcontentwidth;
-
- Calculatedduration = mduration * Math. Abs (toxdelta-fromxdelta)/mcontentwidth;
-
- }
-
- Else if (mposition = right ){
-
-
- }
-
-
- Animation = new translateanimation (fromxdelta, toxdelta, fromydelta, toydelta );
-
- Animation. setduration (calculatedduration );
-
- Animation. setanimationlistener (aclistener );
-
- Startanimation (animation );
-
- }
-
- };
14. Define the animation callback function of the two: Change the button background image after the end to notify onpanellistener
Java code
-
- // Aftercare, for example, change the mhandle background image to notify the listener
-
- Private void postprocess (){
-
- // To update mhandle's background
-
- If (! Iscontentexpand ){
-
- Mhandle. setbackgrounddrawable (mclosedhandle );
-
- }
-
- Else {
-
- Mhandle. setbackgrounddrawable (mopenedhandle );
- }
-
-
- // Invoke listener if any
-
- If (panellistener! = NULL ){
-
- If (iscontentexpand ){
-
- Panellistener. onpanelopened (Panel. This );
-
- }
-
- Else {
-
- Panellistener. onpanelclosed (Panel. This );
-
- }
-
- }
-
- }
15. emulator run:
* First paste its layout
XML Code
-
- <? XML version = "1.0" encoding = "UTF-8"?>
-
-
- <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
-
- Xmlns: Panel = "http://schemas.android.com/apk/res/org.panel"
-
- Android: layout_width = "fill_parent"
-
- Android: layout_height = "fill_parent"
-
- Android: Orientation = "vertical"
-
- >
-
-
- <Org. Panel. Panel
-
- Android: Id = "@ + ID/leftpanel"
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- Panel: Position = "left"
-
- Panel: animationduration = "10"
-
- Panel: animationenable = "true"
-
- Android: layout_gravity = "left"
-
- >
-
- <Button
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- />
-
- <Linearlayout
-
- Android: Orientation = "vertical"
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- >
-
- <Checkbox
-
- Android: layout_width = "fill_parent"
-
- Android: layout_height = "wrap_content"
-
- Android: text = "top panel! "
-
- Android: textsize = "16dip"
-
- Android: textcolor = "# Eee"
-
- Android: textstyle = "bold"
-
- />
-
- <Edittext
-
- Android: layout_width = "200dip"
-
- Android: layout_height = "wrap_content"
-
- />
-
- <Button
- Android: layout_width = "100dp"
-
- Android: layout_height = "wrap_content"
-
- Android: text = "OK! "
-
- />
-
- </Linearlayout>
-
- </Org. Panel. Panel>
-
-
- <Org. Panel. Panel
-
- Android: Id = "@ + ID/rightpanel"
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- Panel: Position = "right"
-
- Panel: animationduration = "10"
-
- Panel: animationenable = "true"
-
- Android: layout_gravity = "right"
-
- >
-
- <Button
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- />
-
- <Linearlayout
- Android: Orientation = "vertical"
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- >
-
- <Imageview
-
- Android: layout_width = "wrap_content"
-
- Android: layout_height = "wrap_content"
-
- Android: src = "@ drawable/beijing4_ B"
-
- />
-
- </Linearlayout>
-
- </Org. Panel. Panel>
-
-
- <Linearlayout
-
- Android: layout_width = "fill_parent"
-
- Android: layout_height = "wrap_content"
-
- Android: Orientation = "vertical"
-
- >
-
- <Textview
-
- Android: layout_width = "fill_parent"
-
- Android: layout_height = "wrap_content"
-
- Android: textsize = "16dip"
- Android: textcolor = "# DDD"
-
- Android: text = "other area !!!!!!!! "
-
- />
-
- <Button
-
- Android: Id = "@ + ID/button"
-
- Android: layout_width = "100dp"
-
- Android: layout_height = "wrap_content"
-
- Android: text = "Yes! "
-
- />
-
- </Linearlayout>
-
-
-
- </Linearlayout>
* Run:
-Open
-Integration