Android自定義View——帶數字的進度條

最近看到高德地圖下載離線地圖包的進度條效果，作爲程序猿的本能就是想着怎樣實現它

剛好在學習自定義控件，這個應該不需要處理事件消息，應該還是比較簡單的。廢話少說直接上效果圖

NumProgressView.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class NumProgressView extends View{
    
	private Paint mUnreachedBarPaint;
	private Paint mReachedBarPaint;
	private Paint mTextPaint;
	private int mDrawTextEnd;
    private int mCurrentProgress = 0;
    private int mMaxProgress = 100;
	private String mCurrentDrawText;
	private float mDrawTextWidth;
	private float mDrawTextStart;
	private RectF mReachedRectF = new RectF(0, 0, 0, 0);
	private RectF mUnreachedRectF  = new RectF(0, 0, 0, 0);
	private float mReachedBarHeight = 10;
	private float mUnreachedBarHeight = 10;
	

	public int getCurrentProgress() {
		return mCurrentProgress;
	}

	public void setCurrentProgress(int mCurrentProgress) {
		this.mCurrentProgress = mCurrentProgress;
	}

	public int getMaxProgress() {
		return mMaxProgress;
	}

	public void setMaxProgress(int mMaxProgress) {
		this.mMaxProgress = mMaxProgress;
	}

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

	public NumProgressView(Context context, AttributeSet attrs) {
		 this(context, attrs, R.attr.numProgressStyle);
	}

	public NumProgressView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initializePainters();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		//1.計算到達區域、未到達區域、Text座標位置
		calculateDrawRectF();
		//2.畫左邊到達區域
		canvas.drawRect(mReachedRectF, mReachedBarPaint);
		//3.畫右邊未到達區域
		canvas.drawRect(mUnreachedRectF, mUnreachedBarPaint);
		//4.畫數字文本區域
		canvas.drawText(mCurrentDrawText, mDrawTextStart, mDrawTextEnd,mTextPaint);
		super.onDraw(canvas);
	}
	
	
	
    private void initializePainters() {
        mReachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mReachedBarPaint.setColor(Color.rgb(66, 145, 241));

        mUnreachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mUnreachedBarPaint.setColor(Color.rgb(66, 145, 241));

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.rgb(66, 145, 241));
        mTextPaint.setTextSize(24);
        
    }
	
    private void calculateDrawRectF() {
        mReachedRectF.left = getPaddingLeft();
        mReachedRectF.top = getHeight() / 2.0f - mReachedBarHeight / 2.0f;
        mReachedRectF.right = (getWidth() - getPaddingLeft() - getPaddingRight()) / (getMaxProgress() * 1.0f) * getCurrentProgress() + getPaddingLeft();
        mReachedRectF.bottom = getHeight() / 2.0f + mReachedBarHeight / 2.0f;

        mUnreachedRectF.left = mReachedRectF.right;
        mUnreachedRectF.right = getWidth() - getPaddingRight();
        mUnreachedRectF.top = getHeight() / 2.0f + -mUnreachedBarHeight / 2.0f;
        mUnreachedRectF.bottom = getHeight() / 2.0f + mUnreachedBarHeight / 2.0f;
        
        mCurrentDrawText = String.format("%d", getCurrentProgress() * 100 / getMaxProgress()) + "%";
        mDrawTextWidth = mTextPaint.measureText(mCurrentDrawText);
        mDrawTextStart = mReachedRectF.right - mDrawTextWidth;
        mDrawTextEnd = (int) ((getHeight() / 2.0f) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2.0f) - (mDrawTextWidth/2.0) - (mReachedRectF.height()/2.0));
    }
    
    
    public void increaseProgressBy(int by) {
        if (by > 0) {
            setProgress(getCurrentProgress() + by);
        }

    }

    public void setProgress(int progress) {
        if (progress <= getMaxProgress() && progress >= 0) {
            this.mCurrentProgress = progress;
            invalidate();
        }
    }

}

主要實現看 onDraw方法就可以了

	@Override
	protected void onDraw(Canvas canvas) {
		//1.計算到達區域、未到達區域、Text座標位置
		calculateDrawRectF();
		//2.畫左邊到達區域
		canvas.drawRect(mReachedRectF, mReachedBarPaint);
		//3.畫右邊未到達區域
		canvas.drawRect(mUnreachedRectF, mUnreachedBarPaint);
		//4.畫數字文本區域
		canvas.drawText(mCurrentDrawText, mDrawTextStart, mDrawTextEnd,mTextPaint);
		super.onDraw(canvas);
	}