Android Custom ViewGroup One of the preliminary----drawer Menu

A few days ago in the MU class online to see the teacher's custom satellite menu, it feels very interesting, so after watching the video, I also tried to write it again, and add a drag effect (Light watching video is not useful, must do it yourself!) Remember not to copy the code).

Interested students can go to MU net to see (not advertising): http://www.imooc.com/learn/300

Custom control This thing, you have to test more practice, and then wrote a drawer effect of the menu, is relatively simple.

The usual, first:

So the middle Circle is the satellite menu pull, and the lower left corner, is the drawer menu.

Below to get to the chase:

General steps for customizing ViewGroup:

Write the constructor, rewrite Onmeasure (), rewrite onlayout ();

Since this blog is ViewGroup preliminary, so all from the simplest start. Let's talk about the drawer menu.

First create the Drawermenu class so that he inherits from ViewGroup

public class Drawermenu extends ViewGroup

Then add three constructors, using the generic method, with fewer parameters called multi-parameter:

Public Drawermenu (Context context) {This        (context, NULL);    }    Public Drawermenu (context context, AttributeSet attrs) {This        (context, attrs, 0);    }    Public Drawermenu (context context, AttributeSet attrs, int defstyleattr) {        Super (context, attrs, defstyleattr);    }

Generally in the third constructor, we will use Typedarray to obtain his corresponding attr.xml inside of the properties, here for the sake of simplicity, do not add any custom properties to this viewgroup, so the constructor so can.

The next step is to rewrite the Onmeasure () method. The so-called measure for measuring the size of the view

protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {        int count = Getchildcount ();        for (int i = 0; i < count; i++) {            measurechild (Getchildat (i), Widthmeasurespec, Heightmeasurespec);        }        Super.onmeasure (Widthmeasurespec, Heightmeasurespec);    }

The measurement mode is divided into three kinds, and there is not much to introduce here. Because our sub-view is wrap_content, we just need a simple measurement.

Next is the key Place, OnLayout (), which is the layout for the child view. Tell sub-view where he should be, first of all, we want to layout the main button, here we'll fix it in the bottom left corner:

protected void OnLayout (Boolean changed, int l, int t, int r, int b) {            layoutbottom ();}

    private void Layoutbottom () {        mbutton_buttom = getchildat (0);        Mbutton_buttom.setonclicklistener (this);        Mwidth_button_buttom = Mbutton_buttom.getmeasuredwidth ();        Mheight_button_buttom = Mbutton_buttom.getmeasuredheight ();        Mbuttonx = 0;        Mbuttony = Getmeasuredheight ()-Mheight_button_buttom;        Mbutton_buttom.layout (Mbuttonx, Mbuttony, Mwidth_button_buttom, Getmeasuredheight ());    }

The primary button is the first child view. We use Getchildat (index=0) to obtain and then get the measured width and height.

Finally, the main button is layout to the appropriate position,

Layout contains four parameters for the x, y of the area where the circle is drawn

So the upper-left corner of the position is: 0,height-cheight the lower right corner of the coordinates of Cwidth,height

This allows us to determine the location of the main button.

Then of course the next step is to layout the location of the sub-view. I believe we also understand that the location of the sub-view as long as you find the coordinates. So here we continue to determine the location of the child view.

protected void OnLayout (Boolean changed, int l, int t, int r, int b) {        log.i ("Wing", Mischanged + "");        if (mischanged) {            layoutbottom ();            int count = Getchildcount ();            for (int i = 0; i < count-1; i++) {                View child = Getchildat (i + 1);                int childwidth = Child.getmeasuredwidth ();                int childheight = Child.getmeasuredheight ();                Child.layout (0, Mbuttony-mheight_button_buttom * (i + 1) * 2, Childwidth, Getmeasuredheight ());                Child.setvisibility (GONE);}}}    

Then we add listening to the main button: to toggle the status of the menu, if the menu is closed, then press the display button, if it is open, then the button is gone.

This adds an animated effect to the button, and if you don't know the Android animation, look here: http://blog.csdn.net/wingichoy/article/details/47104433

In order to look good, we have added a i*100 delay to the duration of each animation to have a gradient effect.

    public void OnClick (View v) {        togglemenu ();    }

private void Togglemenu () {        if (mischanged) {            int count = Getchildcount ();            for (int i = 0; i < count-1; i++) {                View child = Getchildat (i + 1);                Translateanimation ta = new Translateanimation (-child.getmeasuredwidth (), 0, 0, 0);                Ta.setduration (+ + i *);                Child.startanimation (TA);                Child.setvisibility (VISIBLE);                Mischanged = false;            }        } else {            int count = Getchildcount ();            for (int i = 0; i < count-1; i++) {                View child = Getchildat (i + 1);                Translateanimation ta = new Translateanimation (0,-child.getmeasuredwidth (), 0, 0);                Ta.setduration (+ + i *);                Child.startanimation (TA);                Child.setvisibility (GONE);                Mischanged = true;            }        }

Our viewgroup is basically done. Add to Mainactivity's XML to try

 <com.wingsoft.arcmenu.drawermenu android:layout_width= "match_parent" android:layout_height= "match_parent            "> <imageview android:layout_width=" wrap_content "android:layout_height=" Wrap_content "            android:src= "@drawable/drawer"/> <imageview android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:src= "@drawable/drawer"/> <imageview an Droid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/drawer             "/> <imageview android:layout_width=" wrap_content "android:layout_height=" Wrap_content "            android:src= "@drawable/drawer"/> <imageview android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:src= "@drawable/drawer"/> </com.wingsoft.arcmenu.draw Ermenu>

Well.  Not bad. has also been achieved. Then we will put our brains, write a listener it ~ today is here.

If you work hard, the technology will soon come up ~ ~

Copyright NOTICE: This article is for bloggers original article, welcome to indicate the source after reprint.

Android Custom ViewGroup One of the preliminary----drawer Menu