P1 （廢話部分，技術內容在P2）

上週陸續收到一些想嘗試性換工作的小夥伴們的簡歷，相關的負責的HR妹子已經電話轟炸過去了，如果有興趣的小夥伴可以看下http://blog.csdn.net/ddwhan0123/article/details/50756745的最下面部分，有相關職位的介紹，簡歷到QQ郵箱 [email protected]

P2 這篇介紹的 是 一個（動畫+思路）蠻不錯的 進度實現的效果

效果：

how to use?

gradle:

/build.gradle檔案

jitpack.io

repositories {
    maven {
        url "https://jitpack.io"
 

    }
}

/app/build.gradle檔案

compile 'com.github.zeng1990java:WaveProgressView:1.0.5'

Eclipse:

把圈出來的地方copy下就行了，程式碼內容不多

我們先來看下自定義標籤（用於初始化和設定）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="WaveProgressView">
        <attr name="waveColor"
 
 format="color"/>
        <attr name="waveBorderWidth" format="dimension"/>
        <attr name="waveBorderRadius" format="dimension"/>
        <attr name="waveAmplitude" format="dimension"/>
        <attr name="waveMax" format="integer"/>
        <attr name="waveProgress" format
 
="integer"/>
    </declare-styleable>
</resources>

大致是設定顏色啊，畫筆粗細啊，最大值啊，進度值啊,外部框體線條厚度之類的

那 如何使用呢？

<com.github.zeng1990java.widget.WaveProgressView
        android:id="@+id/wave_progress_view_2"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:layout_centerHorizontal="true"
        app:waveMax="100"
        app:waveColor="#3498db"
        app:waveAmplitude="8dp"
        app:waveBorderWidth="3dp"
        app:waveBorderRadius="2dp"
        />

引用下就行了 不引用的話有預設值。

大致講一下實現，這裡就不讀程式碼了 首先先獲取了一大堆引數，然後根據根據長寬高和傳入的畫筆粗細 畫外面那個空心大方框,再是根據寬度計算Y的變化繪製那個水波的效果 最後再onDraw裡畫出來就行了 我覺得6的是下面那個方法的演算法（好吧，我菜）

核心路徑繪製在updatePath()方法中

    private void updatePath() {
        this.mPath.reset();
        for (int i = 0; i < mWaveWidth; i++) {
            int x = i;
            int y = (int) clamp(
                    mAmplitude * Math.sin((i* mAngularVelocity + mAngle * Math.PI) / 180.0f) + (mWaveHeight - mWaveProgressHeight),
                    mHaftBorderRadius,
                    mWaveHeight
            );
            if (i == 0) {
                this.mPath.moveTo( x, y);
            }
            this.mPath.quadTo( x, y, x + 1, y);
        }
        this.mPath.lineTo(mWaveWidth, mWaveHeight);
        this.mPath.lineTo(0, mWaveHeight);
        this.mPath.close();
    }

其他就是一些各種set加Anim了。

再說下在Activity裡如何使用

首先，先獲取控制元件物件

   WaveProgressView waveProgressView = (WaveProgressView) findViewById(R.id.wave_progress_view);

然後進行一些簡單的設定,還可以設定顏色啊，進度值什麼的。

    waveProgressView.setMax(100);

作者在其官方的演示裡是讓動畫在不同持續時間無限迴圈的

   private void animWave(WaveProgressView waveProgressView, long duration){
        ObjectAnimator progressAnim = ObjectAnimator.ofInt(waveProgressView, "progress", 0, waveProgressView.getMax());
        progressAnim.setDuration(duration);
        progressAnim.setRepeatCount(ObjectAnimator.INFINITE);
        progressAnim.setRepeatMode(ObjectAnimator.RESTART);
        progressAnim.start();
    }

總體來說，使用起來幾乎沒難度，如果要完全獨立自己寫一個類似的控制元件的話，還是要對 Canvas Paint 以及View的繪製有一定量好的基礎才可以做出來。