自定义View 加载之进度条加载

      在之前的电商APP中，要实现一个年化收益的效果图，废话不多说，先上个实际效果图来瞧瞧

     

      效果很简单有木有，但是对于初学者而言，有时候就不知道从哪里下手，所以这里我将带大家去思考并实现效果。

思考：在我们做任何的自定义View的效果之前，我们都需要在脑子里面有一个明确的思路，千万别走一步想一步，这样很容易导致最后效果实现不了。所以，最好的办法就是先把所有要实现的步骤罗列出来，然后一步一步的进行实现。那么，下面我们就来看看实现上面的效果有哪些步骤。

步骤分析：

// 1. 画固定部分 （背景弧线（实线）+ 背景虚线（虚线））
// 1.1 画实线
// 1.1.1 画外弧和内弧的区域
// 1.1.2 画外弧
// 1.1.3 画内线

// 2. 画动态实现和虚线
// 3. 画圆
// 4. 画文字
// 5. 动画

上面就是实现该效果的所有步骤，那么我们现在就一个一个的来实现：

1.画固定部分

  // 1. 画固定部分 （背景弧线（实线）+ 背景虚线（虚线））
        // 1.1 画实线
        // 1.1.1 画外弧和内弧的区域
        RectF rectF = new RectF(mArcDis, mArcDis, mScreenWidth - mArcDis, mScreenHeight - mArcDis);
        RectF imaginaryLineRectF = new RectF(mImaginaryArcDis, mImaginaryArcDis, mScreenWidth - mImaginaryArcDis,   mScreenHeight - mImaginaryArcDis);
        // 1.1.2 画外弧
        mFixationFullPaint.setColor(Color.GRAY);
        canvas.drawArc(rectF, 160, 220, false, mFixationFullPaint);
        // 1.1.3 画内线
        mFixationImaginaryPaint.setPathEffect(new DashPathEffect(new float[]{12,12}, 0));
        mFixationImaginaryPaint.setColor(Color.GRAY);
        canvas.drawArc(imaginaryLineRectF, 160, 220, false, mFixationImaginaryPaint);

2.画动态实线和虚线

   

  // 2. 画动态实现和虚线
        if (mAnnualReturnNumber > 0) { // 只有当大于0的时候才需要