溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
由于公司需要一個帶刻度的進度條樣式，網上找了一圈，有些是加個刻度的背景圖片，這樣對于我的項目來說，不合適，因為刻度需要動態去改變，所以換背景圖片的方案肯定是不行的，唯一的辦法就是自己繪制一個進度條，進度條的繪制相對來說是比較簡單的。我自己對自定義控件這一塊也不是很了解，全當學習一下吧，寫這篇博客也是記錄一下，如果有人也有這樣樣式的進度條需求，也可以直接拿過去用，比較自己也用過很多大神的東西。
開始就先上圖吧
樣式就是上圖這樣了，由于是通過canvas繪制的，所以想要的樣式都可以自己去繪制，我這邊就搞一個簡單的就行了。
首先得繼承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實現底部帶刻度的進度條樣式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
