本文實例為大家分享了android自定義WaveView水波紋控件的使用方法，供大家參考，具體內(nèi)容如下
Github Repository and libaray
首先看下演示demo
demo中可以看到不同高度，不同速度，不同幅度的水波紋；你可以通過view的參數(shù)直接控制view的表現(xiàn)形式。
引入你的工程
在項目的根目錄下的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>
實現(xiàn)原理
我們視覺上看到的是水波紋，實際上只是一個正弦波和余弦波向左位移，然后將三角函數(shù)的周期加長，在一個view中不顯示整個三角函數(shù)的的波形，這樣從視覺上來說就是水波紋效果啦。
根據(jù)上面的分析，我們知道我們需要計算一個正弦波和一個余弦波，并且根據(jù)時間的推移將正弦波或者余弦波向左或者向右平移，最后每次計算完波形圖的時候繪制下來就完成啦。下面我們來看下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); }}可以看到，這里沒有選擇path進行繪制，因為path繪制無法滿足需求，這里通過畫豎線；計算每個點起始的位置，然后從這個點畫一條線到view的底部，然后循環(huán)多次直到view的邊界處結(jié)束繪制，這樣就看到正弦波啦；這時候在每次繪制過程中給三角函數(shù)添加一個偏移量，這樣每次計算的時候波形就會偏移；最后就完成啦。
有個地方有個坑需要注意，這里可以設(shè)置view為圓形；常規(guī)的思路是畫完以后再將其切成一個圓形，我嘗試了各種方法證明這種思路有問題；最后發(fā)現(xiàn)需要先限定canvas的繪制區(qū)域，然后再將圖形繪制到view上去，這樣才能實現(xiàn)clip的效果。
@Overrideprotected 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); }}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點
疑難解答
