Teach you to draw a grid full of circular water ripple Loadingview Android

That's not the end. O (￣︶￣) n. Hello everyone, here is a foreign article.

Read the blog of Love, and learned a lot of things. Aigo once said: "To stand on the giant Tintin." So today, we're standing on Aigo's Tintin to learn to make a custom view (a joke, love brother See Don't hit me).

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

The previous article led you to do a cool loading animation view hand-taken you to do a super cool loading success animation View do not know that we have to do it again?

Before starting, first of all, the preparation of knowledge, this knowledge in Aigo's blog has a detailed introduction: Point me into the Love Brother Custom View series

As follows: There are a lot of application scenarios. Like what... The percentage of memory consumption

The preparatory knowledge is:

1. Bezier Curve If you don't understand it, you can come here for a basic knowledge reserve: Magical Bezier Curves

2.paint.setxfermode () and Porterduffxfermode

Do not be frightened by the name of this B, unfamiliar to see may be considered difficult to remember, in fact, as long as standing on the giant Tintin is very simple.

All right, don't say a word, follow me step by step to do a cool view bar.

First give some attributes, initialize in the constructor ( don't OnDraw new things again OnDraw new things don't OnDraw new things again OnDraw new things)

    Draw the Ripple private Paint mwavepaint;        private Porterduffxfermode Mmode = new Porterduffxfermo    De (PorterDuff.Mode.XOR);//Set Mode to XOR//Draw Circle private paint mcirclepaint;    Private Canvas mcanvas;//Our own canvas private Bitmap mbitmap;    private int mwidth;    private int mheight;    Public Waveloadingview (Context context) {this (context,null);    } public Waveloadingview (context context, AttributeSet Attrs) {This (context, attrs,0); } public Waveloadingview (context context, AttributeSet attrs, int defstyleattr) {Super (context, Attrs, Defstyle        ATTR);        Mwavepaint = new Paint ();        Mwavepaint.setcolor (Color.parsecolor ("#33b5e5"));        Mcirclepaint = new Paint ();            Mcirclepaint.setcolor (Color.parsecolor ("#99cc00")); } @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {int widthsize = Measuresp        Ec.getsize (WIDTHMEASURESPEC); int widthmode = Measurespec.getMode (WIDTHMEASURESPEC);        int heightsize = measurespec.getsize (Heightmeasurespec);        int heightmode = Measurespec.getmode (Heightmeasurespec);        if (Widthmode = = measurespec.exactly) {mwidth = widthsize;        } if (Heightmode = = measurespec.exactly) {mheight = heightsize;        } setmeasureddimension (Mwidth, mheight); Mbitmap = Bitmap.createbitmap (300,300, Bitmap.Config.ARGB_8888);     Generate a bitmap Mcanvas = new Canvas (MBITMAP),//bitmp put on our own canvas, actually mcanvas.draw when the change is this bitmap object}

Then we'll draw him a little something to introduce Porterduffxfermode

@Override    protected void OnDraw (canvas canvas) {        mcanvas.drawcircle (100,100,50,mcirclepaint);        Mcanvas.drawrect (100,100,200,200,mwavepaint);        Canvas.drawbitmap (mbitmap,0,0,null);        Super.ondraw (canvas);    }

Well, we can see that we have a bitmap on our own canvas (here we can understand that canvas is bitmap for the table, we draw on the Bimap), and then we draw a circle on the bitmap, and a rectangle. Finally, drawing our mbitmap to the system's canvas (displayed on the screen), we get the following effect.

Then we use the Setxfermode () method to set him a mode, where XOR is set.

can be found! Where the Intersect is gone! Isn't it magical.

Try to change the mode.

    Private Porterduffxfermode Mmode = new Porterduffxfermode (PorterDuff.Mode.DST_OVER);

You can see the circle running to the top of the rectangle. Then the giant gives us a summary of the various patterns, here is a description of DST for the first draw src for the post-painting:.

You can try it according to this rule.

Now, we overlap the circle and the rectangle. Mode is removed.

protected void OnDraw (canvas canvas) {        //dst        mcanvas.drawcircle (150,150,50,mcirclepaint);//        Mwavepaint.setxfermode (Mmode);        SRC        mcanvas.drawrect (100,100,200,200,mwavepaint);        Canvas.drawbitmap (mbitmap,0,0,null);        Super.ondraw (canvas);    }

This is the way it works.

It's a dog!!  Why is my circle gone? In fact, the circle is covered out. Then we want to achieve an effect, that is, in the scope of the circle to display the contents of the rectangle, how to do it. Look for yourself according to the picture haha.

--------------------------------------------back to the Chase------------------------------------

What we're going to achieve is a circular ripple of water that loadingview. The first is to achieve this water ripple.

This is where the Bezier curve comes in handy. The third-order Bessel is used here to constantly change the X-simulated water-wave effect.

if (x >) {            isleft = true;        } else if (x < 0) {            isleft = false;        }        <span style= "White-space:pre" ></span>if (Y > -50) {  //greater than-50 is because the auxiliary point is  in order for him to fill the entire screen y--;        if (isleft) {            x = x-1;        } else {            x = x + 1;        }        Mpath.reset ();        Mpath.moveto (0,  y);        Mpath.cubicto (+ x*2, + y, + x*2, y-50, Mwidth, y);//The first two parameters are the auxiliary point        Mpath.lineto (Mwidth, mheight);//fill the canvas        Mpath.lineto (0, mheight);//fill the entire canvas        mpath.close ();

Then use Mcanvas to draw this bitmap, note that before drawing to clear mbitmap, otherwise path will overlap

        Mbitmap.erasecolor (Color.parsecolor ("#00000000"));        DST        Mcanvas.drawpath (MPath, mpaint);

Canvas.drawbitmap (mbitmap, 0, 0, null);        Postinvalidatedelayed (10);

Dynamically change y notification redraw at the top, and now the effect is like this

Ah, the water wave effect came out. Then try to get him to draw a circle. First draw a circle

Mcanvas.drawcircle (MWIDTH/2, MHEIGHT/2, MWIDTH/2, Msrcpaint);

Amount: A little Sea sunrise feeling (see the Sun is green!) ）

Now let's go back to the question, how to draw src within the DST range ... The answer is: Src_in, did you find the right one? Add mode

  DST        mcanvas.drawcircle (MWIDTH/2, MHEIGHT/2, MWIDTH/2, msrcpaint);        Mpaint.setxfermode (Mmode);        SRC        mcanvas.drawpath (mPath, mpaint);        Canvas.drawbitmap (mbitmap, 0, 0, NULL);

The results are as follows:

Ah ha haha, is not a little feeling. If you don't do this, you need to consider a lot of questions. The dynamic calculation calculates the range of ArcTo along the arc x, y coordinates (I've calculated it.) Interested can mention that. I won't write if I'm not interested. ）

Perfect, add a percent to represent the progress, let y to change dynamically according to percent

y = (int) ((1-mpercent/100f) *mheight);

Add Setpercent method

public void setpercent (int percent) {        mpercent = percent;    }

Draw percentages of text.

String str = mpercent + "%";        float txtlength = Mtextpaint.measuretext (str);        Canvas.drawtext (mpercent + "%", MWIDTH/2-TXTLENGTH/2, MHEIGHT/2, Mtextpaint);

then cooperate with Seekbar. The effect is as follows:

Finally, change the font size brush transparency. Adding a background map is the effect.

Address: Click the Open link to find the Star

If you think this blog can also, then seek attention, point a top, comment on a discussion. In the future there will be more articles waiting for you ~

Teach you to draw a grid full of circular water ripple Loadingview Android