Android双波浪自定义控件(DoubleWaveView)

　　发现淘宝个人页顶部的自定义控件很炫酷啊有没有（IOS端），它这里是一个动态的双波纹效果，由于IOS端的效果它有周期性地渐变振幅的功能，比较复杂。对于振幅的渐变效果，当时就想着是怎么实现的，冥思苦想了老半天不得果（每次都重新计算设置正弦函数值，有点太耗费性能了）。
　　后面又拿起安卓机看了一下安卓客户端的效果，结果发现是个静态的双波纹，What ? 和IOS的差距咋那么大？ 想了想，淘宝应该是出于对于安卓机器性能参差不齐的考虑，所以他们的研发人员就没有在安卓机实现动态效果。好了，发一下截图对比：

Android端的效果：

　IOS端的效果：

　　对于一个有追求的攻城狮来说，一知半解是最不能忍受的，所以说干就干，咱也弄一个出来。秉着IT界的真理：“不要重复造轮子”的思想，先在网上查资料看有没有人造好了这个轮子。果然，有类似的博客，但是很多人评论说性能消耗很大，实际使用会比较卡，尤其是在低端机上面。类似效果的博客地址：http://blog.csdn.net/tianjian4592/article/details/44222565。鉴于这样的情况，就自己进行优化吧～按照惯例，先发一下我最后实现出来的效果：
　　
　　
　　
如果你只是抱着直接拿来用的心态的话，这个自定义控件我上传到JCenter上面去了，可以直接

１.引入依赖项目：

compile 'com.xiaosong520:doublewaveview:1.0.1' 

２.然后在布局文件中：

 <com.doublewave.DoubleWaveView
        android:id="@+id/waveView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        DoubleWaveView:speedOne="8"
        DoubleWaveView:speedTwo="6"
        DoubleWaveView:peakValue="20dp"
        DoubleWaveView:waveHeight="200dp"
        DoubleWaveView:waveColor="@color/colorBlue"/>

由于是自定义控件，需要在根布局中添加适配：
xmlns:DoubleWaveView="http://schemas.android.com/apk/res-auto"

3.在Activity中：

 waveView = (DoubleWaveView) findViewById(R.id.waveView);
 waveView.setAnim(false);//默认是开启动画效果的，选false可关闭
 waveView.setAnim(true);//如果已经关闭，重新设置True开启动画

简单的三步，就可以使用了。

如果你是想理解透它的实现原理，那么请继续往下看~

在开始码码码之前，得做好准备工作，俗话说得好，磨刀不误砍柴工嘛，先搞清楚实现思路：

　1.确定水波纹的正弦函数方程；

　2.根据函数方程得出每一个波纹上点的坐标（单位：px），并保存到一维数组中；

　3.根据正弦函数的坐标不断绘制竖直直线，形成一个静态波纹图；

　4.不断调用onDraw方法，改变正弦函数Y值进行重绘，生成动态水波纹。

　　
　　Step 1：生成波纹曲线
　　
　　波纹曲线是利用正弦函数来实现的，正弦函数的方程式：y = A*sin(ωx+b)+h
一开始自己也懵逼了，这几个参数分别都是什么来着了啊？努力回忆中。。。 当年的理科学霸小正太现在已然成了老年痴呆社会青年，感觉自己应该是读了个假高中。关于正弦函数的定义，如果你也忘记了的话，自行Google 百度温习一下知识吧~查找资料后可以确定：w影响周期，A影响振幅，h影响y轴位置，b为初相；周期T = 2π/ω。

　　 Step 2:自定义DoubleWaveView的属性

　　在步骤一中，我们已经了解了正弦函数的各个参数的含义以及计算方法。那么接下来我们就开始自定义View：
　　首先创建一个DoubleWaveView类 ,继承自View。 由于波纹的颜色、振幅、移动速度等，可能会根据实际情况需要变动，所以我们接下来在项目的res-values目录下创建一个attrs的xml 文件，用于创建自定义属性。关于自定义View的步骤如果还不是蛮太懂的话，可以补习一下自定义View 的知识，推荐张鸿洋的这篇博客： Android 自定义View (一)
　　
这里我定义的attrs属性如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="peakValue" format="dimension"/>
    <attr name="waveColor" format="color" />
    <attr name="speedOne" format="integer" />
    <attr name="speedTwo" format="integer" />
    <attr name="waveHeight" format="dimension" />

    <declare-styleable name="DoubleWaveView">
        <attr name="peakValue" />
        <attr name="waveColor" />
        <attr name="speedOne" />
        <attr name="speedTwo" />
        <attr name="waveHeight" />

    </declare-styleable>

