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

相关文章

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明(1)js 资源分离(2)非 JS 资

Android协程高级用法大全

《Android协程高级用法大全》这篇文章给大家介绍Android协程高级用法大全,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起学习吧... 目录1️⃣ 协程作用域(CoroutineScope)与生命周期绑定Activity/Fragment 中手

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息

Android 缓存日志Logcat导出与分析最佳实践

《Android缓存日志Logcat导出与分析最佳实践》本文全面介绍AndroidLogcat缓存日志的导出与分析方法,涵盖按进程、缓冲区类型及日志级别过滤,自动化工具使用,常见问题解决方案和最佳实... 目录android 缓存日志(Logcat)导出与分析全攻略为什么要导出缓存日志?按需过滤导出1. 按

Python自定义异常的全面指南(入门到实践)

《Python自定义异常的全面指南(入门到实践)》想象你正在开发一个银行系统,用户转账时余额不足,如果直接抛出ValueError,调用方很难区分是金额格式错误还是余额不足,这正是Python自定义异... 目录引言:为什么需要自定义异常一、异常基础:先搞懂python的异常体系1.1 异常是什么?1.2

Linux中的自定义协议+序列反序列化用法

《Linux中的自定义协议+序列反序列化用法》文章探讨网络程序在应用层的实现,涉及TCP协议的数据传输机制、结构化数据的序列化与反序列化方法,以及通过JSON和自定义协议构建网络计算器的思路,强调分层... 目录一,再次理解协议二,序列化和反序列化三,实现网络计算器3.1 日志文件3.2Socket.hpp

C语言自定义类型之联合和枚举解读

《C语言自定义类型之联合和枚举解读》联合体共享内存,大小由最大成员决定,遵循对齐规则;枚举类型列举可能值,提升可读性和类型安全性,两者在C语言中用于优化内存和程序效率... 目录一、联合体1.1 联合体类型的声明1.2 联合体的特点1.2.1 特点11.2.2 特点21.2.3 特点31.3 联合体的大小1

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束