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

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

P1 （废话部分，技术内容在P2）

上周陆续收到一些想尝试性换工作的小伙伴们的简历，相关的负责的HR妹子已经电话轰炸过去了，如果有兴趣的小伙伴可以看下http://blog.csdn.net/ddwhan0123/article/details/50756745的最下面部分，有相关职位的介绍，简历到QQ邮箱 [e-mail]

---

P2 这篇介绍的 是 一个（动画+思路）蛮不错的 进度实现的效果

效果：

how to use?

gradle:

/build.gradle文件

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

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

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