Android自定义view实现圆形waveview

2024-08-28 16:58

本文主要是介绍Android自定义view实现圆形waveview,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Android自定义view实现圆形waveview

最近学习了贝塞尔曲线的一些知识,刚好项目中需要实现一个圆形进度,然后就将实现的waveView记录一下。需要使用的知识大概有自定义view、贝塞尔曲线、valueAnimator(属性动画)、Xfermode等。
以下为效果图:
这里写图片描述
废话不多说,直接上代码这里只是一些重要的代码。如果需要demo可以去下载。
下载地址

首先需要自定义view的属性:

<declare-styleable name="custom_wave_view_attr"><attr name="circle_color" format="color"></attr>       //圆的颜色<attr name="circle_background_color" format="color"></attr>       //圆的背景色<attr name="progress_wave_color" format="color"></attr>       //水波纹的颜色<attr name="progress_text_size" format="dimension"></attr>   //字体的大小<attr name="progress_text_color" format="color"></attr>          //字体的颜色</declare-styleable>

第二步自定义CustomWaveView

1、实现构造方法,在构造方法中获取属性值

TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.custom_wave_view_attr);
//圆的颜色
circle_color =        ta.getColor(R.styleable.custom_wave_view_attr_circle_color,getResources().getColor(android.R.color.black));
//圆的背景色
circle_bg_color =   ta.getColor(R.styleable.custom_wave_view_attr_circle_background_color,getResources().getColor(android.R.color.white));
//水波纹颜色
wave_color = ta.getColor(R.styleable.custom_wave_view_attr_progress_wave_color,getResources().getColor(android.R.color.holo_blue_dark));
//字体的颜色
text_color = ta.getColor(R.styleable.custom_wave_view_attr_progress_text_color,getResources().getColor(android.R.color.black));
//字体的大小
textSize = ta.getDimension(R.styleable.custom_wave_view_attr_progress_text_size,30f);
//释放资源
ta.recycle();

2、初始化画笔

//初始化背景圆画笔
mBgCirclePaint = new Paint();
//抗锯齿
mBgCirclePaint.setAntiAlias(true);
//设置背景圆的背景色
mBgCirclePaint.setColor(circle_bg_color);
//设置充满
mBgCirclePaint.setStyle(Paint.Style.FILL);
//初始化水波纹画笔
mWavePaint = new Paint();
//抗锯齿
mWavePaint.setAntiAlias(true);
//设置水波纹的背景色
mWavePaint.setColor(wave_color);
//设置充满
mWavePaint.setStyle(Paint.Style.FILL);
//使用Xfermode获取重叠部分
mWavePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

3、绘制贝塞尔曲线。以下为原理图。

这里写图片描述

/**
* 初始化贝塞尔曲线上的点
*/
private void reset() {startP = new PointF(-width, height);nextP = new PointF(-width/2, height);threeP = new PointF(0, height);fourP = new PointF(width/2, height);endP = new PointF(width, height);controllerP1 = new PointF(-width/4, height);controllerP2 = new PointF(-width * 3/4, height);controllerP3 = new PointF(width/4, height);controllerP4 = new PointF(width * 3/4, height);
}

4、在onDraw方法中画贝塞尔曲线和圆

@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);//在透明画布上画背景圆mCanvas.drawCircle(width/2, height/2, radius, mBgCirclePaint);//贝塞尔曲线mPath.reset();mPath.moveTo(startP.x, startP.y);mPath.quadTo(controllerP1.x, controllerP1.y, nextP.x, nextP.y);mPath.quadTo(controllerP2.x, controllerP2.y, threeP.x, threeP.y);mPath.quadTo(controllerP3.x, controllerP3.y, fourP.x, fourP.y);mPath.quadTo(controllerP4.x, controllerP4.y, endP.x, endP.y);mPath.lineTo(endP.x, height);mPath.lineTo(-width, height);//在透明画布上绘制水波纹mCanvas.drawPath(mPath,mWavePaint);//将画好的圆绘制在画布上canvas.drawBitmap(mBitmap, 0, 0, null);
}

5、使用动画让贝塞尔曲线动起来

/**
* 开始动画 让startP的x点坐标在2S时间内循环移动到0点。
*  depth---进度
*  waveRipple----水波纹的振幅
*/
private void startAnimator() {animator = ValueAnimator.ofFloat(startP.x, 0);animator.setInterpolator(new LinearInterpolator());animator.setDuration(2000);//重复循环animator.setRepeatCount(ValueAnimator.INFINITE);animator.addUpdateListener(new       ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {startP.x = (Float) animation.getAnimatedValue();startP = new PointF(startP.x, height - depth);nextP = new PointF(startP.x + width/2, height - depth);threeP = new PointF(nextP.x + width/2, height - depth);fourP = new PointF(threeP.x + width/2, height - depth);endP = new PointF(fourP.x + width/2, height - depth);controllerP1 = new PointF(startP.x + width/4, height - depth + waveRipple);controllerP2 = new PointF(nextP.x + width/4, height - depth - waveRipple);controllerP3 = new PointF(threeP.x + width/4, height - depth + waveRipple);controllerP4 = new PointF(fourP.x + width/4, height - depth - waveRipple);invalidate();}});animator.start();
}

第三步在XML中使用自定义View

<com.criclewaveview_master.CustomWaveViewandroid:id="@+id/custom_circle_wave_view"android:layout_width="wrap_content"android:layout_height="wrap_content"wave:circle_color = "@color/circle_color"android:layout_centerInParent="true"wave:circle_background_color = "@color/circle_bg_color"wave:progress_wave_color = "@color/colorAccent"wave:progress_text_size = "20sp"wave:progress_text_color = "@color/circle_color"/>

这样就完成了自定义WaveView

这篇关于Android自定义view实现圆形waveview的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1115349

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P

工厂ERP管理系统实现源码(JAVA)

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本,并实时掌握各环节的运营状况。 在采购管理方面,系统能够处理采购订单、供应商管理和采购入库等流程,确保采购过程的透明和高效。仓库管理方面,实现库存的精准管理,包括入库、出库、盘点等操作,确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、