＜android＞圆形进度条CircleProgressView（自定义view）

 

  最近写了一个圆形进度条，加了点效果，就是个简单的自定义view，如果有赶工期或者正好碰到类似效果需求的同伴们可以直接改改来用，有三种状态设置，可以用在批量列表下载的显示上（0未下载 1准备下载（设置进度前） 2下载完成 3下载错误），都封装好了。先上效果图：

然后直接上完整代码：

/**
 * author by LiuGuo
 * on 2021/4/9
 * 自定义组件：圆形进度条
 */
public class CircleProgressView extends View {
    private Paint mPaint;
    private Paint mPaint1;
    private Paint mPaint2;
    private RotateAnimation anim;
    private float mDegrees;
    private int widthsize;
    private int heightsize;
    private int initialColor;
    private int finishColor;
    private Paint mPaint3;
    boolean startTag = false;
    DecimalFormat decimalFormat = new DecimalFormat("00");
    private int paddingLeft=10;
    private int paddingTop=10;
    private int paddingRight=10;
    private int paddingBottom=10;

    public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.crilProgress);
        initialColor = ta.getColor(R.styleable.crilProgress_initialColor, Color.parseColor("#F4F1F4"));
        finishColor = ta.getColor(R.styleable.crilProgress_finishColor, Color.parseColor("#FED942"));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setBackgroundColor(Color.parseColor("#00000000"));
        init();
        widthsize = MeasureSpec.getSize(widthMeasureSpec);
        heightsize = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(widthsize, heightsize);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
/*        paddingLeft = getPaddingLeft();  //根据实际paddin
        paddingTop = getPaddingTop();
        paddingRight = getPaddingRight();
        paddingBottom = getPaddingBottom();*/
        RectF rectF1 = new RectF(widthsize / 12.5f+paddingLeft, heightsize / 12.5f+paddingTop, widthsize / 12.5f + (widthsize / 1.2f)-paddingRight, heightsize / 12.5f + (heightsize / 1.2f)-paddingBottom);
        if (mDegrees < 360) {
            if (!startTag) {
                canvas.drawArc(rectF1, 90, 360, false, mPaint);
                canvas.drawLine(widthsize / 4.1f, widthsize / 1.7f, widthsize / 2.03f, widthsize / 1.335f, mPaint);
                canvas.drawLine(widthsize / 2.1f, widthsize / 1.38f, widthsize / 1.38f, widthsize / 2.77f, mPaint);
            } else {
                canvas.drawArc(rectF1, 90, mDegrees, false, mPaint1);
                canvas.drawText(decimalFormat.format(mDegrees / 360 * 100) + "%", heightsize / 3.9f+paddingLeft*0.4f, heightsize / 1.65f-paddingTop*0.1f, mPaint3);
            }
            invalidate();
        } else {
            canvas.drawCircle(widthsize / 2, heightsize / 2, heightsize / 2.7f, mPaint2);
            canvas.drawLine(widthsize / 4.1f, widthsize / 1.7f, widthsize / 2.03f, widthsize / 1.335f, mPaint);
            canvas.drawLine(widthsize / 2.1f, widthsize / 1.38f, widthsize / 1.38f, widthsize / 2.77f, mPaint);
        }
    }



    /**
     *  0未下载  1准备下载（设置进度前）  2下载完成  3下载错误
     * @param type
     */
    public void setState(int type) {
        switch (type) {
            case 0:
                startTag = false;
                mDegrees = 0;
                invalidate();
                break;

            case 1:
                startTag = true;
                mDegrees = 0;
                invalidate();
                break;

            case 2:
                startTag = true;
                mDegrees = 361;
                invalidate();
                break;

            case 3:
                startTag = true;
                mPaint1.setColor(Color.parseColor("#ff0000"));
                mPaint3.setColor(Color.parseColor("#ff0000"));
                invalidate();
                break;
        }
    }



    /**
     * 设置进度
     * @param progress
     */
    public void setProgress(float progress) {
        if (startTag)
            this.mDegrees = progress / 100 * 360;
        invalidate();
    }



    /**
     * 初始化
     */
    public void init() {
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        BlurMaskFilter blu=new BlurMaskFilter(1,BlurMaskFilter.Blur.SOLID);
        mPaint = new Paint();

        mPaint.setColor(initialColor);
        mPaint.setStrokeWidth(widthsize / 17.85f);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE); //绘制空心圆
        mPaint.setFilterBitmap(true);
//        mPaint.setMaskFilter(blu);
        mPaint.setShadowLayer(7,7,7,Color.parseColor("#55000000"));

        mPaint1 = new Paint();
        mPaint1.setColor(finishColor);
        mPaint1.setStrokeWidth(widthsize / 17.85f);
        mPaint1.setAntiAlias(true);
        mPaint1.setDither(true);
        mPaint1.setStyle(Paint.Style.STROKE); //绘制空心圆
        mPaint1.setFilterBitmap(true);
//        mPaint1.setMaskFilter(blu);
        mPaint1.setShadowLayer(7,9,9,Color.parseColor("#55000000"));

        mPaint2 = new Paint();
        mPaint2.setColor(finishColor);
        mPaint2.setStrokeWidth(widthsize / 17.85f);
        mPaint2.setAntiAlias(true);
        mPaint2.setDither(false);
        mPaint2.setStyle(Paint.Style.FILL_AND_STROKE); //绘制空心圆
        mPaint2.setFilterBitmap(true);
//        mPaint2.setMaskFilter(blu);
        mPaint2.setShadowLayer(7,9,9,Color.parseColor("#55000000"));

        mPaint3 = new Paint();
        mPaint3.setColor(finishColor);
        mPaint3.setTextSize(widthsize / 3.85f);
        mPaint3.setFakeBoldText(true);
        mPaint3.setFilterBitmap(true);
        setState(0);
    }
}

attrs文件：

    <declare-styleable name="crilProgress">
        <attr name="initialColor" format="color"></attr>
        <attr name="finishColor" format="color"></attr>
    </declare-styleable>

上用法：

    <com.example.xln_sideslipmenu.CircleProgressView
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:finishColor="#32CD32"
        app:initialColor="#FFD700">
    </com.example.xln_sideslipmenu.CircleProgressView>

然后在你的进度监听回调里设置进度 setProgress(float progress) 就ok了。

码云完整代码:https://gitee.com/CeMaBenTeng/three-custom-view-effects