【移動應(yīng)用開發(fā)技術(shù)】android中怎么自定義WaveView水波紋控件

【移動應(yīng)用開發(fā)技術(shù)】android中怎么自定義WaveView水波紋控件

這期內(nèi)容當(dāng)中在下將會給大家?guī)碛嘘P(guān)android中怎么自定義WaveView水波紋控件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。引入你的工程在項(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中需要手動啟動水波紋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>實(shí)現(xiàn)原理我們視覺上看到的是水波紋，實(shí)際上只是一個正弦波和余弦波向左位移，然后將三角函數(shù)的周期加長，在一個view中不顯示整個三角函數(shù)的的波形，這樣從視覺上來說就是水波紋效果啦。根據(jù)上面的分析，我們知道我們需要計(jì)算一個正弦波和一個余弦波，并且根據(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進(jìn)行繪制，因?yàn)閜ath繪制無法滿足需求，這里通過畫豎線；計(jì)算每個點(diǎn)起始的位置，然后從這個點(diǎn)畫一條線到view的底部，然后循環(huán)多次直到view的邊界處結(jié)束繪制，這樣就看到正弦波啦；這時候在每次繪制過程中給三角函數(shù)添加一個偏移量，這樣每次計(jì)算的時候波形就會偏移；最后就完成啦。有個地方有個坑需要注意，這里可以設(shè)置view為圓形；常規(guī)的思路是畫完以后再將其切成一個圓形，我嘗試了各種方法證明這種思路有問題；最后發(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();

ca