android自定义圆形进度条

在很多情况下，圆形进度条让我们看起来比较美观、简洁，但Android的控件并没有提供这样的View，所以这需要我们自定义，以下就是我自己实现的View，请大神们多多指教哈。现在我们先来看几张效果图，懒得去做动态图了，见谅啊：


       

 
     


用户可以自定义文字、图标，背景颜色，字体颜色等，废话不多说，现在我们来了解下是怎么实现的。

        其实也很简单，主要分为三个部分，第一部分绘制圆形实心背景，第二部绘制外部圆形进度条，第三部绘制中间文字或者图标。首先我们自定一个RoundProgressView继承View，然后在onDraw实现绘制：

float paddingLeft = getPaddingLeft();

        float paddingRight = getPaddingRight();

        float paddingTop = getPaddingTop();

        float paddingBottom = getPaddingBottom();

        //draw the background

        float left = paddingLeft + mBorderWidth;

        float top = paddingTop + mBorderWidth;

        float right = getWidth() - paddingRight - mBorderWidth;

        float bottom = getHeight() - paddingBottom - mBorderWidth;

        RectF oval = new RectF(left, top, right, bottom);

        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mPaint.setColor(mBackgroundColor);

        mPaint.setStrokeWidth(0);

        canvas.drawArc(oval, 0, 360, true, mPaint);

绘制圆形实心背景，其中，oval是该圆形所在的矩形， mPaint需要设置style，值为FILL_AND_STROKE，表示填充内部和画边，Canvas为我们提供了方法drawArc绘制圆弧，这里我们是绘制0-360度，全部绘制成背景。

    //draw the progress

            left = paddingLeft + mBorderWidth / 2;

            top = paddingTop + mBorderWidth / 2;

            right = getWidth() - paddingRight - mBorderWidth / 2;

            bottom = getHeight() - paddingBottom - mBorderWidth / 2;

            oval = new RectF(left, top, right, bottom);

            mPaint.setStyle(Paint.Style.STROKE);

            mPaint.setStrokeWidth(mBorderWidth);

            mPaint.setColor(mBorderColor);

            canvas.drawArc(oval, -90, mCurrentAngle, false, mPaint);

接下来绘制外层的进度圆弧，不同的地方mPaint的style设置成STROKE，画边。还有需要说明的是我们是-90度开始的，表明从最顶部开始绘制。

背景和圆弧进度绘制完后，我们就可以在正中间绘制文本或者图片(bitmap)，实现如下：

    //draw text
    mPaint.setColor(mTextColor);

            mPaint.setTextSize(mTextSize);

            mPaint.setStrokeWidth(0);

            mPaint.setTextAlign(Paint.Align.CENTER);

            //get font info by paint

            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();

            // calculate font height

            float fontHeight = fontMetrics.bottom - fontMetrics.top;

            // calculate font baseline

            float textBaseY = getHeight() / 2 + fontHeight / 2 -fontMetrics.bottom;

            canvas.drawText(value, getWidth() / 2, textBaseY, mPaint);

   //draw bitmap

            if (null == mMatrix) {

                mMatrix = new Matrix();

                //scale

                mMatrix.postScale(mBitmapScale, mBitmapScale);

                float dx = (getWidth() * (1 - mBitmapScale)) / 2.0f;

                float dy = (getHeight() * (1 - mBitmapScale)) / 2.0f;

                mMatrix.postTranslate(dx, dy);

            }

            canvas.drawBitmap(mBitmap, mMatrix, mPaint);

绘制文本的难点在于居中绘制，有的人还不知道textBaseY是怎么算的，这里给大家介绍一篇博文：Android Canvas drawText实现中文垂直居中

绘制图片的难点在于计算大小，我这里是根据View的比例来的，也就是mBitmapScale这个参数，默认我取2／5，用户可以自定义。

使用方法（库）我放在github上：https://github.com/linqssonny/RoundProgressView