Android自定義仿Siri曲線View

效果圖

代碼實作

仔細觀察效果圖可以發現，波浪其實是由4條貝塞爾曲線組成的，可以在自定義View的onDraw函數中，用Path.quadTo函數畫出4條曲線。

Path.quadTo(float x1, float y1, float x2, float y2)
           

其中，x1，y1為控制點的坐标值，x2，y2為終點的坐标值；當控制點的x1位于起點與終點之間時，将畫出正弦曲線，此時y1控制正弦曲線的高度，即效果圖中波浪的高度由y1控制。

實作了曲線繪制和高度控制之後，如何讓曲線像波浪一樣動起來呢？

我的解決方法是在螢幕左邊，即x<0的位置，同樣繪制4條正弦曲線，并且啟動線程讓8條曲線都向右移動，當左邊4條曲線全部移動到螢幕内後，讓這8條曲線複位。如此周期進行。

使用方法

在xml中，

<com.tao.view.SiriView
        android:id="@+id/siriView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_centerInParent="true"/>
           

在Activity.java中，

SiriView siriView = (SiriView) findViewById(R.id.siriView);
// 停止波浪曲線
siriView.stop();
// 設定曲線高度，height的取值是0f~1f
siriView.setWaveHeight(f);
// 設定曲線的粗細，width的取值大于0f
siriView.setWaveWidth(f);
// 設定曲線顔色
siriView.setWaveColor(Color.rgb(, , ));
// 設定曲線在X軸上的偏移量，預設值為0f
siriView.setWaveOffsetX(f);
// 設定曲線的數量，預設是4
siriView.setWaveAmount();
// 設定曲線的速度，預設是0.1f
siriView.setWaveSpeed(f);
           

Github位址

https://github.com/chenyuantao/SiriView