Android自定义控件实现圆形进度CircleProgressBar

最新推荐文章于 2025-04-10 00:15:00 发布

不踢足球的王大雷

最新推荐文章于 2025-04-10 00:15:00 发布

阅读量7.7k

点赞数 14

分类专栏： Android_自定义控件文章标签：圆形进度刻度盘进度盘自定义View 控件

本文链接：https://blog.youkuaiyun.com/wangchunlei123/article/details/50478913

版权

本文详细介绍了如何在Android中实现圆形进度条CircleProgressBar。通过自定义View，利用Canvas绘制渐变圆弧背景、白色分割线和中间文字等，实现了一个可自定义的圆形进度控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近日有朋友问我有没有如下图效果的开源控件

，这里写图片描述

相信大家无论是用IOS还是Android,都对这种效果不陌生，很多主流APP都会有这样或类似的效果，之前也打算研究一下这类控件的代码，苦于一直不知道应该怎么搜索这种效果(就是关键词)或者所搜的结果不是自己想要的，所以就一直搁置了下来。
正好朋友需要这种效果，所以就忙里偷闲写了一个类似的、更加常见和适用范围更多的控件，效果如下图所示：

这里写图片描述

自定义上图所示效果的控件时，其实就是用Canvas绘制不同效果，比如渐变圆弧背景、圆周白色分割线、中间文字等，这篇博客也根据绘制的顺序依次阐述。

1.自定义CircleProgressBar，继承View，并实现响应的构造函数
代码如下：

/**
 * Created by WangChunLei on 2016.1.16
 * E-mail:wcl_android@163.com
 */
public class GradientProgressBar extends View {
   
     public GradientProgressBar(Context context) {
        super(context);
        init();
    }

    public GradientProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public GradientProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
}

其中init方法是对相关画笔进行初始化的方法，init方法代码如下：

    private void init() {
        backCirclePaint = new Paint();
        backCirclePaint.setStyle(Paint.Style.STROKE);
        backCirclePaint.setAntiAlias(true);
        backCirclePaint.setColor(Color.LTGRAY);
        backCirclePaint.setStrokeWidth(circleBorderWidth);
//        backCirclePaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.OUTER));

        gradientCirclePaint = new Paint();
        gradientCirclePaint.setStyle(Paint.Style.STROKE);
        gradientCirclePaint.setAntiAlias(true);
        gradientCirclePaint.setColor(Color.LTGRAY);
        gradientCirclePaint.setStrokeWidth(circleBorderWidth);

        linePaint = new Paint();
        linePaint.setColor(Color.WHITE);
        linePaint.setStrokeWidth(5);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(textSize);
        textPaint.setColor(Color.BLACK);
    }

2.测量控件的宽高-onMeasure
onMeasure是自定义控件的第一步，目的就是测量得到该控件应该占有的宽高尺寸。其中onMeasure方法的代码如下：

   @Override
    protected void onMeasure(int widthMeasureSpec, int h

最低0.47元/天解锁文章