###序言：最近一段時間由于要忙學校畢業的事情和公司項目的事情，很久沒有更新博客了，這兩天項目中有個需要用到圓形進度條的地方，想著這段時間正在學習自定義View以及屬性動畫的知識，然后剛好用這個來練練手，無圖無真相，直接看圖：


簡單自定義了一個比較通用的圓形進度條，像上圖所示的可以定義圓的半徑，進度顏色，寬度，中間字體等信息。下面我就一步一步來為大家講解：
>####1、首先我們先要找出有哪些屬性需要自定義的，進度條顏色、進度顏色、整個進度條的半徑、進度的寬度、進度條內文字顏色及大小、最大進度、當前進度，后來我加了一個方向的屬性，方向表示進度從哪里開始（默認有四個方向，上左下右），確定好之后我們就在attrs中定義出來：

<declare-styleable name="CustomCircleProgressBar">
        <attr name="outside_color" format="color" />
        <attr name="outside_radius" format="dimension" />
        <attr name="inside_color" format="color" />
        <attr name="progress_text_color" format="color" />
        <attr name="progress_text_size" format="dimension" />
        <attr name="progress_width" format="dimension" />
        <attr name="max_progress" format="integer" />
        <attr name="progress" format="float" />
        <attr name="direction">
            <enum name="left" value="0" />
            <enum name="top" value="1" />
            <enum name="right" value="2" />
            <enum name="bottom" value="3" />
        </attr>
    </declare-styleable>
>####2、然后在自定義**View**的構造方法中獲取一下這些值：

public CustomCircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCircleProgressBar, defStyleAttr, 0);
        outsideColor = a.getColor(R.styleable.CustomCircleProgressBar_outside_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
        outsideRadius = a.getDimension(R.styleable.CustomCircleProgressBar_outside_radius, DimenUtil.dp2px(getContext(), 60.0f));
        insideColor = a.getColor(R.styleable.CustomCircleProgressBar_inside_color, ContextCompat.getColor(getContext(), R.color.inside_color));
        progressTextColor = a.getColor(R.styleable.CustomCircleProgressBar_progress_text_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
        progressTextSize = a.getDimension(R.styleable.CustomCircleProgressBar_progress_text_size, DimenUtil.dp2px(getContext(), 14.0f));
        progressWidth = a.getDimension(R.styleable.CustomCircleProgressBar_progress_width, DimenUtil.dp2px(getContext(), 10.0f));
        progress = a.getFloat(R.styleable.CustomCircleProgressBar_progress, 50.0f);
        maxProgress = a.getInt(R.styleable.CustomCircleProgressBar_max_progress, 100);
        direction = a.getInt(R.styleable.CustomCircleProgressBar_direction, 3);

        a.recycle();

        paint = new Paint();
    }
>####3、接下來我們要重寫onMeasure方法，讓其可以自適應你的設置：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width;
        int height;
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);

        if (mode == MeasureSpec.EXACTLY) {
            width = size;
        } else {
            width = (int) ((2 * outsideRadius) progressWidth);
        }
        size = MeasureSpec.getSize(heightMeasureSpec);
        mode = MeasureSpec.getMode(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            height = size;
        } else {
            height = (int) ((2 * outsideRadius) progressWidth);
        }
        setMeasuredDimension(width, height);
    }
>####4、這兩塊就不多說了，相信大多數看官應該都知道，接下來我們來分析要畫些什么？怎么畫？首先肯定是畫最底層的那個圓環了，給畫筆設置空心屬性，然后設置線的寬度，就可以畫一個圓環了：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int circlePoint = getWidth() / 2;
        //第一步:畫背景(即內層圓)
        paint.setColor(insideColor); //設置圓的顏色
        paint.setStyle(STROKE); //設置空心
        paint.setStrokeWidth(progressWidth); //設置圓的寬度
        paint.setAntiAlias(true);  //消除鋸齒
        canvas.drawCircle(circlePoint, circlePoint, outsideRadius, paint); //畫出圓

    }

>####5、然后我們接著畫外面的進度，外面進度就是一段弧，根據我們獲取的進度和總進度來畫這段弧，畫弧需要用到`canvas.drawArc()`這個方法，這個方法有兩個重載方法：
`drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)`
`drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle,boolean useCenter,Paint paint)`
其實，可以看作是一個方法，因為`RectF`這個東西呢就是由`left top right bottom`構成的，那`RectF`這玩意兒到底什么東西呢，我也不知道，那就去看源碼唄：

RectF holds four float coordinates for a rectangle.
The rectangle isrepresented by the coordinates of its 4 edges (left, top, right bottom).
These fields can be accessed directly. 
Use width() and height() to retrieve the rectangle's width and height. 
Note: most methods do not check to see that the coordinates are sorted correctly (i.e. left <= right and top <= bottom).
>簡單點說，這東西可以構造一個矩形，左上右下就是矩形四條邊離`X Y`軸的距離（這里分正負，圓點下邊和圓點右邊為正），詳細可以看下面這個圖，以圓心（屏幕的中心）構造一個矩形，矩形的左上右下邊距離`X Y`軸的距離就是我們所需要的`left top right bottom`值了：


