先上效果圖再分析：

效果圖

從圖中可以看到本view支持兩種不同的類(lèi)型進(jìn)度展示，一種是進(jìn)度百分比直接用textview展示，另一種加了矩形背景。第一種沒(méi)什么難度，本文就以第二種為例講解一下，一步一步實(shí)現(xiàn)，你會(huì)發(fā)現(xiàn)原來(lái)很簡(jiǎn)單。

 // 線的X起始左標(biāo)
   // 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);
        // 根據(jù) progress進(jìn)度 ，獲得X坐標(biāo)
         lenth = (endX*progress/100)+startX-(progress/100*(startX));
        // 底部背景線
       canvas.drawLine(startX,height/2,endX,height/2,paint);
        // 畫(huà) 進(jìn)度線
       drawLine(canvas);
        if (type==1){
            // 不帶矩形的進(jìn)度
            drawText(canvas);
        }else if (type==2){
            // 畫(huà)帶三角形的矩形進(jìn)度條
            drawRecText(canvas);

        }
    }

首先在onSizeChanged方法中測(cè)量view寬高和線的起始位置，在onDraw方法中進(jìn)行類(lèi)型判斷和根據(jù) progress進(jìn)度 獲得X坐標(biāo)，然后開(kāi)始畫(huà)圖。

第一步畫(huà)背景線

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

背景

第二步 畫(huà)進(jìn)度線并實(shí)現(xiàn)動(dòng)畫(huà)效果

先畫(huà)線

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

動(dòng)畫(huà)效果

// 設(shè)置進(jìn)度
    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();
    }

根據(jù)ValueAnimator 獲取progress值，連續(xù)調(diào)用invalidate()進(jìn)行重繪。

bbb.gif

第三步實(shí)現(xiàn)畫(huà)矩形和內(nèi)部文字

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));
        // 畫(huà)矩形
        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);

首先獲取文本內(nèi)容寬高，然后根據(jù)文本的寬高設(shè)置矩形的初始位置，并畫(huà)出，為了不讓文字緊貼矩形這里適當(dāng)調(diào)整一下矩形寬高，然后在矩形的中心畫(huà)出文本內(nèi)容 。

rrrrr.gif

第四步 畫(huà)三角形

// 畫(huà)三角形
        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();

注意： 如果你問(wèn)我上邊方法的百分比為什么是0.15和0.7的話(huà)我會(huì)明確的告訴你我不知道！??！三角型的大小需要根據(jù)矩形的大小和位置來(lái)調(diào)整，只到你認(rèn)為合適為止，所以你可以隨意更改三角形的起始y坐標(biāo)，連接的X坐標(biāo)也可以隨便更改，所以這里的百分比只是我自己調(diào)試看著順眼。。。

eeeee.gif