自定义View-NumberProgressBar

Posted 2022-11-06 扈扈哈嘿

 前两天在github上看代码家的NumberProgressBar,看了效果，然后自己试着写一下，可是大牛的原代码我还没有来得急看，我就在这里贴一下我自己的代码。
 效果图如下：

关于这个效果我们把View分成三段，已加载完成的，没有加载完成的，还有就是这个字体。
 接下来看看代码吧

1.资源文件编辑属性

 <declare-styleable name="NumberPorgressBar">
<attr name="unreached_color" format="color|reference" />
<attr name="reached_color" format="color|reference" />
        <attr name="progress_num" format="integer" />
 <attr name="num_size" format="dimension|reference" />
        <attr name="num_color" format="color|reference" />
    </declare-styleable>

2.代码中获取属性

//加载完成的粗线显示颜色
 reachedAreaColor = array.getColor(R.styleable.NumberPorgressBar_reached_color, Color.BLACK);
 //没有加载的粗线显示颜色
unreachedAreaColor = array.getColor(R.styleable.NumberPorgressBar_unreached_color, Color.parseColor("#999999"));
//最开始的显示进度
progressNum = array.getInteger(R.styleable.NumberPorgressBar_progress_num, 0);
//显示进度的字体大小
numSize = (int) array.getDimension(R.styleable.NumberPorgressBar_num_size, 56);
//显示进度的字体颜色
numColor = array.getColor(R.styleable.NumberPorgressBar_num_color, Color.RED);

3.onSizeChanged方法的代码

 String progressText = "00%";
this.w = w;
textRect = new Rect();
//测量显示进度的text的宽度
textPaint.getTextBounds(progressText, 0, progressText.length(), textRect);
//每个字体的宽度
itemWidth = (textRect.right - textRect.left) / 3;
 mWidth = w - (textRect.right - textRect.left);
segmentWidth = mWidth / 100;
mHeight = h;

4.onDraw里面的代码

  canvas.translate(0, mHeight / 2);
String progressText = progressNum + "%";
//已加载完毕的进度条显示宽度
int middleWidth = progressNum * segmentWidth;
//  Log.i(Constants.TAG, "onDraw: middleWidth=" + middleWidth);
canvas.drawLine(0, 0, middleWidth, 0, reachedPaint);
//画上显示进度的text
 canvas.drawText(progressText, middleWidth, (textRect.bottom - textRect.top) / 2, textPaint);
if ((middleWidth + (textRect.right - textRect.left)) < mWidth && progressNum != 100)
//画还没有加载的到的进度条
 canvas.drawLine(middleWidth + (textRect.right - textRect.left), 0, mWidth+itemWidth, 0, unreachedPaint);

关于加载动画

这里呢用的属性动画

 ValueAnimator animator = new ValueAnimator().ofInt(progressNum, currentProgressNum)
                .setDuration((100 - progressNum) * onePrecentTime);
        animator.setInterpolator(new LinearInterpolator());
        animator.setRepeatCount(0);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) 
                progressNum = (int) valueAnimator.getAnimatedValue();
                invalidate();
            
        );
        animator.start();

代码都很容易懂，我也不多说了，原代码在这里：github
有不对的地方请告诉我喔，对您有帮助的话，麻烦给颗星呢。