android自定义WaveView水波纹控件

本文实例为大家分享了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);
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。