Android自定義View：水平帶數字百分比的進度條

這個進度條可以反映真實進度，並且完成百分比的文字時隨着進度增加而移動的，所在位置也恰好是真實完成的百分比位置，效果如下：

思路如下：第一部分是左側的藍色直線，代表已經完成的進度；第二部分是右側灰色的直線，代表未完成的進度；第三部分是紅色的百分比的數字百分比文本，顯示當前確切的完成進度。

最關鍵的部分就是要確定百分比文本的確切位置，這裏用了paint的getTextBounds方法，得到文本的寬高，然後再精確確定它的位置。

view代碼如下：

public class NumberProgressView extends View {

    /**
     * 進度條畫筆的寬度（dp）
     */
    private int paintProgressWidth = 3;

    /**
     * 文字百分比的字體大小（sp）
     */
    private int paintTextSize = 20;

    /**
     * 左側已完成進度條的顏色
     */
    private int paintLeftColor = 0xff67aae4;

    /**
     * 右側未完成進度條的顏色
     */
    private int paintRightColor = 0xffaaaaaa;

    /**
     * 百分比文字的顏色
     */
    private int paintTextColor = 0xffff0077;

    /**
     * Contxt
     */
    private Context context;

    /**
     * 主線程傳過來進程 0 - 100
     */
    private int progress;

    /**
     * 得到自定義視圖的寬度
     */
    private int viewWidth;

    /**
     * 得到自定義視圖的Y軸中心點
     */
    private int viewCenterY;

    /**
     * 畫左邊已完成進度條的畫筆
     */
    private Paint paintleft = new Paint();

    /**
     * 畫右邊未完成進度條的畫筆
     */
    private Paint paintRight = new Paint();

    /**
     * 畫中間的百分比文字的畫筆
     */
    private Paint paintText = new Paint();

    /**
     * 要畫的文字的寬度
     */
    private int textWidth;

    /**
     * 畫文字時底部的座標
     */
    private float textBottomY;

    /**
     * 包裹文字的矩形
     */
    private Rect rect = new Rect();

    /**
     * 文字總共移動的長度（即從0%到100%文字左側移動的長度）
     */
    private int totalMovedLength;

    public NumberProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        // 構造器中初始化數據
        initData();
    }

    /**
     * 初始化數據
     */
    private void initData() {

        //設置進度條畫筆的寬度
        int paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth);

        //設置百分比文字的尺寸
        int paintTextSizePx = Utils.sp2px(context, paintTextSize);

        // 已完成進度條畫筆的屬性
        paintleft.setColor(paintLeftColor);
        paintleft.setStrokeWidth(paintProgressWidthPx);
        paintleft.setAntiAlias(true);
        paintleft.setStyle(Style.FILL);

        // 未完成進度條畫筆的屬性
        paintRight.setColor(paintRightColor);
        paintRight.setStrokeWidth(paintProgressWidthPx);
        paintRight.setAntiAlias(true);
        paintRight.setStyle(Style.FILL);

        // 百分比文字畫筆的屬性
        paintText.setColor(paintTextColor);
        paintText.setTextSize(paintTextSizePx);
        paintText.setAntiAlias(true);
        paintText.setTypeface(Typeface.DEFAULT_BOLD);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        getWidthAndHeight();
    }

    /**
     * 得到視圖等的高度寬度尺寸數據
     */
    private void getWidthAndHeight() {

        //得到包圍文字的矩形的寬高
        paintText.getTextBounds("000%", 0, "000%".length(), rect);
        textWidth = rect.width();
        textBottomY = viewCenterY + rect.height() / 2;

        //得到自定義視圖的高度
        int viewHeight = getMeasuredHeight();
        viewWidth = getMeasuredWidth();
        viewCenterY = viewHeight / 2;
        totalMovedLength = viewWidth - textWidth;

    }

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

        //得到float型進度
        float progressFloat = progress / 100.0f;

        //當前文字移動的長度
        float currentMovedLentgh = totalMovedLength * progressFloat;

        //畫左側已經完成的進度條，長度爲從Veiw左端到文字的左側
        canvas.drawLine(0, viewCenterY, currentMovedLentgh, viewCenterY, paintleft);

        //畫右側未完成的進度條，這個進度條的長度不是嚴格按照百分比來縮放的，因爲文字的長度會變化，所以它的長度縮放比例也會變化
        if (progress < 10) {
            canvas.drawLine(currentMovedLentgh + textWidth * 0.5f, viewCenterY, viewWidth, viewCenterY, paintRight);
        } else if (progress < 100) {
            canvas.drawLine(currentMovedLentgh + textWidth * 0.75f, viewCenterY, viewWidth, viewCenterY, paintRight);
        } else {
            canvas.drawLine(currentMovedLentgh + textWidth, viewCenterY, viewWidth, viewCenterY, paintRight);
        }

        //畫文字(注意：文字要最後畫，因爲文字和進度條可能會有重合部分，所以要最後畫文字，用文字蓋住重合的部分)
        canvas.drawText(progress + "%", currentMovedLentgh, textBottomY, paintText);
    }

    /**
     * @param progress 外部傳進來的當前進度
     */
    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }
}

調用者activity的代碼，設置進度條的進度：

public class NumberProgressBarActivity extends Activity {

    protected static final int WHAT_INCREASE = 1;
    private NumberProgressView np_numberProgressBar;
    private int progress;

    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            progress++;
            np_numberProgressBar.setProgress(progress);
            handler.sendEmptyMessageDelayed(WHAT_INCREASE, getRadomNumber(50, 200));
            if (progress >= 100) {
                handler.removeMessages(WHAT_INCREASE);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_number_progress_bar);
        np_numberProgressBar = (NumberProgressView) findViewById(R.id.np_numberProgressBar);
        Button btn_numberProgressBar = (Button) findViewById(R.id.btn_numberProgressBar);
        btn_numberProgressBar.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                increase();
            }
        });
    }

    private void increase() {
        progress = 0;
        np_numberProgressBar.setProgress(0);
        handler.removeMessages(WHAT_INCREASE);
        handler.sendEmptyMessage(WHAT_INCREASE);
    }

    /**
     * 得到兩個整數之間的一個隨機數
     *
     * @param start 較小的數
     * @param end   較大的數
     * @return
     */
    public int getRadomNumber(int start, int end) {
        return (int) (start + Math.random() * (end - start));
    }
}

工具方法：

   /**
     * 將dip或dp值轉換爲px值，保證尺寸大小不變
     */
    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    /**
     * 將sp值轉換爲px值，保證文字大小不變
     */
    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }

佈局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <com.example.viewdemo.view.NumberProgressView
        android:id="@+id/np_numberProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:background="#33890075"
        />

    <Button
        android:id="@+id/btn_numberProgressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="開始"/>

</LinearLayout>