Android實(shí)現(xiàn)底部帶刻度的進(jìn)度條樣式

更新時(shí)間：2019年10月16日 13:39:32 作者：程序員的咆哮

由于公司需要一個(gè)帶刻度的進(jìn)度條樣式，因?yàn)榭潭刃枰獎(jiǎng)討B(tài)去改變，所以換背景圖片的方案肯定是不行的，唯一的辦法就是自己繪制一個(gè)進(jìn)度條，下面小編給大家?guī)砹薃ndroid實(shí)現(xiàn)底部帶刻度的進(jìn)度條樣式及實(shí)例代碼，需要的朋友參考下吧

由于公司需要一個(gè)帶刻度的進(jìn)度條樣式，網(wǎng)上找了一圈，有些是加個(gè)刻度的背景圖片，這樣對(duì)于我的項(xiàng)目來說，不合適，因?yàn)榭潭刃枰獎(jiǎng)討B(tài)去改變，所以換背景圖片的方案肯定是不行的，唯一的辦法就是自己繪制一個(gè)進(jìn)度條，進(jìn)度條的繪制相對(duì)來說是比較簡(jiǎn)單的。我自己對(duì)自定義控件這一塊也不是很了解，全當(dāng)學(xué)習(xí)一下吧，寫這篇博客也是記錄一下，如果有人也有這樣樣式的進(jìn)度條需求，也可以直接拿過去用，比較自己也用過很多大神的東西。

開始就先上圖吧

樣式就是上圖這樣了，由于是通過canvas繪制的，所以想要的樣式都可以自己去繪制，我這邊就搞一個(gè)簡(jiǎn)單的就行了。

首先得繼承View，由于這個(gè)控件比較簡(jiǎn)單，我就沒有搞那種在布局文件中設(shè)值的屬性了，繼承之后第一步，需要測(cè)量布局，得到畫布的大小，這個(gè)值其實(shí)就是我們?cè)诓季治募性O(shè)置的控件的寬高。

@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;
  }

這邊拿到畫布的大小，設(shè)置進(jìn)度條顯示的寬度，我這邊設(shè)置的為畫布寬度的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;
  }

然后就是初始化畫筆了，具體我就不多贅述了，我使用了五個(gè)畫筆，分別是進(jìn)度條背景底框，進(jìn)度，刻度繪制，刻度下的字，當(dāng)前數(shù)值的文字具體看代碼。

private void initPaint() {
    //畫進(jìn)度條靜態(tài)空心背景
    paintProgressBackground = new Paint();
    paintProgressBackground.setAntiAlias(true);
    paintProgressBackground.setStyle(Paint.Style.STROKE);
    paintProgressBackground.setColor(getResources().getColor(R.color.progressborder));
    paintProgressBackground.setDither(true);
    //畫進(jìn)度的畫筆，實(shí)心
    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);
    //畫刻度數(shù)值的畫筆
    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);
    //畫數(shù)值的畫筆
    paintText = new Paint();
    paintText.setAntiAlias(true);
    paintText.setColor(getResources().getColor(R.color.progresstext));
    paintText.setStrokeWidth(1);
    paintText.setStyle(Paint.Style.FILL);//實(shí)心畫筆
    paintText.setDither(true);
 
  }

接下來就是onDraw方法進(jìn)行繪制了，用canvas繪制，繪制的起點(diǎn)是你畫布的左上角，橫向?yàn)閤，縱向?yàn)閥，所以繪制的時(shí)候只要確定好x,y的坐標(biāo)，那就好畫了。

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

進(jìn)度條其實(shí)很容易繪制，就是畫兩個(gè)矩形，一個(gè)地沒有進(jìn)度的矩形，另一個(gè)是當(dāng)前進(jìn)度的矩形就行了，percent是當(dāng)前進(jìn)度的百分比，之所以加個(gè)leftPadding是因?yàn)槿绻麖?開始就頂?shù)疆嫴甲筮吜?，后面畫刻度下的字體就會(huì)存在截?cái)喱F(xiàn)象，顯示不全。drawRect的每個(gè)參數(shù)是什么意思我就不多說了，這個(gè)很多文章都有介紹。

 /**
   * 繪制刻度和刻度下的數(shù)字
   * @param canvas
   * @param percent
   */
  private void drawScale(Canvas canvas,float percent){
    float span = progressWidth/8f;
    for (int i=0;i<9;i++){
      canvas.save(); //記錄畫布狀態(tài)
      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();
    }
  }

