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改变波浪的横坐标达到。
结语
通过这个项目,主要可以学到贝塞尔曲线,也可以搭配上不同的动画,搞定产品的各种交互效果。对应的文件:HorizontalWaveProgressView.java
到此这篇关于Android如何自定义View实现横向的双水波纹进度条的文章就介绍到这了,更多相关Android自定义进度条内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7025249776069246984
相关文章
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
- 这篇文章主要给大家介绍了关于C#创建自定义控件及添加自定义属性和事件使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考,具体如下:这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学...2015-11-08
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
ant design中upload组件上传大文件,显示进度条进度的实例
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- 自定义一个jquery模态窗口插件,将它集成到现有平台框架中时,它只能在mainFrame窗口中显示,无法在顶层窗口显示. 解决这个问题的办法: 通过以下代码就可能实现在顶层窗口弹窗 复制代码 代码如下: $(window.top.documen...2014-05-31
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- 这篇文章主要介绍了自定义feignClient的常见坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
- 今天小编就为大家分享一篇pytorch 自定义卷积核进行卷积操作方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-06
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20