文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-25 12:58

关注

这篇文章将为大家详细讲解有关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.设置动画使进度和水波纹变化

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实现横向的双水波纹进度条”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