</resources>

正弦函数方程式： y = A*sin(wx+b)+h
五个属性代表的含义：

peakValue ：振幅 ，即对应的是A
waveHeight：波浪距离控件底部的高度。描述起来可能有点歧义，看下面的图就明白了

speedOne：第一条波浪的移动速度
speedTwo：第二条波浪的移动速度
waveColor：水波的颜色

Step 3:　绘制双波纹图形

　　１.先把之前在attr.xml中定义好的属性值，通过构造函数获取到，并设置好画笔，代码都有注释，就不多说了，如果有疑问可以回复讨论：

    public DoubleWaveView(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);
    }

    public DoubleWaveView(Context context)
    {
        this(context, null);
    }

    public DoubleWaveView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        //获取自定义属性值
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DoubleWaveView, defStyle, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.DoubleWaveView_peakValue:
                    //振幅默认是30dp
                    STRETCH_FACTOR_A =  a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_DIP, 30, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DoubleWaveView_waveColor:
                    WAVE_PAINT_COLOR = a.getColor(attr, 0x881E90FF);//默认是蓝色
                    break;
                case R.styleable.DoubleWaveView_speedOne:
                    TRANSLATE_X_SPEED_ONE = a.getInteger(attr,7);//默认是7
                    break;
                case R.styleable.DoubleWaveView_speedTwo:
                    TRANSLATE_X_SPEED_TWO = a.getInteger(attr,5);//默认是5
                    break;
                case R.styleable.DoubleWaveView_waveHeight:
                    WaveHeight = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics()));//默认100dp
                    break;
            }
        }
        a.recycle();

        // 将dp转化为px，用于控制不同分辨率上移动速度基本一致
        mXOffsetSpeedOne = DensityUtil.dip2px(context, TRANSLATE_X_SPEED_ONE);
        mXOffsetSpeedTwo = DensityUtil.dip2px(context, TRANSLATE_X_SPEED_TWO);

        // 初始绘制波纹的画笔
        mWavePaint = new Paint();
        // 去除画笔锯齿
        mWavePaint.setAntiAlias(true);
        // 设置风格为实线
        mWavePaint.setStyle(Paint.Style.FILL);
        // 设置画笔颜色
        mWavePaint.setColor(WAVE_PAINT_COLOR);
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    }

其中需要用到的密度转换工具类：

/** * @TODO<分辨率转换工具类> * @author 小嵩 * @date 2016-8-3 09:20:46 */
public class DensityUtil {
    /** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /** * 根据手机的分辨率从 px(像素) 的单位 转成为 dp */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

２.覆盖onDraw方法和onSizeChanged方法

3.在onSizeChanged方法中，获取控件的宽高，根据宽高计算正弦波纹周期以及对应的Y值：

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 记录下控件设置的宽高
        mTotalWidth = w;
        mTotalHeight = h;
        // 一维数组, 用于保存原始波纹的y值
        mYPositions = new float[mTotalWidth];

        // 将Sin函数周期定为view总宽度， ω = 2π/T
        mCycleFactorW = (float) (2 * Math.PI / mTotalWidth);

        // 根据view总宽度得出所有对应的y值,即计算出正弦图形对应位置
        for (int i = 0; i < mTotalWidth; i++) {
            mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y);
        }
    }

4.在onDraw方法中绘制双波纹图形，绘制方法是：
public void drawLine(float startX, float startY, float stopX, float stopY, Paint paint)，几个参数代表的含义应该都能看明白吧，分别是起点X、Y值，终点X、Y值，画笔对象。

　　其实就是在竖直方向一条一条直线地画，起点是从onSizeChanged中得到的正弦函数Y值的数组中得到的，而终点，就是控件底部的坐标。
画笔绘制过程如下图所示：

　　所以控件宽度的像素有多少，一个波纹图形需要调用多少次drawLine方法。

