android自定义WaveView水波纹控件

2024-03-27 01:18

本文主要是介绍android自定义WaveView水波纹控件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

WaveView

Github Repository and libaray

https://github.com/onlynight/WaveView

首先看下演示demo

demo

demo中可以看到不同高度,不同速度,不同幅度的水波纹;你可以通过view的参数直接控制view的表现形式。

引入你的工程

  1. 在项目的根目录下的build.gradle文件中添加如下代码:
allprojects {repositories {...maven { url 'https://jitpack.io' }}
}
  1. 在你需要引用的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);}
}

这篇关于android自定义WaveView水波纹控件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

Android DataBinding 与 MVVM使用详解

《AndroidDataBinding与MVVM使用详解》本文介绍AndroidDataBinding库,其通过绑定UI组件与数据源实现自动更新,支持双向绑定和逻辑运算,减少模板代码,结合MV... 目录一、DataBinding 核心概念二、配置与基础使用1. 启用 DataBinding 2. 基础布局

Android ViewBinding使用流程

《AndroidViewBinding使用流程》AndroidViewBinding是Jetpack组件,替代findViewById,提供类型安全、空安全和编译时检查,代码简洁且性能优化,相比Da... 目录一、核心概念二、ViewBinding优点三、使用流程1. 启用 ViewBinding (模块级

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》:本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

《spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔)》:本文主要介绍spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔),本文通过实例图... 目录需求背景需求拆解设计流程及作用域逻辑处理代码逻辑需求背景公司要求,通过公司网络代理访问的请求需要做请

WinForms中主要控件的详细使用教程

《WinForms中主要控件的详细使用教程》WinForms(WindowsForms)是Microsoft提供的用于构建Windows桌面应用程序的框架,它提供了丰富的控件集合,可以满足各种UI设计... 目录一、基础控件1. Button (按钮)2. Label (标签)3. TextBox (文本框

Android NDK版本迭代与FFmpeg交叉编译完全指南

《AndroidNDK版本迭代与FFmpeg交叉编译完全指南》在Android开发中,使用NDK进行原生代码开发是一项常见需求,特别是当我们需要集成FFmpeg这样的多媒体处理库时,本文将深入分析A... 目录一、android NDK版本迭代分界线二、FFmpeg交叉编译关键注意事项三、完整编译脚本示例四