Android怎么自定义View实现横向的双水波纹进度条

这篇文章将为大家详细讲解有关Android怎么自定义View实现横向的双水波纹进度条，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

思路分析

整体效果可分为三个，绘制圆角背景和圆角矩形，绘制第一条和第二条水波浪，根据自定义进度变化效果。

功能实现

1.绘制圆角背景和圆角矩形边框

圆角矩形边框：

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);

我们创建一个新的画布，然后在画布里画上圆角矩形背景和第一条和第二条水波浪：

//这里用到了缓存 根据参数创建新位图 if (circleBitmap == null) {     circleBitmap = Bitmap.createBitmap(waveActualSizeWidth, waveActualSizeHeight, Bitmap.Config.ARGB_8888); } //以该bitmap为底创建一块画布 if (bitmapCanvas == null) {     bitmapCanvas = new Canvas(circleBitmap); } // 圆角矩形背景，为了能让波浪填充完整个圆形背景 if (rectBg == null) {     rectBg = new RectF(0, 0, waveActualSizeWidth, waveActualSizeHeight); } bitmapCanvas.drawRoundRect(rectBg, dp27, dp27, backgroundPaint); //裁剪图片 canvas.drawBitmap(circleBitmap, 0, 0, null);

2.通过贝塞尔曲线实现双水波

1）实现第一条水波

/**  * 绘制波浪线  */ private Path canvasWavePath() {     //要先清掉路线     wavePath.reset();     //起始点移至(0,0) p0 -p1 的高度随着进度的变化而变化     wavePath.moveTo((currentPercent) * waveActualSizeWidth, -moveDistance);     //最多能绘制多少个波浪     //其实也可以用 i < getWidth() ;i+=waveLength来判断 这个没那么完美     //绘制p0 - p1 绘制波浪线 这里有一段是超出View的，在View右边距的右边 所以是* 2     for (int i = 0; i < waveNumber * 2; i++) {         wavePath.rQuadTo(waveHeight, waveLength / 2, 0, waveLength);         wavePath.rQuadTo(-waveHeight, waveLength / 2, 0, waveLength);     }     //连接p1 - p2     wavePath.lineTo(0, waveActualSizeHeight);     //连接p2 - p0     wavePath.lineTo(0, 0);     //封闭起来填充     wavePath.close();     return wavePath; }

moveDistance为水波垂直方向移动的距离。

waveLength为水波长度，一个上弧加一个下弧为一个波长。

path的起始点为(0,0)可根据进度动态改变，然后循环画曲线，长度是有几个波浪就是多长，然后连接到view高度的位置，最后到(0，0)，形成一个封闭的区域，这样就实现了一个填充的水波效果。

2）绘制第二条水波，第二条水波和第一条类似，只是起始点变了：

/**  * 绘制第二层波浪  */ private Path canvasSecondPath() {     secondWavePath.reset();     //初始点移动到下方     secondWavePath.moveTo((currentPercent) * waveActualSizeWidth, waveActualSizeHeight + moveDistance);     for (int i = 0; i < waveNumber * 2; i++) {         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.设置动画使进度和水波纹变化

/**  * 设置进度  *  * @param currentProgress 进度  * @param duration        达到进度需要的时间  */ public void setProgress(int currentProgress, long duration, AnimatorListenerAdapter listenerAdapter) {     float percent = currentProgress * 1f / maxProgress;     this.currentProgress = currentProgress;     //从0开始变化     currentPercent = 0;     moveDistance = 0;     mProgressAnimator = ValueAnimator.ofFloat(0, percent);     //设置动画时间     mProgressAnimator.setDuration(duration);     //让动画匀速播放，避免出现波浪平移停顿的现象     mProgressAnimator.setInterpolator(new LinearInterpolator());     mProgressAnimator.addUpdateListener(listener);     mProgressAnimator.addListener(listenerAdapter);     mProgressAnimator.start();     // 波浪线     startWaveAnimal(); } /**  * 波浪动画  */ private void startWaveAnimal() {     //动画实例化     if (waveProgressAnimator == null) {         waveProgressAnimator = new WaveProgressAnimal();         //设置动画时间         waveProgressAnimator.setDuration(2000);         //设置循环播放         waveProgressAnimator.setRepeatCount(Animation.INFINITE);         //让动画匀速播放，避免出现波浪平移停顿的现象         waveProgressAnimator.setInterpolator(new LinearInterpolator());         //当前视图开启动画         this.startAnimation(waveProgressAnimator);     } }

其中波浪动画是通过改变moveDistance的值改变纵坐标达到，进度主要是通过改变百分比currentPercent改变波浪的横坐标达到。

关于“Android怎么自定义View实现横向的双水波纹进度条”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。