Android 炫酷进度条

最新推荐文章于 2023-11-08 16:17:08 发布

原创最新推荐文章于 2023-11-08 16:17:08 发布 · 961 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #java #开发语言

该博客介绍了如何在Android中创建一个自定义的ProgressBarView组件。通过使用自定义属性，如背景颜色、进度颜色、文本颜色、宽度和文本大小，可以个性化进度条的外观。在onDraw方法中，博主详细解释了绘制进度条和中心文本的过程，并提供了设置进度的方法。此外，还展示了自定义属性的声明方式。

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

老规矩先看效果图

https://i-blog.csdnimg.cn/blog_migrate/ea096fdc00bcf68b4380875ff489071c.jpeg

public  class ProgressBarView  extends View {
    private int barBackgroundColor= Color.BLACK;
    private int progressColor= Color.GREEN;
    private int bartextColor =Color.BLACK;
    private int barWidth =20;  // 进度条宽度

    private String  bartextStr ; // 显示文本
    private int bartextSize  = 20 ;

    public ProgressBarView(Context context) {
        this(context,null);
    }
    public ProgressBarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }
    public ProgressBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ProgressBarView);
        barBackgroundColor = array.getColor( R.styleable.ProgressBarView_barBackgroundColor,barBackgroundColor);
        progressColor = array.getColor( R.styleable.ProgressBarView_progressColor,progressColor);
        bartextColor = array.getColor( R.styleable.ProgressBarView_bartextColor,bartextColor);
        bartextSize = array.getDimensionPixelSize( R.styleable.ProgressBarView_bartextSize,bartextSize);
        barWidth = (int) array.getDimension(R.styleable.ProgressBarView_barWidth,barWidth);
        bartextStr =  array.getString(R.styleable.ProgressBarView_bartextStr);
        array.recycle();
        initPaint();
        initTextPaint();
        initProgressPaint();
    }
    private Paint mPaint,mTextPaint,mProgressPaint ;
    private void initPaint(){
        mPaint = new Paint();
        mPaint.setColor(barBackgroundColor);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(barWidth);
        mPaint.setStyle(Paint.Style.STROKE);
    }

    private void initProgressPaint(){
        mProgressPaint = new Paint();
        mProgressPaint.setColor(progressColor);
        mProgressPaint.setAntiAlias(true);
        mProgressPaint.setStrokeWidth(barWidth);
        mProgressPaint.setStyle(Paint.Style.STROKE);
    }

    private void initTextPaint(){
        mTextPaint = new Paint();
        mTextPaint.setColor(bartextColor);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(bartextSize);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
       int width =  MeasureSpec.getSize(widthMeasureSpec);
       int height =  MeasureSpec.getSize(heightMeasureSpec);
       /*8
          去除最小值
        */
       setMeasuredDimension(Math.min(width,height),Math.min(width,height));
    }

    private int totalNumber =100;
    private float number=0 ;
    public void setNumber(float number) {
        this.number = number;
        invalidate();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //  float left, float top, float right, float bottom
        RectF rectF = new RectF(barWidth,barWidth,getWidth()-barWidth,getHeight()-barWidth) ;
//        drawCircle   都可以
        canvas.drawArc(rectF,180,360,false,mPaint);
        if(totalNumber!=0){
            float sy =  number/totalNumber;
            canvas.drawArc(rectF,180,sy*360,false,mProgressPaint);
        }
        /**
         * 画中心的文本 就是进度
         */
            bartextStr = (int)((number/totalNumber)*100)+"%";
        Rect boundsRect = new Rect();
        mTextPaint.getTextBounds(bartextStr,0,bartextStr.length(),boundsRect);
        //  获取基线位置
        Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
        int baseLine = getHeight()/2+ (fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.descent;
        canvas.drawText(bartextStr,getWidth()/2-boundsRect.width()/2,baseLine,mTextPaint);
    }
}

需要自定义属性文件 attrs

<declare-styleable name="ProgressBarView">
    <attr name="barBackgroundColor" format="color"/>
    <attr name="progressColor" format="color"/>
    <attr name="bartextColor" format="color"/>
    <attr name="barWidth" format="dimension"/>
    <attr name="bartextSize" format="dimension"/>
    <attr name="bartextStr" format="string"/>

</declare-styleable>