Android 带进度的圆形进度条

最近项目有个需求，做带进度从下到上的圆形进度条。

网上查了一下资料，发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163

由于项目不能用XML文件，修改了一下，觉得还可以，先看一下效果吧。

我们可以自定义圆环的颜色，圆环进度的颜色，是否显示进度的百分比，进度百分比的颜色，以及进度是实心还是空心等等。

下面是自定义的view代码：

package com.circle.progress;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class RoundProgressBar extends View {
    /**
     * 画笔对象的引用
     */
    private Paint paint;

    /**
     * 圆环的颜色
     */
    private int roundColor;

    /**
     * 圆环进度的颜色
     */
    private int roundProgressColor;

    /**
     * 中间进度百分比的字符串的颜色
     */
    private int textColor;

    /**
     * 中间进度百分比的字符串的字体
     */
    private float textSize;

    /**
     * 圆环的宽度
     */
    private float roundWidth;

    /**
     * 最大进度
     */
    private int max;

    /**
     * 当前进度
     */
    private int progress;
    /**
     * 是否显示中间的进度
     */
    private boolean textIsDisplayable;

    /**
     * 进度的风格，实心或者空心
     */
    private int style;

    public static final int STROKE = 0;
    public static final int FILL = 1;
    /**
     * 进度的风格，实心从下到上
     */
    public static final int FILL_UP = 2;

    public RoundProgressBar(Context context) {
        this(context, null);
    }

    public RoundProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        paint = new Paint();
        roundColor = 0xfffdba14;
        roundProgressColor = 0xfffc8b0d;
        textColor = 0xff00ff00;
        textSize = 15;
        roundWidth = 5;
        max = 100;
        textIsDisplayable = true;
        style = 0;
    }

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

        /**
         * 画最外层的大圆环
         */
        int centre = getWidth() / 2; // 获取圆心的x坐标
        int radius = (int) (centre - roundWidth / 2); // 圆环的半径
        paint.setColor(roundColor); // 设置圆环的颜色
        if (style == FILL_UP) {
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
        } else {
            paint.setStyle(Paint.Style.STROKE); // 设置空心
        }

        paint.setStrokeWidth(roundWidth); // 设置圆环的宽度
        paint.setAntiAlias(true); // 消除锯齿
        canvas.drawCircle(centre, centre, radius, paint); // 画出圆环

        Log.e("log", centre + "");

        /**
         * 画圆弧 ，画圆环的进度
         */

        // 设置进度是实心还是空心
        paint.setStrokeWidth(roundWidth); // 设置圆环的宽度
        paint.setColor(roundProgressColor); // 设置进度的颜色
        RectF oval = new RectF(centre - radius, centre - radius, centre
                + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限

        switch (style) {
        case STROKE:
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawArc(oval, 0, 360 * progress / max, false, paint); // 根据进度画圆弧
            break;
        case FILL:
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
            if (progress != 0) {
                canvas.drawArc(oval, 0, 360 * progress / max, true, paint); // 根据进度画圆弧
            }
            break;
        case FILL_UP:
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
            if (progress != 0) {
                int angle = 360 * progress / max;
                if (angle / 2 < 90) {
                    angle = Math.abs(90 - angle / 2);
                } else {
                    angle = 360 - Math.abs(90 - angle / 2);
                }
                canvas.drawArc(oval, angle, 360 * progress / max, false, paint);
            }
            break;
        }

        /**
         * 画进度百分比
         */
        paint.setStrokeWidth(0);
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD); // 设置字体
        int percent = (int) (((float) progress / (float) max) * 100); // 中间的进度百分比，先转换成float在进行除法运算，不然都为0
        float textWidth = paint.measureText(percent + "%"); // 测量字体宽度，我们需要根据字体的宽度设置在圆环中间

        if (textIsDisplayable && percent != 0 ) {
            canvas.drawText(percent + "%", centre - textWidth / 2, centre
                    + textSize / 2, paint); // 画出进度百分比
        }

    }

    public synchronized int getMax() {
        return max;
    }

    /**
     * 设置进度的最大值
     *
     * @param max
     */
    public synchronized void setMax(int max) {
        if (max < 0) {
            throw new IllegalArgumentException("max not less than 0");
        }
        this.max = max;
    }

    /**
     * 获取进度.需要同步
     *
     * @return
     */
    public synchronized int getProgress() {
        return progress;
    }

    /**
     * 设置进度，此为线程安全控件，由于考虑多线的问题，需要同步 刷新界面调用postInvalidate()能在非UI线程刷新
     *
     * @param progress
     */
    public synchronized void setProgress(int progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("progress not less than 0");
        }
        if (progress > max) {
            progress = max;
        }
        if (progress <= max) {
            this.progress = progress;
            postInvalidate();
        }

    }

    public int getCircleColor() {
        return roundColor;
    }

    /**
     * 设置圆环的颜色
     */
    public void setCircleColor(int circleColor) {
        this.roundColor = circleColor;
    }

    public int getCircleProgressColor() {
        return roundProgressColor;
    }

    /**
     * 设置圆环进度的颜色
     */
    public void setCircleProgressColor(int circleProgressColor) {
        this.roundProgressColor = circleProgressColor;
    }

    public int getTextColor() {
        return textColor;
    }

    /**
     * 设置中间进度百分比的字符串的颜色
     */
    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    public float getTextSize() {
        return textSize;
    }

    /**
     * 设置中间进度百分比的字符串的字体大小
     */
    public void setTextSize(float textSize) {
        this.textSize = textSize;
    }

    public float getRoundWidth() {
        return roundWidth;
    }

    /**
     * 设置圆环的宽度
     */
    public void setRoundWidth(float roundWidth) {
        this.roundWidth = roundWidth;
    }

    /**
     * 设置是否显示数字百分比
     *
     * @param flag
     */
    public void setTextIsDisplayable(boolean flag) {
        textIsDisplayable = flag;
    }

    /**
     * 设置进度风格
     * 0空心，1实心，2实心从下到上
     * @param style
     */
    public void setStyle(int style) {
        this.style = style;
    }

}

