自定义View-NumberProgressBar

 前两天在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
有不对的地方请告诉我喔,对您有帮助的话,麻烦给颗星呢。
这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值