自定义View之线性百分比进度条

先上效果图再分析：

效果图

从图中可以看到本view支持两种不同的类型进度展示，一种是进度百分比直接用textview展示，另一种加了矩形背景。第一种没什么难度，本文就以第二种为例讲解一下，一步一步实现，你会发现原来很简单。

 // 线的X起始左标
   // private float startX;
  //  private float endX;
//private float pading = 100f; // 左右边距
 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        startX = paintWidth+pading;
        endX = width -pading;
    }

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 根据 progress进度 ，获得X坐标
         lenth = (endX*progress/100)+startX-(progress/100*(startX));
        // 底部背景线
       canvas.drawLine(startX,height/2,endX,height/2,paint);
        // 画 进度线
       drawLine(canvas);
        if (type==1){
            // 不带矩形的进度
            drawText(canvas);
        }else if (type==2){
            // 画带三角形的矩形进度条
            drawRecText(canvas);

        }
    }

首先在onSizeChanged方法中测量view宽高和线的起始位置，在onDraw方法中进行类型判断和根据 progress进度 获得X坐标，然后开始画图。

第一步画背景线

// 底部背景线
canvas.drawLine(startX,height/2,endX,height/2,paint);

背景

第二步 画进度线并实现动画效果

先画线

 canvas.drawLine(startX,height/2,lenth,height/2,mPaint);

动画效果

// 设置进度
    public void setProgress(int mprogress) {
        ValueAnimator anim = ValueAnimator.ofFloat(0, mprogress);
        anim.setDuration(3000);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                progress = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        anim.start();
    }

根据ValueAnimator 获取progress值，连续调用invalidate()进行重绘。

bbb.gif

第三步实现画矩形和内部文字

String text =(int) progress+"%";

        ttPaint.getTextBounds(text, 0, text.length(), tTextRect);
        float TextHeight = tTextRect.height();
        float TextWidth = tTextRect.width();

        tRect.set((int)(lenth-TextWidth/2-4f),(int)(height/2-2*TextHeight-6f),(int)(lenth+TextWidth/2+4f),(int)(height/2-TextHeight));
        // 画矩形
        canvas.drawRect(tRect,recPaint);

        Paint.FontMetricsInt fontMetrics = ttPaint.getFontMetricsInt();
        // 获取baseLine
        int baseline = tRect.top + (tRect.bottom - tRect.top - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
        ttPaint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText(text,tRect.centerX(),baseline, ttPaint);

首先获取文本内容宽高，然后根据文本的宽高设置矩形的初始位置，并画出，为了不让文字紧贴矩形这里适当调整一下矩形宽高，然后在矩形的中心画出文本内容 。

rrrrr.gif

第四步 画三角形

// 画三角形
        path.moveTo(lenth, (float) (height/2-0.7*TextHeight));
        path.lineTo((float) (lenth-0.15*TextWidth),  height / 2-TextHeight);
        path.lineTo((float) (lenth+0.15*TextWidth), height / 2-TextHeight);
        canvas.drawPath(path, recPaint);
        path.reset();

注意： 如果你问我上边方法的百分比为什么是0.15和0.7的话我会明确的告诉你我不知道！！！三角型的大小需要根据矩形的大小和位置来调整，只到你认为合适为止，所以你可以随意更改三角形的起始y坐标，连接的X坐标也可以随便更改，所以这里的百分比只是我自己调试看着顺眼。。。

eeeee.gif
项目地址：
csdn:http://download.csdn.net/download/qq_38367802/10172775
github:https://github.com/liuzhenhang/myview