android自定义WaveView水波纹控件
作者:唯夜 发布时间:2023-08-25 21:09:47
本文实例为大家分享了android自定义WaveView水波纹控件的使用方法,供大家参考,具体内容如下
Github Repository and libaray
WaveView水波纹控件
首先看下演示demo
demo中可以看到不同高度,不同速度,不同幅度的水波纹;你可以通过view的参数直接控制view的表现形式。
引入你的工程
在项目的根目录下的build.gradle文件中添加如下代码:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
在你需要引用的module中添加如下依赖:
dependencies {
compile 'com.github.onlynight:WaveView:1.0.0'
}
使用
布局文件中添加view:
<com.github.onlynight.waveview.WaveView
android:id="@+id/waveView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:isCircle="false"
app:period="4"
app:waveHeightPercent="0.5"
app:waveRange="15dp"
app:waveSpeed="10"
app:waveStrokeWidth="3dp"/>
activity中需要手动启动水波纹
mWaveView1 = (WaveView) findViewById(R.id.waveView1);
// when you want start wave you should call WaveView#start() method.
mWaveView1.start();
// when you want stop wave you should call WaveView#stop() method.
mWaveView1.stop();
View 属性说明
<declare-styleable name="WaveView">
<!-- define wave speed, example value 10 -->
<attr name="waveSpeed" format="float"/>
<!-- define wave range, example value 15dp -->
<attr name="waveRange" format="dimension|reference"/>
<!-- define wave 1 color -->
<attr name="wave1Color" format="color|reference"/>
<!-- define wave 2 color -->
<attr name="wave2Color" format="color|reference"/>
<!-- define wave height percent, the value is between 0 to 1 -->
<attr name="waveHeightPercent" format="float"/>
<!-- define paint stroke width, if you want optimizing view,
you should change the stroke width more-->
<attr name="waveStrokeWidth" format="dimension|reference"/>
<!-- if the view is circle -->
<attr name="isCircle" format="boolean"/>
<!-- the sine wave period, value range 0 to all -->
<attr name="period" format="float"/>
</declare-styleable>
实现原理
我们视觉上看到的是水波纹,实际上只是一个正弦波和余弦波向左位移,然后将三角函数的周期加长,在一个view中不显示整个三角函数的的波形,这样从视觉上来说就是水波纹效果啦。
根据上面的分析,我们知道我们需要计算一个正弦波和一个余弦波,并且根据时间的推移将正弦波或者余弦波向左或者向右平移,最后每次计算完波形图的时候绘制下来就完成啦。下面我们来看下WaveView中的关键代码:
private void drawWave(Canvas canvas, int width, int height) {
setPaint();
double lineX = 0;
double lineY1 = 0;
double lineY2 = 0;
for (int i = 0; i < width; i += mStrokeWidth) {
lineX = i;
if (mIsRunning) {
lineY1 = mWaveRange * Math.sin((mAngle + i) * Math.PI / 180 / mPeriod) +
height * (1 - mWaveHeightPercent);
lineY2 = mWaveRange * Math.cos((mAngle + i) * Math.PI / 180 / mPeriod) +
height * (1 - mWaveHeightPercent);
} else {
lineY1 = 0;
lineY2 = 0;
}
canvas.drawLine((int) lineX, (int) lineY1,
(int) lineX + 1, height, mWavePaint1);
canvas.drawLine((int) lineX, (int) lineY2,
(int) lineX + 1, height, mWavePaint2);
}
}
可以看到,这里没有选择path进行绘制,因为path绘制无法满足需求,这里通过画竖线;计算每个点起始的位置,然后从这个点画一条线到view的底部,然后循环多次直到view的边界处结束绘制,这样就看到正弦波啦;这时候在每次绘制过程中给三角函数添加一个偏移量,这样每次计算的时候波形就会偏移;最后就完成啦。
有个地方有个坑需要注意,这里可以设置view为圆形;常规的思路是画完以后再将其切成一个圆形,我尝试了各种方法证明这种思路有问题;最后发现需要先限定canvas的绘制区域,然后再将图形绘制到view上去,这样才能实现clip的效果。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mIsRunning) {
int height = getHeight();
int width = getWidth();
// 这里要注意执行的顺序
clipContainer(canvas, width, height);
drawWave(canvas, width, height);
}
}
private void clipContainer(Canvas canvas, int width, int height) {
if (mIsCircle) {
mContainerPath.reset();
canvas.clipPath(mContainerPath);
mContainerPath.addCircle(width / 2, height / 2, width / 2, Path.Direction.CCW);
canvas.clipPath(mContainerPath, Region.Op.REPLACE);
}
}
来源:https://blog.csdn.net/tgbus18990140382/article/details/77977601
猜你喜欢
- 类加载器java中的类并不是一次加载完成的,而是按需加载。类加载器是用于加载java类到java虚拟机中的组件,它负责读取java字节码,并
- 1.官网下载JDK:1.1下载地址:https://www.oracle.com/java/technologies/javase-down
- android跑马灯出现重复跳动、不滚动问题,本文给出解决方案,供大家参考。原因:页面有View被重新绘制了、焦点被抢占例如:1、TextV
- java 接口回调实例详解首先官方对接口回调的定义是这样的,所谓回调:就是A类中调用B类中的某个方法C,然后B类中反过来调用A类中的方法D,
- 本文实例讲述了C#正则表达式匹配与替换字符串功能。分享给大家供大家参考,具体如下:事例一:\w+=>[A-Za-z1-9_],\s+=
- 一、Spring Boot 、 Spring MVC 、Spring对比首先你需要明白一件事情:Spring Boot项目目的并不是替换Sp
- Object(四大方法):文章干货满满,耐性看完~~何为Object?首先先来看看官方对Object的介绍:在这里附上Java官方的查阅工具
- Android资源文件大致可以分为两种:第一种是res目录下存放的可编译的资源文件:这种资源文件系统会在R.java里面自动生成该资源文件的
- 前言2016年3月修改,结合自己的工作和平时学习的体验重新谈一下为什么要进行代码优化。在修改之前,我的说法是这样的:就像鲸鱼吃虾米一样,也许
- 举例说明:1、有一个200*200像素的窗口,想要把它放在800*600像素的屏幕中间,屏幕的位置应是(800/2,600/2)=(400,
- springboottest测试依赖和使用<dependency> <groupId>or
- 介绍1.BLE 是 Bluetooth Low Energy 的缩写,意思为低功耗蓝牙。由蓝牙技术联盟(Bluetooth SI
- 一. 首先Swagger是什么?Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。
- 前言:线性表(linear list)是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构,常见的线性表:顺序表、
- 本文实例讲述了C#动态调用事件的方法。一般来说,传统的思路是,通过Reflection.EventInfo获得事件的信息,然后使用GetRa
- Spring的主要特性包括IOC和DI,其中DI是IOC的基础。在以前的Spring使用过程中大部分都是使用XML配置文件显式配置sprin
- 1、普通用户与系统管理员用户的权限要有严格的区分。如果一个普通用户在使用查询语句中嵌入另一个Drop Table语句,那么是否允许
- 通过内部存储方式实现了在两个Activity之间传递Bitmap对象以及其它支持串行化的Java对象,关键点有如下:1. HTT
- 前言之前提到了关于Spring的显示配置方式有两种,一种是基于XML配置,一种是基于JavaConfig的方式配置。对于这两种配置方式并不是
- 网络通信协议中的UDP通信是无连接通信,客户端在发送数据前无需与服务器端建立连接,即使服务器端不在线也可以发送,但是不能保证服务器端可以收到