Custom Waveprogressview to meet all your water ripple loading needs

Please respect the results of individual labor, reproduced the source, thank you!
http://blog.csdn.net/amazing7/article/details/51855165

Look first:

You can define your project logo image, you can set the water wave color, wavelength, Pocquan, font size, color, the maximum value of the progress bar, the current progress value, you can also set the speed of the ripple vibration. When setting a progress constant, there is an animated effect (such as a second traffic display, where the image is not truncated).

Source address, thank you for your support!

1. How to use 1.1 in a layout file

To add a custom control:

<cn.fanrunqi.waveprogressview.WaveProgressView    android:id="@+id/waveProgressbar"    android:background="@drawable/circle"    <!--android:background="@drawable/bg_a"-->    android:layout_width="130dp"    android:layout_height="130dp" />

Description, here Android:background defines the shape of the control, such as the circle above and the beauty, you can shape.xml define shape picture.

For example, this is a round

<?xml version= "1.0" encoding= "Utf-8"?  <shape  xmlns: Android  = "http://schemas.android.com/apk/res/android"  android:shape  =;  solid  android:color  =  "#DDDDDD" />  <size  android:width  = "150DP"  android:height  =" 150DP "/>   </shape ;   

You can also set a picture directly to Android:background, for example:

　

Notice the transparent pixels here, as well as the image zoom without distortion, it is suggested that the background (whether it is a picture or a graphic) is a square .

1.2 In the Code

You can choose to make the following settings:

//Set Current progress value and currently displayed textWaveprogressbar.setcurrent (intCurrentprogress,string currenttext);//, "788m/1024m"//Set the maximum value of the progress barWaveprogressbar.setmaxprogress (intmaxprogress);//Set the size and color of the display textWaveprogressbar.settext (String Mtextcolor,intMtextsize);//"#FFFF00",//Set the color of the water wavesWaveprogressbar.setwavecolor (String mwavecolor);//"#5b9ef4"//Set the height of the wave and the width of the wave (both the size of a crest)Waveprogressbar.setwave (floatMwavehight,floatMwavewidth);//Set the speed of the top and bottom vibrations of the wave (note that the larger the value, the smaller the vibration)Waveprogressbar.setmwavespeed (intMwavespeed);//the larger The value, the slower the vibration

2. Code implementation

Here to achieve the main use of the knowledge has a custom view, Porterduffxfermode and quadratic Bezier curve, not very clear can be found in my blog, there are.
First, customize Waveprogressview inherit view, get the background set in the layout file in the constructor, and set a brush for the brush and the drawing text.