跟其他進(jìn)度條不同的是，帶刻度的最重要是怎么繪制刻度了，我這邊默認(rèn)總共9個(gè)刻度，可以自行修改，怎么畫出刻度線，重要的就是通過canvas的平移，translate來實(shí)現(xiàn)，x為每次繪制的位置，畫一條就會(huì)平移一段距離再畫一條，原理就是這樣。numY的參數(shù)其實(shí)就是與畫布頂點(diǎn)的距離，由于我的進(jìn)度條設(shè)置的是30的高度，刻度要緊挨著進(jìn)度底部，所以開始畫的y坐標(biāo)也是30，+10是繪制刻度線的長(zhǎng)度，所以刻度線長(zhǎng)度就是10?？潭认碌奈淖郑彩谦@取文字的寬度，取中心位置。

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

接下來就是繪制右邊顯示當(dāng)前數(shù)組的文字了，只要確定好位置，就很簡(jiǎn)單了。

  * 繪制顯示的數(shù)值
   * @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);
  }

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

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

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;
/**
 * 帶刻度的進(jìn)度條
 */
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;//開始的數(shù)值
  private float maxNum;//最大的數(shù)值
  private float[] tikeStrArray = null;
  private int tikeGroup;
  private int mTikeCount;//刻度的個(gè)數(shù)
  private Paint paintText;
  private String unit = "m";//顯示單位
  private String numerical;
  private int leftPadding = 25;//左邊距
  private int textSpan = 2;//數(shù)值文字與進(jìn)度條的間隔
  private int progressHeight = 30;//進(jìn)度條高度
  private float numY = 30;//在進(jìn)度條底部繪制，相當(dāng)于進(jìn)度條的高度
  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() {
    //畫進(jìn)度條靜態(tài)空心背景
    paintProgressBackground = new Paint();
    paintProgressBackground.setAntiAlias(true);
    paintProgressBackground.setStyle(Paint.Style.STROKE);
    paintProgressBackground.setColor(getResources().getColor(R.color.progressborder));
    paintProgressBackground.setDither(true);
    //畫進(jìn)度的畫筆，實(shí)心
    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);
    //畫刻度數(shù)值的畫筆
    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);
    //畫數(shù)值的畫筆
    paintText = new Paint();
    paintText.setAntiAlias(true);
    paintText.setColor(getResources().getColor(R.color.progresstext));
    paintText.setStrokeWidth(1);
    paintText.setStyle(Paint.Style.FILL);//實(shí)心畫筆
    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);
    //進(jìn)度條的底框
    canvas.drawRect(0+leftPadding,0,progressWidth+leftPadding,progressHeight,paintProgressBackground);
    //進(jìn)度條的當(dāng)前進(jìn)度
    canvas.drawRect(0+leftPadding,0,progressWidth*percent+leftPadding,progressHeight,paintProgress);
    drawScale(canvas,percent);
    drawText(canvas,percent);
  }
  /**
   * 繪制刻度和刻度下的數(shù)字
   * @param canvas
   * @param percent
   */
  private void drawScale(Canvas canvas,float percent){
    float span = progressWidth/8f;
    for (int i=0;i<9;i++){
      canvas.save(); //記錄畫布狀態(tài)
      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();
    }
  }
  /**
   * 繪制顯示的數(shù)值
   * @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);
  }
  /**
   * 設(shè)置百分比
   * @param percent
   */
  public void setPercent(int percent) {
     this.percent = percent / 100f;
    invalidate();
  }
  /**
   * 設(shè)置起始值
   * @param startNum
   */
  public void setStartNum(float startNum) {
    this.startNum = startNum;
  }
  /**
   * 設(shè)置最大值
   * @param maxNum
   */
  public void setMaxNum(float maxNum) {
    this.maxNum = maxNum;
    float[] tikeintArray = new float[9];
    //默認(rèn)8個(gè)大刻度
    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; // 默認(rèn)1個(gè)長(zhǎng)刻度間隔4個(gè)短刻度，加起來一組5
    if (tikeStrArray != null && tikeStrArray.length != 0) {
      //根據(jù)需要繪制的刻度數(shù)組大小計(jì)算刻度總數(shù)
      mTikeCount = (tikeStrArray.length - 1) * tikeGroup + 1;
    } else {
      tikeStrArray = new float[0];
      mTikeCount = 36;
    }
  }
}

總結(jié)

以上所述是小編給大家介紹的Android實(shí)現(xiàn)底部帶刻度的進(jìn)度條樣式,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: