Android 画波纹进度条

public class MyLineView extends View {

    private Paint mPaint, mPaint2;
    private Path mPath = new Path();
    protected int mViewWidth, mViewHeight;
    protected int mWidth, mHeight;
    private float r, rArc, x;
    private float percent = 0.5f;
    private RectF rectF;
    private PointF mPointF = new PointF(0, 0);

    public MyLineView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(100);

        mPaint2 = new Paint();
        mPaint2.setColor(Color.CYAN);
        mPaint2.setStrokeWidth(8);
        mPaint2.setStyle(Paint.Style.FILL);
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mViewWidth = w;
        mViewHeight = h;

        mWidth = mViewWidth - getPaddingLeft() - getPaddingRight();
        mHeight = mViewHeight - getPaddingTop() - getPaddingBottom();

        r = Math.min(mWidth, mHeight) * 0.4f;

        rectF = new RectF(-r, -r, r, r);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.translate(mViewWidth / 2, mViewHeight / 2);

        canvas.drawCircle(0, 0, r, mPaint);

        rArc = r * (1 - 2 * percent);//percent 0-1 

        double angle = Math.acos((double) rArc / r);

        x = r * (float) Math.sin(angle);

        mPath.addArc(rectF, 90 - (float) Math.toDegrees(angle),
                (float) Math.toDegrees(angle) * 2);


        mPath.moveTo(-x, rArc);

        mPath.rQuadTo(x / 2, -r / 8, x, 0);

        mPath.rQuadTo(x / 2, r / 8, x, 0);

        canvas.drawPath(mPath, mPaint2);

        mPath.rewind();


        /**
         * 画文字
         */
        NumberFormat numberFormat = NumberFormat.getPercentInstance();
        numberFormat.setMinimumFractionDigits(1);
        textCenter(new String[] { numberFormat.format(percent) }, mPaint,
                canvas, mPointF, Paint.Align.CENTER);
    }


Path.rQuadTo 和Path.quadTo区别类似于scrollBy和scrollTo
![这里写图片描述](http://img.blog.youkuaiyun.com/20160726104409493)
官方的解释这样的，第一、二个值是X、Y方向的控制点，最后两个值是终点坐标。
我这里先将Path移动到(-x,rArc），再对Path做了两次位移，第一次X移动距离的x/2，所以会到达x方向值-x/2，第二次又移动x/2.

    protected void textCenter(String[] strings, Paint paint, Canvas canvas,
            PointF point, Paint.Align align) {
        paint.setTextAlign(align);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float top = fontMetrics.top;
        float bottom = fontMetrics.bottom;
        int length = strings.length;
        float total = (length - 1) * (-top + bottom)
                + (-fontMetrics.ascent + fontMetrics.descent);
        float offset = total / 2 - bottom;
        for (int i = 0; i < length; i++) {
            float yAxis = -(length - i - 1) * (-top + bottom) + offset;
            canvas.drawText(strings[i], point.x, point.y + yAxis, paint);
        }
    }

    public void setProgress(float percent) {
    //percent是从0到1；
        if (percent != 0) {
            this.percent = percent;
        } else {
            this.percent = 0;
        }
        invalidate();
    }

}

当percent小于0.5的时候需要知道角度b的值，可以的到角度a的值，角度b=90-角度a。

当percent大于0.5的时候，需要知道角度C的值，Math.acos((double) rArc / r);得到的是角度d的值，当acos里面为负数的时候，得到是角度e的补角，即角度d，大于90度，所以90-angle这个时候会是负数，刚好符合我们的需求。arccos(-x)=π-arccosx

    mPath.rQuadTo(x / 2, -r / 8, x, 0);
    mPath.rQuadTo(x / 2, r / 8, x, 0);
   关于这两句话的理解，首先我已经将path移动到（-x，rArc）这个点，这个时候就它为原点了，然后有两个控制点（x/2、-r/8）和（x,0）这个就相当于上图左半边的效果。

最终效果图如下

下载地址

欢迎大家支出缺点，谢谢