Wing takes you. Custom View series (1) Imitation 360 memory cleanup effect

This is a hands-on take you do Custom view series

The purpose is the same, take everyone together to study the implementation of custom view, and the difference is that this series eliminates the simple coordinates such as the explanation, focusing on the realization of ideas, with concise and clear articles, to work with you to learn together.

Reprint Please specify source: http://blog.csdn.net/wingichoy/article/details/50500479

The previous article introduced: Magic Bezier curve, this article to study its application.

My own way of learning is: after learning the Bezier curve, to study his laws, and then began to associate have not seen similar effects, and finally to study the realization, in the absence of absolute difficulties, independent thinking. Only after encountering the absolute difficulty or the effect, only to refer to other people's practice.

Well, the nonsense is not much to say, to see:

The picture is extracted from the 360 security defender apk inside. A background map, a small green picture.

Define some properties first

private int mwidth;    private int mheight;    The y-coordinate of the line    private int mliney = x;    Determines whether to draw a line bounce    private Boolean isdrawback = false;    private int mbitmapx;    private int mbitmapy;    Percentage of flight    private int mflypercent = +;    The coordinate x coordinate of the auxiliary point is the midpoint of the line segment, and points    suppoint = new dot (Mliney);

First of all to draw the background picture, and the villain, here the background picture size is wrong, did not think there is any good method, here first write dead (to solve, beg not to kill).

Bitmap Bitmap = Bitmapfactory.decoderesource (Getresources (), COM.WINGSOFTS.MY360CLEAN.R.DRAWABLE.MB);        Bitmapfactory.options opt = new bitmapfactory.options (); Opt.injustdecodebounds = true;//Bitmapfactory.decoderesource (getresources (), com.wingsofts.my360clean.r.drawable.        T,OPT);//int bgwidth = opt.outwidth;//int bgheight = opt.outheight;        Scale the background graph by the length of the line//LOG.E ("Wing", Bgwidth + "+scale+");        opt.insamplesize= 2;//opt.outwidth = 500;        Opt.injustdecodebounds = false;        Bitmap Background =bitmapfactory.decoderesource (Getresources (), com.wingsofts.my360clean.r.drawable.t,opt);        Paint p = new paint ();        P.setstyle (Paint.Style.STROKE);        P.setstrokewidth (20);        Path PATH = new Path (); Coordinate write dead fine ...        Don't hit me. Canvas.drawbitmap (Background,100,mliney-background.getheight () +100,p); Point endPoint = new Point (Mliney);

Then draw two circles.

        P.setcolor (Color.gray);        Canvas.drawcircle (n, Endpoint.y, p);        Canvas.drawcircle (ENDPOINT.X,ENDPOINT.Y,10,P);

Then, according to a marker bit isdrawback to determine whether to draw a line bounce. The default here is not to bounce.

            P.setcolor (color.yellow);            Path.moveto (Mliney);            Path.quadto (Suppoint.x, Suppoint.y, Endpoint.x, ENDPOINT.Y);//Draw Bézier curves,            canvas.drawpath (Path, p);            Canvas.drawpoint (Suppoint.x, Suppoint.y, p);            MBITMAPX = Suppoint.x-bitmap.getwidth ()/2;            Mbitmapy = (Suppoint.y-mliney)/2 + mliney-bitmap.getheight ();            Canvas.drawbitmap (Bitmap, Mbitmapx, Mbitmapy, p);

Note that the coordinates of the above bitmap are calculated, for the sake of convenience, the Bezier curve only draws the midpoint. #实际上是不会 # Observing Auxiliary point coordinates

Guess the distance between the auxiliary point and the tangent point to Mliney is equal, and then calculate the coordinates where the bitmap is located and draw.

Then to draw the appearance of the drop-down, rewrite the ontouchevent, mainly to change the coordinates of auxiliary points and bitmap coordinates, in the action_move change coordinates last notification redraw. Rewrite the action_up to change the most important coordinates, change the isdrawback marker bit, the notification stage is the upper stage.

Knowledge Supplement: Getx is the coordinate of the relative view getrawx is relative to the screen.

@Override Public    Boolean ontouchevent (Motionevent event) {        switch (event.getaction ()) {            case Motionevent.action_move:                suppoint.x = (int) event.getx ();                if (Event.gety () >mliney)                suppoint.y = (int) event.gety ();                Invalidate ();                break;            Case MOTIONEVENT.ACTION_UP:                endx = (int) event.getx ();                EndY = (int) event.gety ();                Isdrawback = true;                Invalidate ();                break;        }        return true;    }

Finally to draw back the effect of the rebound, I believe that I have read before the article know that I adopt a percent approach. This gives a parameter mflypercent, decreasing from 100, decreasing the y-coordinate of the auxiliary point and the y-coordinate of the bitmap, to achieve the animation effect. If mflypercent<0, the reset flag bit and percentage are plotted.

if (isdrawback) {            p.setcolor (color.yellow);            Path.moveto (Mliney);            Path.quadto (Suppoint.x, Mliney + (Suppoint.y-mliney) * mflypercent/100, Endpoint.x, endpoint.y);            Canvas.drawpath (path, p);            if (mflypercent >0) {                canvas.drawbitmap (bitmap, MBITMAPX, Mbitmapy * mflypercent/100, p);                Mflypercent-=5;                Postinvalidatedelayed (ten);            } else {                mflypercent = +;                Isdrawback = false;            }

In this way, the end of the simulation 360 memory cleanup effect, for the x-coordinate calculation ... Study again later.

Address of this project: Click to open the link

Wing takes you to a custom view series (1) Imitation 360 memory cleanup effect