Private void Init() {/** * Get background * *        if(NULL==getbackground ()) {Throw NewIllegalArgumentException (String.Format ("background is null.")); }Else{Backgroundbitmap = getbitmapfromdrawable (Getbackground ()); }/** * Wave brush * /MPath =NewPath (); Mpathpaint =NewPaint (); Mpathpaint.setantialias (true); Mpathpaint.setstyle (Paint.Style.FILL);/** * Progress Brush * /Mtextpaint =NewPaint (); Mtextpaint.setantialias (true); Mtextpaint.settextalign (Paint.Align.CENTER);//Start drawing constantly and let the waves move.Handler.sendemptymessagedelayed (INVALIDATE, -); }

In the OnDraw method, the wave is drawn on the canvas first, then the background is drawn (set the PorterDuff.Mode.DST_ATOP mode for the background brush: Take the upper non-intersecting part and the lower part of the intersection). Of course it can be PorterDuff.Mode.SRC_ATOP, depending on the order in which you draw. Finally, the text is drawn up, forming a final bitmap, and finally the bitmap painting to OnDraw parameters canvas.

Paint paint =NewPaint (); Paint.setantialias (true); Bitmap finalbmp = Bitmap.createbitmap (Width,height, Bitmap.Config.ARGB_8888);/** * Produce a canvas of the same size * *Canvas Canvas =NewCanvas (finalbmp);/** * Draw waves * *        floatCurmidy = height* (maxprogress-currentprogress)/maxprogress;if(Cury>curmidy) {CurY = CurY-(cury-curmidy)/Ten;        } mpath.reset (); Mpath.moveto (0-distance,cury);intWavenum = width/((int) mwavehalfwidth*4)+1;intMultiplier =0; for(inti =0; i<wavenum*3; i++) {Mpath.quadto (mwavehalfwidth* (multiplier+1)-distance,cury-mwavehight,mwavehalfwidth* (multiplier+2)-distance,cury); Mpath.quadto (mwavehalfwidth* (multiplier+3)-distance,cury+mwavehight,mwavehalfwidth* (multiplier+4)-distance,cury); multiplier+=4;        } distance +=mwavehalfwidth/mwavespeed; Distance = distance% (mwavehalfwidth*4);        Mpath.lineto (Width,height); Mpath.lineto (0, height);        Mpath.close (); Canvas.drawpath (MPath, mpathpaint);/** * Zooming in on the image * *        intmin = Math.min (width,height); Backgroundbitmap = Bitmap.createscaledbitmap (Backgroundbitmap,min,min,false);/** * Use Dst_atop to take the upper non-intersecting part and the lower part of the intersection. */Paint.setxfermode (NewPorterduffxfermode (PorterDuff.Mode.DST_ATOP));/** * Drawing pictures * *Canvas.drawbitmap (Backgroundbitmap,0,0, paint);/** * Draw Progress Text * /Canvas.drawtext (Currenttext, width/2, height/2, Mtextpaint);returnFinalbmp;

Here the Cury is the y-coordinate of the last wave centerline, Curmidy is the current y-coordinate, each time the wave rises in order not to produce a lag effect, the 1/100 rise is divided into 10 times to draw.
The distance is the offset of the x-axis, and in order to make the water fluctuate, it is shifted to the left at each draw.

distance +=mWaveHalfWidth/mWaveSpeed;distancedistance%(mWaveHalfWidth*4);

The offset distance is half-wave width/wave motion speed, because a wave is 4 half-wave width to form a loop and then back to the first X position to begin the cyclic displacement.
Based on the width of the view, calculate how many waveforms to draw out, and add a wave in order to move toward the pan left.

intWavenum = width/((int) mwavehalfwidth*4)+1;intMultiplier =0; for(inti =0; i<wavenum*3; i++) {Mpath.quadto (mwavehalfwidth* (multiplier+1)-Distance, cury-mwavehight,mwavehalfwidth* (multiplier+2)-Distance, CurY); Mpath.quadto (mwavehalfwidth* (multiplier+3)-Distance, cury+mwavehight,mwavehalfwidth* (multiplier+4)-Distance, CurY); multiplier+=4; }

Each draw is drawn to the left point of the waveform, to the right of the waveform, to the lower-left corner of the view, to the lower-right corner of the view, to form a picture that draws it to the new and view-sized canvas in memory.

mPath.reset();mPath.moveTo(0-distance,CurY);mPath.lineTo(width,height);mPath.lineTo(0,height);mPath.close();canvas.drawPath(mPath, mPathPaint);

The background graphic is scaled first and then drawn to the canvas, where the zoom is scaled by the smallest edge.

intmin = Math.min(width,height);backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap,min,min,false);

Finally, the text is drawn up, notice that we set the brush in the initialization, in order to be able to set the text color through the code, to set the text brush color and size in the OnDraw method.

 mPathPaint.setColor(Color.parseColor(mWaveColor)); mTextPaint.setColor(Color.parseColor(mTextColor)); mTextPaint.setTextSize(mTextSize);canvas.drawText(currentText, width/2, height/2, mTextPaint);

To make the waves move, use the handler loop to invoke the Invalidate refresh interface. You should also open the handler loop in the constructor.

private   Static  final  int  INVALIDATE = 0x777 ; private         Handler Handler = new  Handler () { @Override  public  void  handlemessage  (Message msg)            {super . Handlemessage (msg); switch                     (msg.what) {case  invalidate:invalidate ();                    Sendemptymessagedelayed (INVALIDATE,REFRESHGAP);            break ; }        }    };

The last is the function of some related property setting.

 /** * @param currentprogress Current Progress * @param Currenttext currently displayed progress text */     Public void setcurrent(intCurrentprogress,string Currenttext) { This. currentprogress = currentprogress; This. Currenttext = Currenttext; }/** * @param maxprogress Set the maximum value of the progress bar, default     Public void setmaxprogress(intmaxprogress) { This. maxprogress = maxprogress; }/** * @param The color of mtextcolor text * @param the size of the mtextsize text * *     Public void SetText(String Mtextcolor,intMtextsize) { This. Mtextcolor = Mtextcolor; This. mtextsize = mtextsize; }/** * @param The height of the mwavehight crest * @param mwavewidth The width of a crest * /     Public void Setwave(floatMwavehight,floatMwavewidth) { This. mwavehight = Mwavehight; This. Mwavehalfwidth = mwavewidth/2; }/** * @param The color of Mwavecolor water * *     Public void Setwavecolor(String Mwavecolor) { This. Mwavecolor = Mwavecolor; }/** * The higher the value of the more volatile slow * @param mwavespeed */     Public void Setmwavespeed(intMwavespeed) { This. mwavespeed = Mwavespeed; }

Implementation or is relatively simple, the source code and demo are in the above address, if there is any problem can give me a message, thank you!
　　

Custom Waveprogressview to meet all your water ripple loading needs