美文网首页
自定义圆形进度条

自定义圆形进度条

作者: 天黑_0b25 | 来源:发表于2017-09-08 17:15 被阅读0次

    原理就是画一个圆弧,然后用内圆去覆盖圆弧实心的地方,然后写一个监听去时时更新进度条的进度.
    分为外圆,内圆,文字进度:
    1: 外圆:

    mCirclePaint = new Paint();
            mCirclePaint.setAntiAlias(true);
            mCirclePaint.setStrokeWidth(CIRCLE_LINE_WIDTH);
            mCirclePaint.setStyle(Paint.Style.STROKE);
            mCirclePaint.setColor(Color.BLACK);
    

    2.内圆:

    mCircleInnerPaint = new Paint();
            mCircleInnerPaint.setAntiAlias(true);
            mCircleInnerPaint.setStyle(Paint.Style.FILL);
            mCircleInnerPaint.setColor(Color.WHITE);
    

    3.文字进度:

     mTextPaint = new TextPaint();
            mTextPaint.setAntiAlias(true);
            mTextPaint.setStyle(Paint.Style.FILL);
            mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
            mTextPaint.setColor(Color.BLUE);
            mTextPaint.setTextSize(100);
    

    然后把这三个画出来:

    canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint);//外圆
    canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS - CIRCLE_LINE_WIDTH / 2, mCircleInnerPaint);//内圆
    canvas.drawText(mProgressText,halfWidth - mTextPaint.measureText(mProgressText) / 2,halfHeight - (mTextPaint.ascent() + mTextPaint.descent()) / 2,mTextPaint);//文字进度
    

    ------------------------------------------------分割线-------------------------------------------------
    圆弧:

      if (mStartProgress){
                mCirclePaint.setColor(Color.BLACK);
                if (mCircleRectF == null){
                    mCircleRectF = new RectF(halfWidth - CIRCLE_RADIUS, halfHeight - CIRCLE_RADIUS, halfWidth + CIRCLE_RADIUS, halfHeight + CIRCLE_RADIUS);
                }
                if (mStartProgress) {
    
                    float swipeProgress = mProgress / 100f * 360;
                    canvas.drawArc(mCircleRectF, -90, swipeProgress, true, mCirclePaint);
                } else {
                    canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint);
                }
            }
    

    公共接口:

    public void setProgress(float progress) {
            if (progress > 100) {
                progress = 100;
            }
            if (progress < 0) {
                progress = 0;
            }
            mProgress = progress;
            mProgressText =  Float.toString(progress);
            mStartProgress = true;
            postInvalidate();
        }
    
     public float getCurrentProgress() {
            return mProgress;
        }
     public void progressFinished() {
            mStartProgress = false;
        }
    

    在activity中调用:

    private void startProgress() {
            new Thread() {
                @Override
                public void run() {
                    super.run();
                    float currentProgress = myCircleView.getCurrentProgress();
                    ++currentProgress;
                    myCircleView.setProgress(currentProgress);
                    try {
                        sleep(300);
                        if (currentProgress <= 100) {
                            startProgress();
                        } else {
                            myCircleView.progressFinished();
                        }
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }.start();
        }
    

    相关文章

      网友评论

          本文标题:自定义圆形进度条

          本文链接:https://www.haomeiwen.com/subject/nsdgjxtx.html