Android：自定义View实现绚丽的圆形进度条

本博文包含两个组件，首先上效果图：

1.ProgressBarView1（支持拖动）：

2.ProgressBarView2（不同进度值显示不同颜色，不支持拖拽）：

    

代码不多，注释也比较详细，全部贴上了：

（一）ProgressBarView1:

/** * 自定义绚丽的ProgressBar. */public class ProgressBarView1 extends View {    /**     * 进度条所占用的角度     */    private static final int ARC_FULL_DEGREE = 300;    /**     * 弧线的宽度     */    private int STROKE_WIDTH;    /**     * 组件的宽，高     */    private int width, height;    /**     * 进度条最大值和当前进度值     */    private float max, progress;    /**     * 是否允许拖动进度条     */    private boolean draggingEnabled = false;    /**     * 绘制弧线的矩形区域     */    private RectF circleRectF;    /**     * 绘制弧线的画笔     */    private Paint progressPaint;    /**     * 绘制文字的画笔     */    private Paint textPaint;    /**     * 绘制当前进度值的画笔     */    private Paint thumbPaint;    /**     * 圆弧的半径     */    private int circleRadius;    /**     * 圆弧圆心位置     */    private int centerX, centerY;    public ProgressBarView1(Context context) {        super(context);        init();    }    public ProgressBarView1(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public ProgressBarView1(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init() {        progressPaint = new Paint();        progressPaint.setAntiAlias(true);        textPaint = new Paint();        textPaint.setColor(Color.WHITE);        textPaint.setAntiAlias(true);        thumbPaint = new Paint();        thumbPaint.setAntiAlias(true);        //使用自定义字体        textPaint.setTypeface(Typeface.createFromAsset(getContext().getAssets(), "fangz.ttf"));    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        if (width == 0 || height == 0) {            width = getWidth();            height = getHeight();            //计算圆弧半径和圆心点            circleRadius = Math.min(width, height) / 2;            STROKE_WIDTH = circleRadius / 12;            circleRadius -= STROKE_WIDTH;            centerX = width / 2;            centerY = height / 2;            //圆弧所在矩形区域            circleRectF = new RectF();            circleRectF.left = centerX - circleRadius;            circleRectF.top = centerY - circleRadius;            circleRectF.right = centerX + circleRadius;            circleRectF.bottom = centerY + circleRadius;        }    }    private Rect textBounds = new Rect();    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        float start = 90 + ((360 - ARC_FULL_DEGREE) >> 1); //进度条起始点        float sweep1 = ARC_FULL_DEGREE * (progress / max); //进度划过的角度        float sweep2 = ARC_FULL_DEGREE - sweep1; //剩余的角度        //绘制起始位置小圆形        progressPaint.setColor(Color.WHITE);        progressPaint.setStrokeWidth(0);        progressPaint.setStyle(Paint.Style.FILL);        float radians = (float) (((360.0f - ARC_FULL_DEGREE) / 2) / 180 * Math.PI);        float startX = centerX - circleRadius * (float) Math.sin(radians);        float startY = centerY + circleRadius * (float) Math.cos(radians);        canvas.drawCircle(startX, startY, STROKE_WIDTH / 2, progressPaint);        //绘制进度条        progressPaint.setStrokeWidth(STROKE_WIDTH);        progressPaint.setStyle(Paint.Style.STROKE);//设置空心        canvas.drawArc(circleRectF, start, sweep1, false, progressPaint);        //绘制进度条背景        progressPaint.setColor(Color.parseColor("#d64444"));        canvas.drawArc(circleRectF, start + sweep1, sweep2, false, progressPaint);        //绘制结束位置小圆形        progressPaint.setStrokeWidth(0);        progressPaint.setStyle(Paint.Style.FILL);        float endX = centerX + circleRadius * (float) Math.sin(radians);        float endY = centerY + circleRadius * (float) Math.cos(radians);        canvas.drawCircle(endX, endY, STROKE_WIDTH / 2, progressPaint);        //上一行文字        textPaint.setTextSize(circleRadius >> 1);        String text = (int) (100 * progress / max) + "";        float textLen = textPaint.measureText(text);        //计算文字高度        textPaint.getTextBounds("8", 0, 1, textBounds);        float h1 = textBounds.height();        //% 前面的数字水平居中，适当调整        float extra = text.startsWith("1") ? -textPaint.measureText("1") / 2 : 0;        canvas.drawText(text, centerX - textLen / 2 + extra, centerY - 30 + h1 / 2, textPaint);        //百分号        textPaint.setTextSize(circleRadius >> 2);        canvas.drawText("%", centerX + textLen / 2 + extra + 5, centerY - 30 + h1 / 2, textPaint);        //下一行文字        textPaint.setTextSize(circleRadius / 5);        text = "可用内存充足";        textLen = textPaint.measureText(text);        textPaint.getTextBounds(text, 0, text.length(), textBounds);        float h2 = textBounds.height();        canvas.drawText(text, centerX - textLen / 2, centerY + h1 / 2 + h2, textPaint);        //绘制进度位置，也可以直接替换成一张图片        float progressRadians = (float) (((360.0f - ARC_FULL_DEGREE) / 2 + sweep1) / 180 * Math.PI);        float thumbX = centerX - circleRadius * (float) Math.sin(progressRadians);        float thumbY = centerY + circleRadius * (float) Math.cos(progressRadians);        thumbPaint.setColor(Color.parseColor("#33d64444"));        canvas.drawCircle(thumbX, thumbY, STROKE_WIDTH * 2.0f, thumbPaint);        thumbPaint.setColor(Color.parseColor("#99d64444"));        canvas.drawCircle(thumbX, thumbY, STROKE_WIDTH * 1.4f, thumbPaint);        thumbPaint.setColor(Color.WHITE);        canvas.drawCircle(thumbX, thumbY, STROKE_WIDTH * 0.8f, thumbPaint);    }    private boolean isDragging = false;    @Override    public boolean onTouchEvent(@NonNull MotionEvent event) {        if (!draggingEnabled) {            return super.onTouchEvent(event);        }        //处理拖动事件        float currentX = event.getX();        float currentY = event.getY();        int action = event.getAction();        switch (action) {            case MotionEvent.ACTION_DOWN:                //判断是否在进度条thumb位置                if (checkOnArc(currentX, currentY)) {                    float newProgress = calDegreeByPosition(currentX, currentY) / ARC_FULL_DEGREE * max;                    setProgressSync(newProgress);                    isDragging = true;                }                break;            case MotionEvent.ACTION_MOVE:                if (isDragging) {                    //判断拖动时是否移出去了                    if (checkOnArc(currentX, currentY)) {                        setProgressSync(calDegreeByPosition(currentX, currentY) / ARC_FULL_DEGREE * max);                    } else {                        isDragging = false;                    }                }                break;            case MotionEvent.ACTION_UP:                isDragging = false;                break;        }        return true;    }    private float calDistance(float x1, float y1, float x2, float y2) {        return (float) Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));    }    /**     * 判断该点是否在弧线上（附近）     */    private boolean checkOnArc(float currentX, float currentY) {        float distance = calDistance(currentX, currentY, centerX, centerY);        float degree = calDegreeByPosition(currentX, currentY);        return distance > circleRadius - STROKE_WIDTH * 5 && distance < circleRadius + STROKE_WIDTH * 5                && (degree >= -8 && degree <= ARC_FULL_DEGREE + 8);    }    /**     * 根据当前位置，计算出进度条已经转过的角度。     */    private float calDegreeByPosition(float currentX, float currentY) {        float a1 = (float) (Math.atan(1.0f * (centerX - currentX) / (currentY - centerY)) / Math.PI * 180);        if (currentY < centerY) {            a1 += 180;        } else if (currentY > centerY && currentX > centerX) {            a1 += 360;        }        return a1 - (360 - ARC_FULL_DEGREE) / 2;    }    public void setMax(int max) {        this.max = max;        invalidate();    }    public void setProgress(float progress) {        final float validProgress = checkProgress(progress);        //动画切换进度值        new Thread(new Runnable() {            @Override            public void run() {                float oldProgress = ProgressBarView1.this.progress;                for (int i = 1; i <= 100; i++) {                    ProgressBarView1.this.progress = oldProgress + (validProgress - oldProgress) * (1.0f * i / 100);                    postInvalidate();                    SystemClock.sleep(20);                }            }        }).start();    }    public void setProgressSync(float progress) {        this.progress = checkProgress(progress);        invalidate();    }    //保证progress的值位于[0,max]    private float checkProgress(float progress) {        if (progress < 0) {            return 0;        }        return progress > max ? max : progress;    }    public void setDraggingEnabled(boolean draggingEnabled) {        this.draggingEnabled = draggingEnabled;    }}

（二）ProgressBarView2:

/** * 自定义绚丽的ProgressBar. */public class ProgressBarView2 extends View {    /**     * 进度条所占用的角度     */    private static final int ARC_FULL_DEGREE = 300;    //进度条个数    private static final int COUNT = 100;    //每个进度条所占用角度    private static final float ARC_EACH_PROGRESS = ARC_FULL_DEGREE * 1.0f / (COUNT - 1);    /**     * 弧线细线条的长度     */    private int ARC_LINE_LENGTH;    /**     * 弧线细线条的宽度     */    private int ARC_LINE_WIDTH;    /**     * 组件的宽，高     */    private int width, height;    /**     * 进度条最大值和当前进度值     */    private float max, progress;    /**     * 绘制弧线的画笔     */    private Paint progressPaint;    /**     * 绘制文字的画笔     */    private Paint textPaint;    /**     * 绘制文字背景圆形的画笔     */    private Paint textBgPaint;    /**     * 圆弧的半径     */    private int circleRadius;    /**     * 圆弧圆心位置     */    private int centerX, centerY;    public ProgressBarView2(Context context) {        super(context);        init();    }    public ProgressBarView2(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public ProgressBarView2(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init() {        progressPaint = new Paint();        progressPaint.setAntiAlias(true);        textPaint = new Paint();        textPaint.setColor(Color.WHITE);        textPaint.setAntiAlias(true);        textBgPaint = new Paint();        textBgPaint.setAntiAlias(true);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        if (width == 0 || height == 0) {            width = getWidth();            height = getHeight();            //计算圆弧半径和圆心点            circleRadius = Math.min(width, height) / 2;            ARC_LINE_LENGTH = circleRadius / 6;            ARC_LINE_WIDTH = ARC_LINE_LENGTH / 8;            centerX = width / 2;            centerY = height / 2;        }    }    private Rect textBounds = new Rect();    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        float start = (360 - ARC_FULL_DEGREE) >> 1; //进度条起始角度        float sweep1 = ARC_FULL_DEGREE * (progress / max); //进度划过的角度        //绘制进度条        progressPaint.setColor(Color.parseColor(calColor(progress / max, "#ffff0000", "#ff00ff00")));        progressPaint.setStrokeWidth(ARC_LINE_WIDTH);        float drawDegree = 1.6f;        while (drawDegree <= ARC_FULL_DEGREE) {            double a = (start + drawDegree) / 180 * Math.PI;            float lineStartX = centerX - circleRadius * (float) Math.sin(a);            float lineStartY = centerY + circleRadius * (float) Math.cos(a);            float lineStopX = lineStartX + ARC_LINE_LENGTH * (float) Math.sin(a);            float lineStopY = lineStartY - ARC_LINE_LENGTH * (float) Math.cos(a);            if (drawDegree > sweep1) {                //绘制进度条背景                progressPaint.setColor(Color.parseColor("#88aaaaaa"));                progressPaint.setStrokeWidth(ARC_LINE_WIDTH >> 1);            }            canvas.drawLine(lineStartX, lineStartY, lineStopX, lineStopY, progressPaint);            drawDegree += ARC_EACH_PROGRESS;        }        //绘制文字背景圆形        textBgPaint.setStyle(Paint.Style.FILL);//设置填充        textBgPaint.setColor(Color.parseColor("#41668b"));        canvas.drawCircle(centerX, centerY, (circleRadius - ARC_LINE_LENGTH) * 0.8f, textBgPaint);        textBgPaint.setStyle(Paint.Style.STROKE);//设置空心        textBgPaint.setStrokeWidth(2);        textBgPaint.setColor(Color.parseColor("#aaaaaaaa"));        canvas.drawCircle(centerX, centerY, (circleRadius - ARC_LINE_LENGTH) * 0.8f, textBgPaint);        //上一行文字        textPaint.setTextSize(circleRadius >> 1);        String text = (int) (100 * progress / max) + "";        float textLen = textPaint.measureText(text);        //计算文字高度        textPaint.getTextBounds("8", 0, 1, textBounds);        float h1 = textBounds.height();        canvas.drawText(text, centerX - textLen / 2, centerY - circleRadius / 10 + h1 / 2, textPaint);        //分        textPaint.setTextSize(circleRadius >> 3);        textPaint.getTextBounds("分", 0, 1, textBounds);        float h11 = textBounds.height();        canvas.drawText("分", centerX + textLen / 2 + 5, centerY - circleRadius / 10 + h1 / 2 - (h1 - h11), textPaint);        //下一行文字        textPaint.setTextSize(circleRadius / 6);        text = "点击优化";        textLen = textPaint.measureText(text);        canvas.drawText(text, centerX - textLen / 2, centerY + circleRadius / 2.5f, textPaint);    }    public void setMax(int max) {        this.max = max;        invalidate();    }    //动画切换进度值(异步)    public void setProgress(final float progress) {        new Thread(new Runnable() {            @Override            public void run() {                float oldProgress = ProgressBarView2.this.progress;                for (int i = 1; i <= 100; i++) {                    ProgressBarView2.this.progress = oldProgress + (progress - oldProgress) * (1.0f * i / 100);                    postInvalidate();                    SystemClock.sleep(20);                }            }        }).start();    }    //直接设置进度值（同步）    public void setProgressSync(float progress) {        this.progress = progress;        invalidate();    }    /**     * 计算渐变效果中间的某个颜色值。     * 仅支持 #aarrggbb 模式,例如 #ccc9c9b2     */    public String calColor(float fraction, String startValue, String endValue) {        int start_a, start_r, start_g, start_b;        int end_a, end_r, end_g, end_b;        //start        start_a = getIntValue(startValue, 1, 3);        start_r = getIntValue(startValue, 3, 5);        start_g = getIntValue(startValue, 5, 7);        start_b = getIntValue(startValue, 7, 9);        //end        end_a = getIntValue(endValue, 1, 3);        end_r = getIntValue(endValue, 3, 5);        end_g = getIntValue(endValue, 5, 7);        end_b = getIntValue(endValue, 7, 9);        return "#" + getHexString((int) (start_a + fraction * (end_a - start_a)))                + getHexString((int) (start_r + fraction * (end_r - start_r)))                + getHexString((int) (start_g + fraction * (end_g - start_g)))                + getHexString((int) (start_b + fraction * (end_b - start_b)));    }    //从原始#AARRGGBB颜色值中指定位置截取，并转为int.    private int getIntValue(String hexValue, int start, int end) {        return Integer.parseInt(hexValue.substring(start, end), 16);    }    private String getHexString(int value) {        String a = Integer.toHexString(value);        if (a.length() == 1) {            a = "0" + a;        }        return a;    }}