Android 圆形进度条CircleProgressView 基础版

一个最基础的自定义View 圆形进度条,可设置背景色、进度条颜色(渐变色)下载进度控制;可二次定制度高;

核心代码:

复制代码
    @Override
    protected void onDraw(@NonNull Canvas canvas) {
        super.onDraw(canvas);
        int mW = getMeasuredWidth();
        int mH = getMeasuredHeight();
        int centerX = mW/2;
        int centerY = mH/2;
        Log.i(TAG, "onDraw: "+mW +"-" +mH);

        //画背景色
        canvas.save();
        paintBg.setColor(backgroundColor);
        RectF rectBg = new RectF(strokeWidth,strokeWidth,mW-strokeWidth,mH-strokeWidth);
        canvas.drawArc(rectBg,0,360,false , paintBg);

        //画进度条颜色
        float ratio  = (float) Math.min(progress / max , 1.00);
        paint.setColor(loadingColor); //设置进度条颜色
//        SweepGradient sweepGradient = new SweepGradient(centerX , centerY , new int[]{loadingColor , Color.YELLOW} , null);
//        paint.setShader(sweepGradient); //设置进度条渐变色
        paint.setStrokeCap(Paint.Cap.ROUND); 设置画笔边缘为半圆状
        canvas.drawArc(rectBg,0,360*ratio,false , paint);
        canvas.restore();

        //画中间的文案
        paintText.setTextSize(dp2px(18));
        paintText.setColor(Color.BLACK);
        paintText.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
        float disY = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        canvas.drawText(progress+"%" , centerX , centerY+disY , paintText);

    }

全部代码:

复制代码
package com.cuichen.mytestdemo.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.cuichen.mytestdemo.R;

public class CircleProgressView extends View {
    private final String TAG = CircleProgressView.class.getSimpleName();
    public CircleProgressView(Context context) {
        super(context);
    }

    public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initAttrs(attrs);
    }

    public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(attrs);
    }

    public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initAttrs(attrs);
    }

    private void initAttrs( @Nullable AttributeSet attrs){
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs , R.styleable.CircleProgress);
        try{
            backgroundColor = typedArray.getColor(R.styleable.CircleProgress_backgroundColorCircle , Color.parseColor("#5503DAC5"));
            loadingColor = typedArray.getColor(R.styleable.CircleProgress_progressColorCircle ,Color.parseColor("#FF018786"));
            strokeWidth = (int) typedArray.getDimension(R.styleable.CircleProgress_strokeWidthCircle , 18);
            max = typedArray.getInt(R.styleable.CircleProgress_maxCircle , 100);
            progress = typedArray.getInt(R.styleable.CircleProgress_progressCircle , 50);
        }catch (Exception e){
            typedArray.recycle();
        }

    }


    private int strokeWidth = 18;
    private float progress = 0f;
    private float max = 100f;
    private int backgroundColor;
    private int loadingColor;

    final int DEFAULT_HEIGHT_DP = 66;

    Paint paintBg , paint , paintText;
    void init(){
        paintBg = new Paint();
        paintBg.setAntiAlias(true);
        paintBg.setStyle(Paint.Style.STROKE);
        paintBg.setStrokeWidth(strokeWidth);

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);

        paintText = new Paint();
        paintText.setAntiAlias(true);

    }

    public void setProgress(int progress){
        this.progress = progress;
        invalidate();
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.i(TAG, "onMeasure: ");
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        int height = 0;
        switch (heightSpecMode){
            case MeasureSpec.AT_MOST:
                height = dp2px(DEFAULT_HEIGHT_DP);
                break;
            case MeasureSpec.EXACTLY:
            case MeasureSpec.UNSPECIFIED:
                height = heightSpecSize;
                break;
        }
        setMeasuredDimension(widthSpecSize, height);

        if(paint == null) {
            init();
        }
    }

    //RectF
    //left:左边坐标;在绘制中常表示为起点的Y轴坐标
    //top:上边左边;在绘制中常表示为起点的X轴坐标
    //right:右边坐标;在绘制中常表示为终点的X轴坐标
    //bottom:下边坐标;在绘制中常表示为终点的Y轴坐标
    @Override
    protected void onDraw(@NonNull Canvas canvas) {
        super.onDraw(canvas);
        int mW = getMeasuredWidth();
        int mH = getMeasuredHeight();
        int centerX = mW/2;
        int centerY = mH/2;
        Log.i(TAG, "onDraw: "+mW +"-" +mH);

        //画背景色
        canvas.save();
        paintBg.setColor(backgroundColor);
        RectF rectBg = new RectF(strokeWidth,strokeWidth,mW-strokeWidth,mH-strokeWidth);
        canvas.drawArc(rectBg,0,360,false , paintBg);

        //画进度条颜色
        float ratio  = (float) Math.min(progress / max , 1.00);
        paint.setColor(loadingColor); //设置进度条颜色
//        SweepGradient sweepGradient = new SweepGradient(centerX , centerY , new int[]{loadingColor , Color.YELLOW} , null);
//        paint.setShader(sweepGradient); //设置进度条渐变色
        paint.setStrokeCap(Paint.Cap.ROUND); 设置画笔边缘为半圆状
        canvas.drawArc(rectBg,0,360*ratio,false , paint);
        canvas.restore();

        //画中间的文案
        paintText.setTextSize(dp2px(18));
        paintText.setColor(Color.BLACK);
        paintText.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
        float disY = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        canvas.drawText(progress+"%" , centerX , centerY+disY , paintText);

    }
    private int dp2px(int dp){
        float density = getContext().getResources().getDisplayMetrics().density;
        return (int) (dp * density);
    }
}

    <declare-styleable name="CircleProgress">
        <attr name="backgroundColorCircle" format="color"/>
        <attr name="progressColorCircle" format="color"/>
        <attr name="strokeWidthCircle" format="dimension"/>
        <attr name="maxCircle" format="integer"/>
        <attr name="progressCircle" format="integer"/>
    </declare-styleable>
相关推荐
Lei活在当下3 小时前
【业务场景架构实战】7. 多代智能手表适配:Android APP 表盘编辑页的功能驱动设计
android·设计模式·架构
手机不死我是天子7 小时前
《Android 核心组件深度系列 · 第 2 篇 Service》
android
前行的小黑炭7 小时前
Compose页面切换的几种方式:Navigation、NavigationBar+HorizontalPager,会导致LaunchedEffect执行?
android·kotlin·app
前行的小黑炭8 小时前
Android :Comnpose各种副作用的使用
android·kotlin·app
BD_Marathon21 小时前
【MySQL】函数
android·数据库·mysql
西西学代码1 天前
安卓开发---耳机的按键设置的UI实例
android·ui
maki0771 天前
虚幻版Pico大空间VR入门教程 05 —— 原点坐标和项目优化技巧整理
android·游戏引擎·vr·虚幻·pico·htc vive·大空间
千里马学框架1 天前
音频焦点学习之AudioFocusRequest.Builder类剖析
android·面试·智能手机·车载系统·音视频·安卓framework开发·audio
fundroid1 天前
掌握 Compose 性能优化三步法
android·android jetpack
TeleostNaCl1 天前
如何在 IDEA 中使用 Proguard 自动混淆 Gradle 编译的Java 项目
android·java·经验分享·kotlin·gradle·intellij-idea