下面是调用view的代码：

package com.circle.progress;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;

public class CircleProgressTestActivity extends Activity {
    private RoundProgressBar roundProgressBar;
    private RoundProgressBar roundProgressBar2;
    private RoundProgressBar roundProgressBar3;
    private RoundProgressBar roundProgressBar4;
    private RoundProgressBar roundProgressBar5;
    private RoundProgressBar roundProgressBar6;
    private RoundProgressBar roundProgressBar7;
    private int progress = 0;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout parent = new LinearLayout(this);
        parent.setOrientation(LinearLayout.VERTICAL);
        parent.setBackgroundColor(0xffffffff);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(-2, -2);
        Button button = new Button(this);
        button.setText("开始圆形进度");
        parent.addView(button, lp);

        LinearLayout roundLayout = new LinearLayout(this);
        roundLayout.setOrientation(LinearLayout.HORIZONTAL);
        lp = new LinearLayout.LayoutParams(-2, -2);
        parent.addView(roundLayout, lp);
        roundProgressBar = new RoundProgressBar(this);
        roundProgressBar.setStyle(RoundProgressBar.FILL_UP);//设置进度风格 0空心，1实心，2实心从下到上
        roundProgressBar.setTextColor(0xffffffff);//设置中间进度百分比的字符串的颜色
        lp = new LinearLayout.LayoutParams(80, 80);
        lp.setMargins(5, 5, 5, 5);
        roundLayout.addView(roundProgressBar, lp);

        roundProgressBar2 = new RoundProgressBar(this);
        lp = new LinearLayout.LayoutParams(80, 80);
        lp.setMargins(5, 5, 5, 5);
        roundLayout.addView(roundProgressBar2, lp);

        roundProgressBar3 = new RoundProgressBar(this);
        roundProgressBar3.setCircleColor(0xffD1D1D1);//设置圆环的颜色
        roundProgressBar3.setCircleProgressColor(0xff000000);//设置圆环进度的颜色
        roundProgressBar3.setTextColor(0xff9A32CD);//设置中间进度百分比的字符串的颜色
        roundProgressBar3.setRoundWidth(10);//设置圆环的宽度
        roundProgressBar3.setTextSize(18);//设置中间进度百分比的字符串的字体大小
        lp = new LinearLayout.LayoutParams(80, 80);
        lp.setMargins(5, 5, 5, 5);
        roundLayout.addView(roundProgressBar3, lp);

        LinearLayout roundLayout2 = new LinearLayout(this);
        roundLayout2.setOrientation(LinearLayout.HORIZONTAL);
        lp = new LinearLayout.LayoutParams(-2, -2);
        parent.addView(roundLayout2, lp);

        roundProgressBar4 = new RoundProgressBar(this);
        roundProgressBar4.setCircleColor(0xffC6E2FF);
        roundProgressBar4.setCircleProgressColor(0xffCD3333);
        roundProgressBar4.setRoundWidth(10);
        roundProgressBar4.setTextIsDisplayable(false);//设置是否显示数字百分比
        lp = new LinearLayout.LayoutParams(80, 80);
        lp.setMargins(5, 5, 5, 5);
        roundLayout2.addView(roundProgressBar4, lp);

        roundProgressBar5 = new RoundProgressBar(this);
        roundProgressBar5.setStyle(RoundProgressBar.FILL);
        roundProgressBar5.setCircleProgressColor(0xffC2C2C2);
        roundProgressBar5.setRoundWidth(1);
        roundProgressBar5.setCircleColor(0xffff0000);
        roundProgressBar5.setTextIsDisplayable(false);
        lp = new LinearLayout.LayoutParams(80, 80);
        lp.setMargins(5, 5, 5, 5);
        roundLayout2.addView(roundProgressBar5, lp);

        roundProgressBar6 = new RoundProgressBar(this);
        roundProgressBar6.setStyle(RoundProgressBar.FILL);
        roundProgressBar6.setCircleProgressColor(0xffC2C2C2);
        roundProgressBar6.setRoundWidth(1);
        roundProgressBar6.setCircleColor(0xffff0000);
        lp = new LinearLayout.LayoutParams(80, 80);
        lp.setMargins(5, 5, 5, 5);
        roundLayout2.addView(roundProgressBar6, lp);

        roundProgressBar7 = new RoundProgressBar(this);
        lp = new LinearLayout.LayoutParams(50, 50);
        lp.setMargins(5, 5, 5, 5);
        roundLayout2.addView(roundProgressBar7, lp);

        lp = new LinearLayout.LayoutParams(-1, -1);
        setContentView(parent, lp);
        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {

                    @Override
                    public void run() {
                        while(progress <= 100){
                            progress += 3;

                            System.out.println(progress);
                            roundProgressBar.setProgress(progress);
                            roundProgressBar2.setProgress(progress);
                            roundProgressBar3.setProgress(progress);
                            roundProgressBar4.setProgress(progress);
                            roundProgressBar5.setProgress(progress);
                            roundProgressBar6.setProgress(progress);
                            roundProgressBar7.setProgress(progress);

                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }

                    }
                }).start();
            }
        });
    }
}

项目代码下载：http://download.csdn.net/detail/yclmy/8048173