美文网首页
【Android】圆形进度条

【Android】圆形进度条

作者: urkay | 来源:发表于2020-07-01 17:25 被阅读0次
    效果图 背景图.png

    一:分析(背景、进度条、文字)

    初始化需要的工具

    private void init() {
            //进度圆环
            mCirclePaint = new Paint();
            mCirclePaint.setAntiAlias(true);
            mCirclePaint.setColor(Color.parseColor(mProgressBackGround));//笔刷颜色#3BB0E2
            mCirclePaint.setStyle(Paint.Style.STROKE);
            mCirclePaint.setStrokeWidth(mCriWidth);//圆环宽度12
            mCirclePaint.setStrokeCap(Paint.Cap.ROUND);//笔刷圆角
            //文字描述
            mTitlePaint = new Paint();
            mTitlePaint.setAntiAlias(true);
            mTitlePaint.setTextSize(mHumTitleSize);//字体大小20
            mTitlePaint.setColor(Color.parseColor(mProgressBackGround));//字体颜色#3BB0E2
            mTitlePaint.setStyle(Paint.Style.STROKE);
            //背景图,将图片缩放到设置的宽度
            mBackgroundBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.bg_nfc_progress), mWidth, mWidth, true);
        }
    

    二:测量画布宽高,调整圆半径、字体大小、线宽等

    RxImageTool.sp2px,dp2px方法百度下都有

    @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int specSize = MeasureSpec.getSize(widthMeasureSpec);
            // 参考宽,处理成正方形
            setMeasuredDimension(specSize, specSize);
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            // 控件宽、高
            mWidth = Math.min(h, w);
            //圆半径
            mRadius = mWidth / 2 - mWidth / 200 * RxImageTool.dp2px(10);
            //圆宽度
            mCriWidth = mWidth / 200 * RxImageTool.sp2px(15);
            //设置字体大小
            mTitleSize = RxImageTool.sp2px(mWidth / 10);
            //设置图片大小
            mBackgroundBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap, mWidth, mWidth, true);
        }
    

    三:绘制看看

    @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //图片背景
            canvas.drawBitmap(mBackgroundBitmap, 0, 0, mTitlePaint);
            //画圆
            drawCircle(canvas);
            //画进度文字
            drawTemText(canvas);
        }
    
     //画圆弧
        private void drawCircle(Canvas canvas) {
            canvas.save();
            RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);
            //移至画布中心
            canvas.translate(mWidth / 2, mWidth / 2);
            //旋转角度,让起点从顶部开始
            canvas.rotate(-90);
            //画进度条,currentAnimationValue需根据进度条计算
            mCirclePaint.setColor(Color.parseColor(mProgressBackGround));
            canvas.drawArc(rectF, 0,currentAnimationValue, false, mCirclePaint);
            canvas.restore();
        }
    
        // 画标题
        private void drawTemText(Canvas canvas) {
            canvas.save();
            canvas.translate(mWidth / 2, mWidth / 2);
            mTitlePaint.setTextSize(mHumTitleSize);
            mHumTitle = mProgress + "%";
            float humValue = mTitlePaint.measureText(mHumTitle);
            mTitlePaint.setColor(Color.parseColor(mProgressBackGround));
            canvas.drawText(mHumTitle, -humValue / 2, RxImageTool.dp2px(7), mTitlePaint);
        }
    

    currentAnimationValue的计算方法

    //计算1%进度对应的角度
    mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
    //根据当前进度计算需要绘制的角度
    currentAnimationValue=mAngleOneHum * mProgress;
    

    四:扩展功能

    例设置进度、添加动画

    //设置最大、最小、进度
        public CircleProgressView setData(int minHum, int maxHum, int progress) {
            this.mMinProgress = minHum;
            this.mMaxProgress = maxHum;
            if (progress < minHum) {
                this.mProgress = minHum;
            } else if (progress > maxHum) {
                this.mProgress = maxHum;
            } else {
                this.mProgress = progress;
            }
            mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
            return this;
        }
    
        //设置当前进度
        public CircleProgressView setProgress(int progress) {
            setData(mMinProgress, mMaxProgress, progress);
            currentAnimationValue=mAngleOneHum * mProgress;
            invalidate();
    //        setAnimation(currentAnimationValue,mAngleOneHum * mProgress,1000);
            return this;
        }
    
        public int getProgress() {
            return mProgress;
        }
    
        /**
         * 为进度设置动画
         * @param last
         * @param current
         */
        private void setAnimation(float last, float current, int duration) {
            if(progressAnim !=null&& progressAnim.isRunning()){
                progressAnim.cancel();
    //            isAnimation =true;
            }
            progressAnim = ValueAnimator.ofFloat(last, current);
            progressAnim.setDuration(duration);
            progressAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    currentAnimationValue = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            progressAnim.addListener(new Animator.AnimatorListener(){
    
                @Override
                public void onAnimationStart(Animator animation) {
    
                }
    
                @Override
                public void onAnimationEnd(Animator animation) {
    //                isAnimation =false;
                }
    
                @Override
                public void onAnimationCancel(Animator animation) {
    //                isAnimation =false;
                }
    
                @Override
                public void onAnimationRepeat(Animator animation) {
    
                }
            });
            progressAnim.start();
        }
    

    完整代码

    /**
     * urkay
     * 2020/5/12
     * 圆形进度条
     */
    public class CircleProgressView extends View {
        //控件宽
        private int mWidth = 200;
        //半径
        private int mRadius;
        //字体宽度
        private int mTitleSize;
        // 圆环宽度
        private int mCriWidth = RxImageTool.dp2px(12);
        //文字大小
        private int mHumTitleSize = RxImageTool.sp2px(20);
        //圆笔触
        private Paint mCirclePaint;
        //当前进度笔触
        private Paint mValueCirclePaint;
        private Paint mTitlePaint;
        //圆背景色
        private String mCircleBackground = "#666666";
        //圆进度色
        private String mProgressBackGround = "#3BB0E2";
        //最小进度
        private int mMinProgress = 0;
        //最大进度
        private int mMaxProgress = 100;
        //当前进度
        private int mProgress = 50;
        //标题
        private String mHumTitle = "0%";
        //当前进度每份的角度
        private float mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
        private Bitmap mBackgroundBitmap;
        private ValueAnimator progressAnim;
        private float currentAnimationValue;
    
        public CircleProgressView(Context context) {
            super(context);
            init();
        }
    
        public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }
    
        private void init() {
            //进度圆环
            mCirclePaint = new Paint();
            mCirclePaint.setAntiAlias(true);
            mCirclePaint.setColor(Color.parseColor(mCircleBackground));
            mCirclePaint.setStyle(Paint.Style.STROKE);
            mCirclePaint.setStrokeWidth(mCriWidth);
            mCirclePaint.setStrokeCap(Paint.Cap.ROUND);//笔刷圆角
            //文字描述
            mTitlePaint = new Paint();
            mTitlePaint.setAntiAlias(true);
            mTitlePaint.setTextSize(mHumTitleSize);
            mTitlePaint.setColor(Color.parseColor(mProgressBackGround));
            mTitlePaint.setStyle(Paint.Style.STROKE);
            //背景图
            mBackgroundBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.bg_nfc_progress), mWidth, mWidth, true);
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int specSize = MeasureSpec.getSize(widthMeasureSpec);
            // 参考宽,处理成正方形
            setMeasuredDimension(specSize, specSize);
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            // 控件宽、高
            mWidth = Math.min(h, w);
            //圆半径
            mRadius = mWidth / 2 - mWidth / 200 * RxImageTool.dp2px(10);
            //圆宽度
            mCriWidth = mWidth / 200 * RxImageTool.sp2px(15);
            //设置字体大小
            mTitleSize = RxImageTool.sp2px(mWidth / 10);
            //设置图片大小
            mBackgroundBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap, mWidth, mWidth, true);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //图片背景
            canvas.drawBitmap(mBackgroundBitmap, 0, 0, mTitlePaint);
            //画圆
            drawCircle(canvas);
            //画进度文字
            drawTemText(canvas);
        }
    
        //画圆弧
        private void drawCircle(Canvas canvas) {
            canvas.save();
            RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);
    
            canvas.translate(mWidth / 2, mWidth / 2);
            canvas.rotate(-90);
            //画背景
    //        mCirclePaint.setColor(Color.parseColor(mCircleBackground));
    //        canvas.drawArc(rectF, 0, 361, false, mCirclePaint);
            //画前景
            mCirclePaint.setColor(Color.parseColor(mProgressBackGround));
            canvas.drawArc(rectF, 0,currentAnimationValue, false, mCirclePaint);
            canvas.restore();
        }
    
        // 画标题
        private void drawTemText(Canvas canvas) {
            canvas.save();
            canvas.translate(mWidth / 2, mWidth / 2);
            mTitlePaint.setTextSize(mHumTitleSize);
            mHumTitle = mProgress + "%";
            float humValue = mTitlePaint.measureText(mHumTitle);
            mTitlePaint.setColor(Color.parseColor(mProgressBackGround));
            canvas.drawText(mHumTitle, -humValue / 2, RxImageTool.dp2px(7), mTitlePaint);
        }
    
        //设置最大、最小、进度
        public CircleProgressView setData(int minHum, int maxHum, int progress) {
            this.mMinProgress = minHum;
            this.mMaxProgress = maxHum;
            if (progress < minHum) {
                this.mProgress = minHum;
            } else if (progress > maxHum) {
                this.mProgress = maxHum;
            } else {
                this.mProgress = progress;
            }
            mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
            return this;
        }
    
        //设置当前进度
        public CircleProgressView setProgress(int progress) {
            setData(mMinProgress, mMaxProgress, progress);
            currentAnimationValue=mAngleOneHum * mProgress;
            invalidate();
    //        setAnimation(currentAnimationValue,mAngleOneHum * mProgress,1000);
            return this;
        }
    
        public int getProgress() {
            return mProgress;
        }
    
        /**
         * 为进度设置动画
         * @param last
         * @param current
         */
        private void setAnimation(float last, float current, int duration) {
            if(progressAnim !=null&& progressAnim.isRunning()){
                progressAnim.cancel();
    //            isAnimation =true;
            }
            progressAnim = ValueAnimator.ofFloat(last, current);
            progressAnim.setDuration(duration);
            progressAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    currentAnimationValue = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            progressAnim.addListener(new Animator.AnimatorListener(){
    
                @Override
                public void onAnimationStart(Animator animation) {
    
                }
    
                @Override
                public void onAnimationEnd(Animator animation) {
    //                isAnimation =false;
                }
    
                @Override
                public void onAnimationCancel(Animator animation) {
    //                isAnimation =false;
                }
    
                @Override
                public void onAnimationRepeat(Animator animation) {
    
                }
            });
            progressAnim.start();
        }
    
        @Override
        protected void onAttachedToWindow() {
            setAnimation(currentAnimationValue,mAngleOneHum * mProgress,1000);
            super.onAttachedToWindow();
        }
    
        @Override
        protected void onDetachedFromWindow() {
            if(progressAnim !=null&& progressAnim.isRunning()){
                progressAnim.cancel();
            }
            super.onDetachedFromWindow();
        }
    }
    

    相关文章

      网友评论

          本文标题:【Android】圆形进度条

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