美文网首页
带文字的圆形进度条

带文字的圆形进度条

作者: 木叶纷飞 | 来源:发表于2018-09-29 12:59 被阅读0次

    public class CircleProgressBar extends View {

        private int outsideColor;    //进度的颜色

        private float outsideRadius;    //外圆半径大小

        private int insideColor;    //背景颜色

        private int progressTextColor;  //圆环内文字颜色

        private float progressTextSize;    //圆环内文字大小

        private float progressWidth;    //圆环的宽度

        private int maxProgress;    //最大进度

        private float currentProgress;    //当前进度

        private int direction;    //进度从哪里开始(设置了4个值,上左下右)

        private Paint paint;

        private String progressText;    //圆环内文字

        private Rect rect;

        private ValueAnimator animator;

        final Rect bounds = new Rect();

        public CircleProgressBar(Context context) {

            this(context, null);

        }

        public CircleProgressBar(Context context, AttributeSet attrs) {

            this(context, attrs, 0);

        }

        public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {

            super(context, attrs,defStyleAttr);

            initAttrs(context, attrs,defStyleAttr);

        }

        private void initAttrs(Context context, AttributeSet attrs,int defStyleAttr) {

            TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCircleProgressBar, defStyleAttr, 0);

            outsideColor = a.getColor(R.styleable.CustomCircleProgressBar_outside_color, ContextCompat.getColor(getContext(), R.color.white));

            outsideRadius = a.getDimension(R.styleable.CustomCircleProgressBar_outside_radius, DisplayUtil.dp2px(getContext(), 25.0f));

            insideColor = a.getColor(R.styleable.CustomCircleProgressBar_inside_color, ContextCompat.getColor(getContext(), R.color.color_circle_bg));

            progressTextColor = a.getColor(R.styleable.CustomCircleProgressBar_progress_text_color, ContextCompat.getColor(getContext(), R.color.white));

            progressTextSize = a.getDimension(R.styleable.CustomCircleProgressBar_progress_text_size, DisplayUtil.dp2px(getContext(), 14.0f));

            progressWidth = a.getDimension(R.styleable.CustomCircleProgressBar_progress_width, DisplayUtil.dp2px(getContext(), 4.0f));

            currentProgress = a.getFloat(R.styleable.CustomCircleProgressBar_progress, 0.0f);

            maxProgress = a.getInt(R.styleable.CustomCircleProgressBar_max_progress, 100);

            a.recycle();

            paint = new Paint();

        }

        @Override

        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

            int width;

            int height;

            int size = MeasureSpec.getSize(widthMeasureSpec);

            int mode = MeasureSpec.getMode(widthMeasureSpec);

            if (mode == MeasureSpec.EXACTLY) {

                width = size;

            } else {

                width = (int) ((2 * outsideRadius) + progressWidth);

            }

            size = MeasureSpec.getSize(heightMeasureSpec);

            mode = MeasureSpec.getMode(heightMeasureSpec);

            if (mode == MeasureSpec.EXACTLY) {

                height = size;

            } else {

                height = (int) ((2 * outsideRadius) + progressWidth);

            }

            setMeasuredDimension(width, height);

        }

            @Override

            protected void onDraw(Canvas canvas) {

                super.onDraw(canvas);

                int circlePoint = getWidth() / 2;

              /* //画内部背景

                paint.setStyle(Paint.Style.FILL);

                paint.setColor(getResources().getColor(R.color.color_circle_bg));

                canvas.drawCircle(circlePoint-progressWidth, circlePoint-progressWidth,circlePoint-progressWidth, paint);

                //第一步:画背景(即内层圆)

                paint.setColor(insideColor); //设置圆的颜色

                paint.setStyle(STROKE); //设置空心

                paint.setStrokeWidth(progressWidth); //设置圆的宽度

                paint.setAntiAlias(true);  //消除锯齿

                canvas.drawCircle((circlePoint-progressWidth)/2, (circlePoint-progressWidth)/2, outsideRadius, paint); //画出圆*/

                //获取view的边界

                getDrawingRect(bounds);

                int size = bounds.height() > bounds.width() ? bounds.width() : bounds.height();

                float outerRadius = size / 2;

                //画内部背景

                paint.setStyle(Paint.Style.FILL);

                paint.setColor(getResources().getColor(R.color.color_circle_bg));

                canvas.drawCircle(bounds.centerX(), bounds.centerY(), outerRadius - progressWidth, paint);

                //画边框圆

                paint.setStyle(Paint.Style.STROKE);

                paint.setStrokeWidth(progressWidth);

                paint.setColor(insideColor);

                canvas.drawCircle(bounds.centerX(), bounds.centerY(), outerRadius - progressWidth / 2, paint);

                //第二步:画进度(圆弧)

                paint.setColor(outsideColor);  //设置进度的颜色

                RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint + outsideRadius, circlePoint + outsideRadius);  //用于定义的圆弧的形状和大小的界限

                canvas.drawArc(oval, -90, 360 * (currentProgress / maxProgress), false, paint);  //根据进度画圆弧

                //第三步:画圆环内百分比文字

    //            rect = new Rect();

    //            paint.setColor(progressTextColor);

    //            paint.setTextSize(progressTextSize);

    //            paint.setStrokeWidth(0);

    //            progressText = getProgressText();

    //            paint.getTextBounds(progressText, 0, progressText.length(), rect);

    //            Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();

    //            int baseline = (getMeasuredHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;  //获得文字的基准线

    //            canvas.drawText(progressText, getMeasuredWidth() / 2 - rect.width() / 2, baseline, paint);

            }

        public void setProgress(int progress) {

            if (progress < 0) {

                progress = 0;

            } else if (progress > 100) {

                progress = 100;

            }

            currentProgress = progress;

            postInvalidate();

        }

    }

    相关文章

      网友评论

          本文标题:带文字的圆形进度条

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