android自定義WaveView水波紋控件

更新時(shí)間：2019年01月29日 17:00:41 作者：唯夜

這篇文章主要為大家詳細(xì)介紹了android自定義WaveView水波紋控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了android自定義WaveView水波紋控件的使用方法，供大家參考，具體內(nèi)容如下

Github Repository and libaray

WaveView水波紋控件

首先看下演示demo

demo中可以看到不同高度，不同速度，不同幅度的水波紋；你可以通過(guò)view的參數(shù)直接控制view的表現(xiàn)形式。

引入你的工程

在項(xiàng)目的根目錄下的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中需要手動(dòng)啟動(dòng)水波紋

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 屬性說(shuō)明

<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>

實(shí)現(xiàn)原理

我們視覺(jué)上看到的是水波紋，實(shí)際上只是一個(gè)正弦波和余弦波向左位移，然后將三角函數(shù)的周期加長(zhǎng)，在一個(gè)view中不顯示整個(gè)三角函數(shù)的的波形，這樣從視覺(jué)上來(lái)說(shuō)就是水波紋效果啦。

根據(jù)上面的分析，我們知道我們需要計(jì)算一個(gè)正弦波和一個(gè)余弦波，并且根據(jù)時(shí)間的推移將正弦波或者余弦波向左或者向右平移，最后每次計(jì)算完波形圖的時(shí)候繪制下來(lái)就完成啦。下面我們來(lái)看下WaveView中的關(guān)鍵代碼：

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);
 }
}

可以看到，這里沒(méi)有選擇path進(jìn)行繪制，因?yàn)閜ath繪制無(wú)法滿足需求，這里通過(guò)畫豎線；計(jì)算每個(gè)點(diǎn)起始的位置，然后從這個(gè)點(diǎn)畫一條線到view的底部，然后循環(huán)多次直到view的邊界處結(jié)束繪制，這樣就看到正弦波啦；這時(shí)候在每次繪制過(guò)程中給三角函數(shù)添加一個(gè)偏移量，這樣每次計(jì)算的時(shí)候波形就會(huì)偏移；最后就完成啦。

有個(gè)地方有個(gè)坑需要注意，這里可以設(shè)置view為圓形；常規(guī)的思路是畫完以后再將其切成一個(gè)圓形，我嘗試了各種方法證明這種思路有問(wèn)題；最后發(fā)現(xiàn)需要先限定canvas的繪制區(qū)域，然后再將圖形繪制到view上去，這樣才能實(shí)現(xiàn)clip的效果。

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if (mIsRunning) {
 int height = getHeight();
 int width = getWidth();

 // 這里要注意執(zhí)行的順序
 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);
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: