Android中怎么實現一個底部帶刻度的進度條樣式

這期內容當中小編將會給大家帶來有關Android中怎么實現一個底部帶刻度的進度條樣式，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

首先得繼承View，由于這個控件比較簡單，我就沒有搞那種在布局文件中設值的屬性了，繼承之后第一步，需要測量布局，得到畫布的大小，這個值其實就是我們在布局文件中設置的控件的寬高。

@Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    int realWidth = startMeasure(widthMeasureSpec);    int realHeight = startMeasure(heightMeasureSpec);     setMeasuredDimension(realWidth, realHeight);  } private int startMeasure(int msSpec) {    int result = 0;    int mode = MeasureSpec.getMode(msSpec);    int size = MeasureSpec.getSize(msSpec);    if (mode == MeasureSpec.EXACTLY) {      result = size;    } else {      result = PxUtils.dpToPx(400, mContext);    }    return result;  }

這邊拿到畫布的大小，設置進度條顯示的寬度，我這邊設置的為畫布寬度的80%

@Override  protected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);    mWidth = getWidth();    mHight = getHeight();    progressWidth = mWidth*0.8f;  }

然后就是初始化畫筆了，具體我就不多贅述了，我使用了五個畫筆，分別是進度條背景底框，進度，刻度繪制，刻度下的字，當前數值的文字具體看代碼。

private void initPaint() {    //畫進度條靜態空心背景    paintProgressBackground = new Paint();    paintProgressBackground.setAntiAlias(true);    paintProgressBackground.setStyle(Paint.Style.STROKE);    paintProgressBackground.setColor(getResources().getColor(R.color.progressborder));    paintProgressBackground.setDither(true);    //畫進度的畫筆，實心    paintProgress = new Paint();    paintProgress.setAntiAlias(true);    paintProgress.setStyle(Paint.Style.FILL);    paintProgress.setColor(getResources().getColor(R.color.progressfill));    paintProgress.setDither(true);    //畫刻度的畫筆    paintNum = new Paint();    paintNum.setAntiAlias(true);    paintNum.setColor(getResources().getColor(R.color.progresstext));    paintNum.setStrokeWidth(2);    paintNum.setStyle(Paint.Style.FILL);    paintNum.setDither(true);    //畫刻度數值的畫筆    paintTikeStr = new Paint();    paintTikeStr.setAntiAlias(true);    paintTikeStr.setStyle(Paint.Style.FILL);    paintTikeStr.setTextAlign(Paint.Align.LEFT);    paintTikeStr.setColor(getResources().getColor(R.color.progresstext));    paintTikeStr.setTextSize(16);    //畫數值的畫筆    paintText = new Paint();    paintText.setAntiAlias(true);    paintText.setColor(getResources().getColor(R.color.progresstext));    paintText.setStrokeWidth(1);    paintText.setStyle(Paint.Style.FILL);//實心畫筆    paintText.setDither(true);   }

接下來就是onDraw方法進行繪制了，用canvas繪制，繪制的起點是你畫布的左上角，橫向為x，縱向為y，所以繪制的時候只要確定好x,y的坐標，那就好畫了。

@Override  protected void onDraw(Canvas canvas) {    super.onDraw(canvas);        //進度條的底框    canvas.drawRect(0+leftPadding,0,progressWidth+leftPadding,progressHeight,paintProgressBackground);    //進度條的當前進度    canvas.drawRect(0+leftPadding,0,progressWidth*percent+leftPadding,progressHeight,paintProgress);    drawScale(canvas,percent);     drawText(canvas,percent);  }

進度條其實很容易繪制，就是畫兩個矩形，一個地沒有進度的矩形，另一個是當前進度的矩形就行了 ，percent是當前進度的百分比，之所以加個leftPadding是因為如果從0開始就頂到畫布左邊了，后面畫刻度下的字體就會存在截斷現象，顯示不全。drawRect的每個參數是什么意思我就不多說了，這個很多文章都有介紹。

/**   * 繪制刻度和刻度下的數字   * @param canvas   * @param percent   */  private void drawScale(Canvas canvas,float percent){    float span = progressWidth/8f;    for (int i=0;i<9;i++){      canvas.save(); //記錄畫布狀態      canvas.translate(span*i+leftPadding, 0);      canvas.drawLine(0,numY,0,numY+10,paintNum);      String text = String.valueOf(tikeStrArray[i]);      Paint.FontMetricsInt fontMetrics = paintTikeStr.getFontMetricsInt();      float baseline = ((numY + 20) + (fontMetrics.bottom - fontMetrics.top) / 2);      canvas.drawText(text, -getTextViewLength(paintTikeStr, text) / 2, baseline, paintTikeStr);      canvas.restore();    }  }

跟其他進度條不同的是，帶刻度的最重要是怎么繪制刻度了，我這邊默認總共9個刻度，可以自行修改，怎么畫出刻度線，重要的就是通過canvas的平移，translate來實現，x為每次繪制的位置，畫一條就會平移一段距離再畫一條，原理就是這樣。numY的參數其實就是與畫布頂點的距離，由于我的進度條設置的是30的高度，刻度要緊挨著進度底部，所以開始畫的y坐標也是30，+10是繪制刻度線的長度，所以刻度線長度就是10。刻度下的文字，也是獲取文字的寬度，取中心位置。

private float getTextViewLength(Paint paint, String text) {    if (TextUtils.isEmpty(text)) return 0;    float textLength = paint.measureText(text);    return textLength;  }

接下來就是繪制右邊顯示當前數組的文字了，只要確定好位置，就很簡單了。

* 繪制顯示的數值   * @param canvas   * @param percent   */  private void drawText(Canvas canvas, float percent) {    if (TextUtils.isEmpty(unit)) return;    float length;    paintText.setTextSize(16);    numerical = StringUtil.floatFormat(startNum + (maxNum - startNum) * percent) + unit;    length = paintText.measureText(numerical);    canvas.drawText(numerical,progressWidth+leftPadding+textSpan , length / 2, paintText);  }

顯示的值是多少，也很簡單算出來，具體怎么算的再上面的代碼中。

基本上這個進度條就完工了，由于是做記錄，就沒寫的很詳細了，下面貼一下全部代碼。

package com.anderson.dashboardview.view; import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.text.TextUtils;import android.util.AttributeSet;import android.util.Log;import android.view.View;import com.anderson.dashboardview.R;import com.anderson.dashboardview.util.PxUtils;import com.anderson.dashboardview.util.StringUtil;/** * 帶刻度的進度條 */public class HorizontalProgressBar extends View {  private Context mContext;  private Paint paintProgressBackground;  private Paint paintProgress;  private Paint paintNum;  private Paint paintTikeStr;  private int mWidth, mHight;  private float percent = 0;  private float progressWidth = 320;  private float startNum;//開始的數值  private float maxNum;//最大的數值  private float[] tikeStrArray = null;  private int tikeGroup;  private int mTikeCount;//刻度的個數  private Paint paintText;  private String unit = "m";//顯示單位  private String numerical;  private int leftPadding = 25;//左邊距  private int textSpan = 2;//數值文字與進度條的間隔  private int progressHeight = 30;//進度條高度  private float numY = 30;//在進度條底部繪制，相當于進度條的高度  public HorizontalProgressBar(Context context) {    super(context);    init(context);  }  public HorizontalProgressBar(Context context, AttributeSet attrs) {    super(context, attrs);    init(context);  }  public HorizontalProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    init(context);  }  private void init(Context context) {    mContext = context;    initPaint();  }  private void initPaint() {    //畫進度條靜態空心背景    paintProgressBackground = new Paint();    paintProgressBackground.setAntiAlias(true);    paintProgressBackground.setStyle(Paint.Style.STROKE);    paintProgressBackground.setColor(getResources().getColor(R.color.progressborder));    paintProgressBackground.setDither(true);    //畫進度的畫筆，實心    paintProgress = new Paint();    paintProgress.setAntiAlias(true);    paintProgress.setStyle(Paint.Style.FILL);    paintProgress.setColor(getResources().getColor(R.color.progressfill));    paintProgress.setDither(true);    //畫刻度的畫筆    paintNum = new Paint();    paintNum.setAntiAlias(true);    paintNum.setColor(getResources().getColor(R.color.progresstext));    paintNum.setStrokeWidth(2);    paintNum.setStyle(Paint.Style.FILL);    paintNum.setDither(true);    //畫刻度數值的畫筆    paintTikeStr = new Paint();    paintTikeStr.setAntiAlias(true);    paintTikeStr.setStyle(Paint.Style.FILL);    paintTikeStr.setTextAlign(Paint.Align.LEFT);    paintTikeStr.setColor(getResources().getColor(R.color.progresstext));    paintTikeStr.setTextSize(16);    //畫數值的畫筆    paintText = new Paint();    paintText.setAntiAlias(true);    paintText.setColor(getResources().getColor(R.color.progresstext));    paintText.setStrokeWidth(1);    paintText.setStyle(Paint.Style.FILL);//實心畫筆    paintText.setDither(true);  }  @Override  protected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);    mWidth = getWidth();    mHight = getHeight();    progressWidth = mWidth*0.8f;  }  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    int realWidth = startMeasure(widthMeasureSpec);    int realHeight = startMeasure(heightMeasureSpec);    setMeasuredDimension(realWidth, realHeight);  }  private int startMeasure(int msSpec) {    int result = 0;    int mode = MeasureSpec.getMode(msSpec);    int size = MeasureSpec.getSize(msSpec);    if (mode == MeasureSpec.EXACTLY) {      result = size;    } else {      result = PxUtils.dpToPx(400, mContext);    }    return result;  }  private float getTextViewLength(Paint paint, String text) {    if (TextUtils.isEmpty(text)) return 0;    float textLength = paint.measureText(text);    return textLength;  }  @Override  protected void onDraw(Canvas canvas) {    super.onDraw(canvas);    //進度條的底框    canvas.drawRect(0+leftPadding,0,progressWidth+leftPadding,progressHeight,paintProgressBackground);    //進度條的當前進度    canvas.drawRect(0+leftPadding,0,progressWidth*percent+leftPadding,progressHeight,paintProgress);    drawScale(canvas,percent);    drawText(canvas,percent);  }  /**   * 繪制刻度和刻度下的數字   * @param canvas   * @param percent   */  private void drawScale(Canvas canvas,float percent){    float span = progressWidth/8f;    for (int i=0;i<9;i++){      canvas.save(); //記錄畫布狀態      canvas.translate(span*i+leftPadding, 0);      canvas.drawLine(0,numY,0,numY+10,paintNum);      String text = String.valueOf(tikeStrArray[i]);      Paint.FontMetricsInt fontMetrics = paintTikeStr.getFontMetricsInt();      float baseline = ((numY + 20) + (fontMetrics.bottom - fontMetrics.top) / 2);      canvas.drawText(text, -getTextViewLength(paintTikeStr, text) / 2, baseline, paintTikeStr);      canvas.restore();    }  }  /**   * 繪制顯示的數值   * @param canvas   * @param percent   */  private void drawText(Canvas canvas, float percent) {    if (TextUtils.isEmpty(unit)) return;    float length;    paintText.setTextSize(16);    numerical = StringUtil.floatFormat(startNum + (maxNum - startNum) * percent) + unit;    length = paintText.measureText(numerical);    canvas.drawText(numerical,progressWidth+leftPadding+textSpan , length / 2, paintText);  }  /**   * 設置百分比   * @param percent   */  public void setPercent(int percent) {     this.percent = percent / 100f;    invalidate();  }  /**   * 設置起始值   * @param startNum   */  public void setStartNum(float startNum) {    this.startNum = startNum;  }  /**   * 設置最大值   * @param maxNum   */  public void setMaxNum(float maxNum) {    this.maxNum = maxNum;    float[] tikeintArray = new float[9];    //默認8個大刻度    tikeintArray[0] = startNum;    for (int i = 1;i<8;i++){      tikeintArray[i] = tikeintArray[i-1]+((maxNum-startNum)/8);    }    tikeintArray[8] = maxNum;    setTikeArray(tikeintArray);  }  public void setTikeArray(float[] array){    this.tikeStrArray = array;    tikeGroup = 5; // 默認1個長刻度間隔4個短刻度，加起來一組5    if (tikeStrArray != null && tikeStrArray.length != 0) {      //根據需要繪制的刻度數組大小計算刻度總數      mTikeCount = (tikeStrArray.length - 1) * tikeGroup + 1;    } else {      tikeStrArray = new float[0];      mTikeCount = 36;    }  }}

上述就是小編為大家分享的Android中怎么實現一個底部帶刻度的進度條樣式了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。