Shulou(Shulou.com)06/02 Report--

This article will explain in detail how Android customizes View to achieve horizontal double water ripple progress bar, the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Train of thought analysis

The overall effect can be divided into three, draw the fillet background and the fillet rectangle, draw the first and second water waves, and change the effect according to the custom progress.

Function realization

1. Draw rounded background and rounded rectangular border

Rounded rectangular border:

Private RectF rectBorder;if (rectBorder = = null) {rectBorder = new RectF (0.5f * dp1, 0.5f * dp1, waveActualSizeWidth-0.5f * dp1, waveActualSizeHeight-0.5f * dp1);} canvas.drawRoundRect (rectBorder, dp27, dp27, borderPaint)

We create a new canvas and then draw a rounded rectangular background and the first and second waves in the canvas:

/ / here the cache is used to create a new bitmap if (circleBitmap = = null) {circleBitmap = Bitmap.createBitmap (waveActualSizeWidth, waveActualSizeHeight, Bitmap.Config.ARGB_8888);} / / create a canvas if (bitmapCanvas = = null) {bitmapCanvas = new Canvas (circleBitmap);} / rounded rectangular background based on the bitmap, in order to let the waves fill the entire circular background if (rectBg = = null) {rectBg = new RectF (0,0, waveActualSizeWidth, waveActualSizeHeight) } bitmapCanvas.drawRoundRect (rectBg, dp27, dp27, backgroundPaint); / / cropping image canvas.drawBitmap (circleBitmap, 0,0, null); 2. Realization of double water waves through Bezier curve

1) realize the first water wave

/ * draw wavy lines * / private Path canvasWavePath () {/ / clear the route wavePath.reset () first; / / move the starting point to (0Power0) p0-p1 the height varies with the progress wavePath.moveTo ((currentPercent) * waveActualSizeWidth,-moveDistance); / / the maximum number of waves can be drawn / / you can also use I < getWidth () I+=waveLength to judge that this is not so perfect / / draw p0-p1 to draw a wavy line here is beyond View, on the right side of the right margin of View, so it is * 2 for (int I = 0; I < waveNumber * 2; iTunes +) {wavePath.rQuadTo (waveHeight, waveLength / 2, 0, waveLength); wavePath.rQuadTo (- waveHeight, waveLength / 2, 0, waveLength);} / connect p1-p2 wavePath.lineTo (0, waveActualSizeHeight) / / Connect p2-p0 wavePath.lineTo (0,0); / / close and fill wavePath.close (); return wavePath;}

MoveDistance is the distance at which the water wave moves vertically.

WaveLength is the length of water wave, with an upper arc plus a lower arc as a wavelength.

The starting point of path is (0Power0), which can be dynamically changed according to the progress, and then circulate the curve, the length of which is how many waves are, and then connect to the position of view height, and finally to (0Power0) to form a closed area, so as to achieve a filled water wave effect.

2) draw the second water wave, the second water wave is similar to the first, but the starting point has changed:

/ * draw the second layer of waves * / private Path canvasSecondPath () {secondWavePath.reset (); / / move the initial point below secondWavePath.moveTo ((currentPercent) * waveActualSizeWidth, waveActualSizeHeight + moveDistance); for (int I = 0; I < waveNumber * 2; iTunes +) {secondWavePath.rQuadTo (waveHeight,-waveLength / 2,0,-waveLength); secondWavePath.rQuadTo (- waveHeight,-waveLength / 2,0,-waveLength) } secondWavePath.lineTo (0,0); secondWavePath.lineTo (0, waveActualSizeHeight); secondWavePath.close (); return secondWavePath;} 3. Animate the progress and water ripples

/ * * set progress * * @ param currentProgress progress * @ time required for param duration to reach progress * / public void setProgress (int currentProgress, long duration, AnimatorListenerAdapter listenerAdapter) {float percent = currentProgress * 1f / maxProgress; this.currentProgress = currentProgress; / / change from 0 to currentPercent = 0; moveDistance = 0; mProgressAnimator = ValueAnimator.ofFloat (0, percent); / / set animation time mProgressAnimator.setDuration (duration) / / Let the animation play at a constant speed to avoid the phenomenon of wave translation pause mProgressAnimator.setInterpolator (new LinearInterpolator ()); mProgressAnimator.addUpdateListener (listener); mProgressAnimator.addListener (listenerAdapter); mProgressAnimator.start (); / / wavy line startWaveAnimal ();} / * * Wave animation * / private void startWaveAnimal () {/ / Animation instantiates if (waveProgressAnimator = = null) {waveProgressAnimator = new WaveProgressAnimal () / / set animation time waveProgressAnimator.setDuration (2000); / / set loop playback waveProgressAnimator.setRepeatCount (Animation.INFINITE); / / make the animation play at a uniform speed to avoid wave translation pause waveProgressAnimator.setInterpolator (new LinearInterpolator ()); / / enable animation this.startAnimation (waveProgressAnimator) in the current view;}}

The wave animation is achieved by changing the value of moveDistance to change the ordinate, and the progress is mainly achieved by changing the percentage of currentPercent to change the Abscissa of the wave.

On "Android how to customize View to achieve horizontal double water ripple progress bar" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.