寫法一：
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius);  //用于定義的圓弧的形狀和大小的界限
寫法二：
RectF oval = new RectF();
oval.left=circlePoint - outsideRadius;
    oval.top=circlePoint - outsideRadius;
    oval.right=circlePoint outsideRadius;
    oval.bottom=circlePoint outsideRadius;
>然后`drawArc()`方法中的第二（五）個參數`startAngle`表示我們畫弧度開始的角度，這里的值為**0-360**，**0**表示三點鐘方向，**90**表示六點鐘方向，以此類推；后面那個參數`sweepAngle`表示要畫多少弧度，這里的取值也是從**0-360**，我們通常使用當前進度占總進度的百分之多少，再乘以弧度**360**就是我們所要畫的弧度了；再后面那個參數`useCenter`表示是否連接圓心一起畫，下面來看看代碼：

//第二步:畫進度(圓弧)不連接圓心
    paint.setColor(outsideColor);  //設置進度的顏色
    RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius);  //用于定義的圓弧的形狀和大小的界限
    canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), false, paint);  //根據進度畫圓弧

    
    //第二步:畫進度(圓弧)連接圓心
    paint.setColor(outsideColor);  //設置進度的顏色
    RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius);  //用于定義的圓弧的形狀和大小的界限
    canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), true, paint);  //根據進度畫圓弧
>6、接下來就是畫圓環內的百分比文字了，可能有的人就說，畫文字嘛，那不是很簡單，直接`drawText`方法畫不就好了，要什么值就傳什么唄！大兄弟別急撒，下面給大家看看直接畫文字的效果：

paint.setColor(progressTextColor);
    paint.setTextSize(progressTextSize);
    paint.setStrokeWidth(0);
    progressText = (int) ((progress / maxProgress) * 100) "%";
    canvas.drawText(progressText, circlePoint , circlePoint, paint);
>**WTF**，發生了什么？？？所以說大兄弟，憋著急，這里`drawText`方法是從文字的左上角開始畫的，所以我們需要剪去文字一半的寬高：

rect = new Rect();
    paint.getTextBounds(progressText, 0, progressText.length(), rect);
    canvas.drawText(progressText, circlePoint- rect.width() / 2 , circlePoint- rect.height() / 2, paint);
>再次**WTF**，可能又有人說，LZ你騙人，它還是沒有居中，這尼瑪心中頓時有一萬只草泥馬在奔騰，別急，還沒講完，給你看看源碼你就知道了：

/**
     * Draw the text, with origin at (x,y), using the specified paint. The
     * origin is interpreted based on the Align setting in the paint.
     *
     * @param text  The text to be drawn
     * @param x     The x-coordinate of the origin of the text being drawn
     * @param y     The y-coordinate of the baseline of the text being drawn
     * @param paint The paint used for the text (e.g. color, size, style)
     */
    public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
        native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags,
                paint.getNativeInstance(), paint.mNativeTypeface);
    }
>不知道各位有沒有看到第三個參數`y`的解釋，它不是縱軸的坐標，而是基準線`y`坐標，至于這個基準線，LZ不打算在這里展開講，因為這個也有很多內容，給大家推薦一篇講的非常詳細的博客：
[自定義控件之繪圖篇（ 五）：drawText()詳解](http://blog.csdn.net/harvic880925/article/details/50423762)
接下來來看看咱是怎么寫的：

//第三步:畫圓環內百分比文字
    rect = new Rect();
    paint.setColor(progressTextColor);
    paint.setTextSize(progressTextSize);
    paint.setStrokeWidth(0);
    progressText = getProgressText();
    paint.getTextBounds(progressText, 0, progressText.length(), rect);
    Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
    int baseline = (getMeasuredHeight() - fontMetrics.bottom fontMetrics.top) / 2 - fontMetrics.top;  //獲得文字的基準線
    canvas.drawText(progressText, getMeasuredWidth() / 2 - rect.width() / 2, baseline, paint);
>再來看看最終的效果：


好了，現在進度和文字都畫出來了，個人覺得就這樣直接展示在用戶眼前顯得有點生硬，有沒有什么辦法讓它的進度從零開始跑動畫到我們要設置的進度值呢，答案是肯定的咯，這里我們可以用屬性動畫來實現，前面幾篇博客我們有講到屬性動畫的知識，如果你還沒有看過的話，請移步：

####[Android自定義view之屬性動畫熟悉](http://www.jianshu.com/p/50d974db7bc5)

####[Android自定義view之屬性動畫初見](http://www.jianshu.com/p/0e10a6ed80dc)

這里我們使用的是`ValueAnimator`，通過監聽動畫改變進度的值來設置圓環的進度：

private void startAnim(float startProgress) {
        animator = ObjectAnimator.ofFloat(0, startProgress);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                CustomCircleProgressBar.this.progress = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.setStartDelay(500);   //設置延遲開始
        animator.setDuration(2000);
        animator.setInterpolator(new LinearInterpolator());   //動畫勻速
        animator.start();
    }
到此就完成了自定義的原型進度條了。源碼已上傳至[Github](https://github.com/Jakemesdg/CustomCircleProgressBar)，有需要的同學可以下載下來看看，歡迎**Star，Fork**
#####同時感謝以上引用到博客的主人，感謝！！！

###這是我建的一個android小白的群，歡迎各位有興趣的小白加群共同學習，知無不言；也歡迎各位大神進群指導，共勉。群號：541144061