翻翻git之---自定义View实现水位上涨效果 WaveProgressView

转载请注明出处:王亟亟的大牛之路

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下就行了，代码内容不多

我们先来看下自定义标签（用于初始化和设置）

<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的绘制有一定量好的基础才可以做出来。

git地址：https://github.com/zeng1990java/WaveProgressView

源码下载地址:https://github.com/zeng1990java/WaveProgressView/archive/master.zip