Android如何自定义View实现横向的双水波纹进度条

思路分析

整体效果可分为三个，绘制圆角背景和圆角矩形，绘制第一条和第二条水波浪，根据自定义进度变化效果。

功能实现

1.绘制圆角背景和圆角矩形边框

圆角矩形边框：

private rectf rectborder;
if (rectborder == null) {
    rectborder = new rectf(0.5f * dp1, 0.5f * dp1, waveactualsizewidth - 0.5f * dp1, waveactualsizeheight - 0.5f * dp1);
}
canvas.drawroundrect(rectborder, dp27, dp27, borderpaint);

我们创建一个新的画布，然后在画布里画上圆角矩形背景和第一条和第二条水波浪：

//这里用到了缓存 根据参数创建新位图
if (circlebitmap == null) {
    circlebitmap = bitmap.createbitmap(waveactualsizewidth, waveactualsizeheight, bitmap.config.argb_8888);
}
//以该bitmap为底创建一块画布
if (bitmapcanvas == null) {
    bitmapcanvas = new canvas(circlebitmap);
}
// 圆角矩形背景，为了能让波浪填充完整个圆形背景
if (rectbg == null) {
    rectbg = new rectf(0, 0, waveactualsizewidth, waveactualsizeheight);
}
bitmapcanvas.drawroundrect(rectbg, dp27, dp27, backgroundpaint);
//裁剪图片
canvas.drawbitmap(circlebitmap, 0, 0, null);

2.通过贝塞尔曲线实现双水波

1）实现第一条水波

/**
 * 绘制波浪线
 */
private path canvaswavepath() {
    //要先清掉路线
    wavepath.reset();
    //起始点移至(0,0) p0 -p1 的高度随着进度的变化而变化
    wavepath.moveto((currentpercent) * waveactualsizewidth, -movedistance);
    //最多能绘制多少个波浪
    //其实也可以用 i < getwidth() ;i+=wavelength来判断 这个没那么完美
    //绘制p0 - p1 绘制波浪线 这里有一段是超出view的，在view右边距的右边 所以是* 2
    for (int i = 0; i < wavenumber * 2; i++) {
        wavepath.rquadto(waveheight, wavelength / 2, 0, wavelength);
        wavepath.rquadto(-waveheight, wavelength / 2, 0, wavelength);
    }
    //连接p1 - p2
    wavepath.lineto(0, waveactualsizeheight);
    //连接p2 - p0
    wavepath.lineto(0, 0);
    //封闭起来填充
    wavepath.close();
    return wavepath;
}

movedistance为水波垂直方向移动的距离。

wavelength为水波长度，一个上弧加一个下弧为一个波长。

path的起始点为(0,0)可根据进度动态改变，然后循环画曲线，长度是有几个波浪就是多长，然后连接到view高度的位置，最后到(0，0)，形成一个封闭的区域，这样就实现了一个填充的水波效果。

2）绘制第二条水波，第二条水波和第一条类似，只是起始点变了：

/**
 * 绘制第二层波浪
 */
private path canvassecondpath() {
    secondwavepath.reset();
    //初始点移动到下方
    secondwavepath.moveto((currentpercent) * waveactualsizewidth, waveactualsizeheight + movedistance);
    for (int i = 0; i < wavenumber * 2; i++) {
        secondwavepath.rquadto(waveheight, -wavelength / 2, 0, -wavelength);
        secondwavepath.rquadto(-waveheight, -wavelength / 2, 0, -wavelength);
    }
    secondwavepath.lineto(0, 0);
    secondwavepath.lineto(0, waveactualsizeheight);
    secondwavepath.close();
    return secondwavepath;
}

3.设置动画使进度和水波纹变化

/**
 * 设置进度
 *
 * @param currentprogress 进度
 * @param duration        达到进度需要的时间
 */
public void setprogress(int currentprogress, long duration, animatorlisteneradapter listeneradapter) {
    float percent = currentprogress * 1f / maxprogress;
    this.currentprogress = currentprogress;
    //从0开始变化
    currentpercent = 0;
    movedistance = 0;
    mprogressanimator = valueanimator.offloat(0, percent);
    //设置动画时间
    mprogressanimator.setduration(duration);
    //让动画匀速播放，避免出现波浪平移停顿的现象
    mprogressanimator.setinterpolator(new linearinterpolator());
    mprogressanimator.addupdatelistener(listener);
    mprogressanimator.addlistener(listeneradapter);
    mprogressanimator.start();

    // 波浪线
    startwaveanimal();
}

/**
 * 波浪动画
 */
private void startwaveanimal() {
    //动画实例化
    if (waveprogressanimator == null) {
        waveprogressanimator = new waveprogressanimal();
        //设置动画时间
        waveprogressanimator.setduration(2000);
        //设置循环播放
        waveprogressanimator.setrepeatcount(animation.infinite);
        //让动画匀速播放，避免出现波浪平移停顿的现象
        waveprogressanimator.setinterpolator(new linearinterpolator());
        //当前视图开启动画
        this.startanimation(waveprogressanimator);
    }
}

其中波浪动画是通过改变movedistance的值改变纵坐标达到，进度主要是通过改变百分比currentpercent改变波浪的横坐标达到。