5- 自定义自绘制View 带百分百的进度条

5- 自定义自绘制View 带百分百的进度条

---

先来看看效果图

这是自己绘制的一个带百分比的进度条，其实比较简单总体分成三个部分；
1- 左边矩形
2- 中间文字
3- 右边矩形
所以我们就可以开始绘制了，绘制在哪里开始？当然是在onDraw方法中了

   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
//画文字
       text = (int)(getPercent() * 100) + "%";
       textWidth = textPaint.measureText(text)+textPaddingSize;//左右两边多留出3px
       textLeft = getRealProgress()+textPaddingSize/2;
       canvas.drawText(text,textLeft,progressBottom,textPaint);
//画左边矩形
       mPaint.setColor(leftColor);
       rect1.set(0,progressTop,getRealProgress(),progressBottom);
       canvas.drawRect(rect1,mPaint);
画右边矩形
       mPaint.setColor(rightColor);
       rect2.set((int) (getRealProgress()+textWidth), progressTop,maxWidth,progressBottom);
       canvas.drawRect(rect2,mPaint);
   }

好吧，这里重点要讲一下这个方法，之前没有理解清楚，晚上费了我一个多小时，最后第二天想通的，唉，人笨了没有办法；

Rect rect1 = new Rect();
rect1.set(startX,startY,endX(),endY);
startX:在总宽度的左边开始位置
startY:在总高度的上边开始位置
endX:在总宽度的右边结束位置
endY:在总高度的下边结束位置

来张图：

所以如果你这样设置的话rect1.set(0,0,maxWidth,maxHeight);你的进度条就会和父类重合，此时你中间的文字设置大一点的话就会这样：

所以应该这样设计
rect1.set(0,maxHeight*0.3,maxWidth,maxHeight*0.6);
这时候字体就可以比进度条大了

/**********************全部代码***********************************/
public class HoriProgressBar extends View {
    private Rect rect1,rect2;
    private Paint mPaint,textPaint;
    private int maxWidth,progressTop,progressBottom,progress,allProgress = 100;
    private String text;
    private float textWidth,textLeft,textSize,textPaddingSize;
    private int backgroundColor,textColor,leftColor,rightColor;

    public HoriProgressBar(Context context) {
        this(context,null);
    }

    public HoriProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public HoriProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.HoriProgressBar);
        textPaddingSize = typedArray.getDimension(R.styleable.HoriProgressBar_horiProgressBar_text_padding,20);
        textSize = typedArray.getDimension(R.styleable.HoriProgressBar_horiProgressBar_text_size,16);
        backgroundColor = typedArray.getColor(R.styleable.HoriProgressBar_horiProgressBar_background_color,Color.BLACK);
        textColor = typedArray.getColor(R.styleable.HoriProgressBar_horiProgressBar_text_color,Color.BLACK);
        leftColor = typedArray.getColor(R.styleable.HoriProgressBar_horiProgressBar_text_color,Color.GREEN);
        rightColor = typedArray.getColor(R.styleable.HoriProgressBar_horiProgressBar_text_color,Color.GREEN);
        typedArray.recycle();

        rect1 = new Rect();
        rect2 = new Rect();
        mPaint = new Paint();
        textPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(backgroundColor);
        textPaint.setAntiAlias(true);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        maxWidth = getMeasuredWidth()- getPaddingRight() - getPaddingLeft();

        maxHeight = getMeasuredHeight();
        progressTop = (int) (maxHeight*0.4);
        progressBottom = (int) (maxHeight*0.7);
    }

    private int maxHeight;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        text = (int)(getPercent() * 100) + "%";
        textWidth = textPaint.measureText(text)+textPaddingSize;//左右两边多留出3px
        textLeft = getRealProgress()+textPaddingSize/2;
        canvas.drawText(text,textLeft,progressBottom,textPaint);


        mPaint.setColor(leftColor);
        rect1.set(0,progressTop,getRealProgress(),progressBottom);
        canvas.drawRect(rect1,mPaint);
//
        mPaint.setColor(rightColor);
        rect2.set((int) (getRealProgress()+textWidth), progressTop,maxWidth,progressBottom);
        canvas.drawRect(rect2,mPaint);
    }

    private int getRealProgress(){
        return (int) (getPercent()*(maxWidth-textWidth));//这里要注意，要剪掉textWidth的长，要不然最后文字会被推出去
    }

    private float getPercent(){
        return progress*1.0f/allProgress;
    }

    public void setProgress(int progress){
        this.progress = progress;
        post(new Runnable() {
            @Override
            public void run() {
                invalidate();
            }
        });
    }
}

当然请不要忘了自定义属性

<declare-styleable name="HoriProgressBar">
    <attr name="horiProgressBar_background_color" format="color"/>
    <attr name="horiProgressBar_text_color" format="color"/>
    <attr name="horiProgressBar_text_size" format="dimension"/>
    <attr name="horiProgressBar_text_padding" format="dimension"/>
    <attr name="horiProgressBar_left_color" format="color"/>
    <attr name="horiProgressBar_right_color" format="color"/>
</declare-styleable>