＜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