一起Talk Android吧（第五百二十回：如何实现波浪球进度条)

各位看官们大家好，上一回中咱们说的例子是"波浪上升动画",这一回中咱们说的例子是"波浪球进度条"。闲话休提，言归正转， 让我们一起Talk Android吧！

概念介绍

我们在本章回中说的波浪球进度条是指一个空的圆球，里面使用波浪进行填充，随着进度的变化波浪不断地填充满圆球，同时在圆球中央使用数字来显示进度值。下面是具体的效果图，比文字更加形象：

整体思路

我们介绍完概念后接着介绍波浪进度条的实现思路。画一个圆球，中央添加显示进度的文字，填充圆球使用的波浪动画实现，波浪从圆球下方不断地向上移动，表示进度在不断的变化，进度完成后圆球被波浪填充满。

画圆球有专门的绘制方法，我们在前面章回中介绍过，文字使用TextView控件实现，注意它的位置位于圆球中央。波浪通过正弦波或者使用贝塞尔曲线实现，在结合值动画让曲线移动起来就实现了波浪的效果。值动画中的步进值就是曲线移动的偏移值，动画不断进行，该值也在不断地变化，曲
线在不断地偏移，进而达到波浪效果。

曲线的移动是在水平方向进行的，把曲线在垂直方向也进行移动就达到了波浪上升的效果，因为波浪在圆球中，因此表现为波浪在不断地填充圆球的剩余空间。关于曲线移动和上升的更多细节可以参看"波浪动画"和"波浪上升动画"这两个章回的内容(前面刚刚介绍过)。本章回的内容可以看作是这两个章回内容的综合使用。

注意:圆球和波浪都使用路径来绘制，并且通过路径剪切操作只保留圆球内的波浪。不然波浪和圆球是分开的，无法达到整体的效果。

以上所有的内容都按照自定义view的思路进行，具体来讲是直接继承View来实现，因为没有可用的系统控件被继承。

实现方法

1. 自定义一个名叫WaveProgress的类，该类继承自View;
2. 重写该类的测量（onMeasure)方法，这里不展开详细介绍，可以参考前面章回中的介绍；
3. 重写该类的绘制方法(onDraw),在该方法内绘制圆球，文字和波浪；

示例代码

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //这个是真正的画圆球，path中的圆只是用来剪切路径
        canvas.drawCircle(width/2,height/2,width/2,mCirclePaint);

        //矩形时不存在波浪在窗口外的现象，圆形时会存在，如何删除掉圆形外的波形？使用paint的这种方法无法达到效果
        Path path = new Path();
        path.addCircle(width/2,height/2,width/2, Path.Direction.CCW);
        Path path1 = getPath();
        path.op(path1, Path.Op.INTERSECT);
        mWavePaint.setColor(Color.RED);
        canvas.drawPath(path,mWavePaint);
        drawText(canvas,baseLine);
    }

        private void drawText(Canvas canvas, int progress) {
        String str = String.valueOf(progress)+" %";
        Rect textBoundRect = new Rect();
        mTextPaint.getTextBounds(str,0,str.length(),textBoundRect);
        canvas.drawText(str,width/2-textBoundRect.width()/2,height/2+textBoundRect.height()/2,mTextPaint);
    }

上面的代码中只列出了绘制方法的代码，测量方法的代码没有列出，还有就是波浪和颜色和大小也是固定的，大家可以做成自定义属性，这样方便控制控件的各种属性值。

看官们，关于"波浪球进度条"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！