android环状显示百分比、环状百分比视图实现

最新推荐文章于 2021-09-16 18:15:22 发布

原创最新推荐文章于 2021-09-16 18:15:22 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #RoundProgressView #CircleProgressView #ShowPercent

android常用记录专栏收录该内容

60 篇文章

订阅专栏

本文介绍如何自定义一个Android视图来显示带有百分比的圆形进度条，并附带下方的文字说明。通过重写onDraw方法实现进度条的绘制，包括背景圆环、进度圆环、中间填充圆及百分比数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

百分比下带文字

只显示百分比

实现：

自定义一个View，重写onDraw方法：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mWidth = getWidth();
        mHeight = getHeight();

        if(mWidth > mHeight){
            mWidth = mHeight;
        }
        mPaint.setAntiAlias(true); // 消除锯齿

        int halfWidth = mWidth/6;
        mPaint.setStrokeWidth(mProgressWidth);
        mPaint.setColor(mProgressRoundBgColor);
        mPaint.setStyle(Paint.Style.STROKE);
        RectF oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*5+mPaddingX, halfWidth*5));
        canvas.drawArc(oval, 0, 360, false, mPaint);

        mPaint.setColor(mProgressRoundColor);
        canvas.drawArc(oval, -90, -360*mProgress/mMax, false, mPaint);


        halfWidth = mWidth/5;
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mCenterRoundColor);
        oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*4+mPaddingX, halfWidth*4));
        canvas.drawArc(oval, 0, 360, false, mPaint);

        mPaint.reset();
        if(TextUtils.isEmpty(mBelowText)) {
            mPaint.setTextSize(mPencentTextSize);
            mPaint.setColor(mTextColor);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setTextAlign(Paint.Align.CENTER);
            String number = String.format("%.0f", mProgress * 100 / mMax);
            canvas.drawText(number, mWidth / 2 + mPaddingX - 25, (mHeight / 2 + mPencentTextSize / 3), mPaint);

            float textWidth = mPaint.measureText(number);
            mPaint.setTextSize(mPencentTextSize);
            canvas.drawText("%", mWidth / 2 + mPaddingX + textWidth / 2 + 10, (mHeight / 2 + mPencentTextSize / 3), mPaint);
        }else{
            mPaint.setTextSize(mPencentTextSize);
            mPaint.setColor(mTextColor);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setTextAlign(Paint.Align.CENTER);
            String number = String.format("%.0f", mProgress * 100 / mMax);
            canvas.drawText(number, mWidth / 2 + mPaddingX - 25, (mHeight / 2 + mPencentTextSize / 3)-20, mPaint);
            mPaint.setColor(Color.parseColor("#C2C2C2"));
            mPaint.setTextSize(DensityUtil.dip2px(mContext,12f));
            canvas.drawText(mBelowText,(mWidth / 2 + mPaddingX - 25)+23,(mHeight / 2 + mPencentTextSize / 3)+20,mPaint);

            float textWidth = mPaint.measureText(number);
            mPaint.setTextSize(mPencentTextSize);
            mPaint.setColor(mTextColor);
            canvas.drawText("%", mWidth / 2 + mPaddingX + textWidth / 2 + 10, (mHeight / 2 + mPencentTextSize / 3)-20, mPaint);
        }
    }

源码及使用代码下载：

https://download.youkuaiyun.com/download/yonghuming_jesse/10677919

最后推荐给一些想进大厂或者还没有拿到心仪offer的攻城狮们一本书，由大厂java面试官胡书敏编写，满满的干货，助你进到想去的公司。