Step ４:　不断重绘双波纹图形，形成动态效果

在绘制完成整个静态图形的过程后，通过 postInvalidate()方法来通知系统更新UI ，其实就是相当于重新调用了onDraw方法，从而进行平移，实现动态的效果。相关代码如下。

网上的那些例子，绘制方案大都是每次平移都拷贝4次数组，造成很大的内存开销：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        ...
        //中间省略
        ...
        resetPositonY();//拷贝两个波浪正弦函数值的数组（每调用一次onDraw，都需要4次数组的拷贝）
for (int i = 0; i < mTotalWidth; i++) {

            // 减500只是为了控制波纹绘制的y的在屏幕的位置(高度)，大家可以改成一个变量，然后动态改变这个变量，从而形成波纹上升下降效果

            // 绘制第一条水波纹（竖直方向）
            canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - 500, i, mTotalHeight, mWavePaint);

            // 绘制第二条水波纹（竖直方向）
            canvas.drawLine(i, mTotalHeight - mResetTwoYPositions[i] - 500, i, mTotalHeight, mWavePaint);
        }
   }

private void resetPositonY() {//Copy数组
        // mXOneOffset代表当前第一条水波纹要移动的距离
        int yOneInterval = mYPositions.length - mXOneOffset;
        // 使用System.arraycopy方式重新填充第一条波纹的数据
        System.arraycopy(mYPositions, mXOneOffset, mResetOneYPositions, 0, yOneInterval);
        System.arraycopy(mYPositions, 0, mResetOneYPositions, yOneInterval, mXOneOffset);

        int yTwoInterval = mYPositions.length - mXTwoOffset;
        System.arraycopy(mYPositions, mXTwoOffset, mResetTwoYPositions, 0,
                yTwoInterval);
        System.arraycopy(mYPositions, 0, mResetTwoYPositions, yTwoInterval, mXTwoOffset);
    }

以上方法不推荐使用，太耗费内存了，实际使用的效果会很卡，所以这里我整理了一下，综合别人的处理方案做了优化：

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //从canvas层面去除绘制时的锯齿
        canvas.setDrawFilter(mDrawFilter);
        for(int i=0,j=0,k=0;i<mTotalWidth;i++){

            if(i+mXOneOffset<mTotalWidth){//第一条波纹图形绘制
                canvas.drawLine(i,mTotalHeight-mYPositions[mXOneOffset+i]-WaveHeight,i,mTotalHeight,mWavePaint);
            }else {//大于周期值，则设置为j(与相位相关，已移动的X距离，最大值为一个周期，即控件的宽度)
                canvas.drawLine(i,mTotalHeight-mYPositions[j]-WaveHeight,i,mTotalHeight,mWavePaint);
                j++;
            }

            if(i+mXTwoOffset<mTotalWidth){//第二条波纹图形绘制
                canvas.drawLine(i,mTotalHeight-mYPositions[mXTwoOffset+i]-WaveHeight,i,mTotalHeight,mWavePaint);
            }else {//大于周期值，则设置为k(与相位相关，已移动的X距离)
                canvas.drawLine(i,mTotalHeight-mYPositions[k]-WaveHeight,i,mTotalHeight,mWavePaint);
                k++;
            }

        }

        // 改变两条波纹的移动点
        mXOneOffset += mXOffsetSpeedOne;
        mXTwoOffset += mXOffsetSpeedTwo;

        // 如果已经移动到结尾处，则重头记录
        if (mXOneOffset >= mTotalWidth) {
            mXOneOffset = 0;
        }
        if (mXTwoOffset > mTotalWidth) {
            mXTwoOffset = 0;
        }

        // 引发view重绘，可以考虑延迟10-30ms重绘，空出时间绘制
        if (isAnim){
            new Thread(mRunnable).start();
        }
    }

    private Runnable mRunnable = new Runnable() {

        @Override
        public void run() {
            {
                try {
                    //界面更新的频率,每20ms更新一次界面
                    Thread.sleep(20);
                    //通知系统更新界面,相当于调用了onDraw函数
                    postInvalidate();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    };

另外我还完善了动画效果的启动和暂停设置，有兴趣可下载sample demo查看完整代码 。

GitHub 地址 ：DoubleWave 双波纹自定义View