這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Android中怎么實(shí)現(xiàn)一個(gè)底部帶刻度的進(jìn)度條樣式,文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
10余年的澤普網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整澤普建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“澤普網(wǎng)站設(shè)計(jì)”,“澤普網(wǎng)站推廣”以來(lái),每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
首先得繼承View,由于這個(gè)控件比較簡(jiǎn)單,我就沒(méi)有搞那種在布局文件中設(shè)值的屬性了,繼承之后第一步,需要測(cè)量布局,得到畫(huà)布的大小,這個(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; }
這邊拿到畫(huà)布的大小,設(shè)置進(jìn)度條顯示的寬度,我這邊設(shè)置的為畫(huà)布寬度的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; }
然后就是初始化畫(huà)筆了,具體我就不多贅述了,我使用了五個(gè)畫(huà)筆,分別是進(jìn)度條背景底框,進(jìn)度,刻度繪制,刻度下的字,當(dāng)前數(shù)值的文字具體看代碼。
private void initPaint() { //畫(huà)進(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); //畫(huà)進(jìn)度的畫(huà)筆,實(shí)心 paintProgress = new Paint(); paintProgress.setAntiAlias(true); paintProgress.setStyle(Paint.Style.FILL); paintProgress.setColor(getResources().getColor(R.color.progressfill)); paintProgress.setDither(true); //畫(huà)刻度的畫(huà)筆 paintNum = new Paint(); paintNum.setAntiAlias(true); paintNum.setColor(getResources().getColor(R.color.progresstext)); paintNum.setStrokeWidth(2); paintNum.setStyle(Paint.Style.FILL); paintNum.setDither(true); //畫(huà)刻度數(shù)值的畫(huà)筆 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); //畫(huà)數(shù)值的畫(huà)筆 paintText = new Paint(); paintText.setAntiAlias(true); paintText.setColor(getResources().getColor(R.color.progresstext)); paintText.setStrokeWidth(1); paintText.setStyle(Paint.Style.FILL);//實(shí)心畫(huà)筆 paintText.setDither(true); }
接下來(lái)就是onDraw方法進(jìn)行繪制了,用canvas繪制,繪制的起點(diǎn)是你畫(huà)布的左上角,橫向?yàn)閤,縱向?yàn)閥,所以繪制的時(shí)候只要確定好x,y的坐標(biāo),那就好畫(huà)了。
@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í)很容易繪制,就是畫(huà)兩個(gè)矩形,一個(gè)地沒(méi)有進(jìn)度的矩形,另一個(gè)是當(dāng)前進(jìn)度的矩形就行了 ,percent是當(dāng)前進(jìn)度的百分比,之所以加個(gè)leftPadding是因?yàn)槿绻麖?開(kāi)始就頂?shù)疆?huà)布左邊了,后面畫(huà)刻度下的字體就會(huì)存在截?cái)喱F(xiàn)象,顯示不全。drawRect的每個(gè)參數(shù)是什么意思我就不多說(shuō)了,這個(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(); //記錄畫(huà)布狀態(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è)刻度,可以自行修改,怎么畫(huà)出刻度線,重要的就是通過(guò)canvas的平移,translate來(lái)實(shí)現(xiàn),x為每次繪制的位置,畫(huà)一條就會(huì)平移一段距離再畫(huà)一條,原理就是這樣。numY的參數(shù)其實(shí)就是與畫(huà)布頂點(diǎn)的距離,由于我的進(jìn)度條設(shè)置的是30的高度,刻度要緊挨著進(jìn)度底部,所以開(kāi)始畫(huà)的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; }
接下來(lái)就是繪制右邊顯示當(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)單算出來(lái),具體怎么算的再上面的代碼中。
基本上這個(gè)進(jìn)度條就完工了,由于是做記錄,就沒(méi)寫(xiě)的很詳細(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;//開(kāi)始的數(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() { //畫(huà)進(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); //畫(huà)進(jìn)度的畫(huà)筆,實(shí)心 paintProgress = new Paint(); paintProgress.setAntiAlias(true); paintProgress.setStyle(Paint.Style.FILL); paintProgress.setColor(getResources().getColor(R.color.progressfill)); paintProgress.setDither(true); //畫(huà)刻度的畫(huà)筆 paintNum = new Paint(); paintNum.setAntiAlias(true); paintNum.setColor(getResources().getColor(R.color.progresstext)); paintNum.setStrokeWidth(2); paintNum.setStyle(Paint.Style.FILL); paintNum.setDither(true); //畫(huà)刻度數(shù)值的畫(huà)筆 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); //畫(huà)數(shù)值的畫(huà)筆 paintText = new Paint(); paintText.setAntiAlias(true); paintText.setColor(getResources().getColor(R.color.progresstext)); paintText.setStrokeWidth(1); paintText.setStyle(Paint.Style.FILL);//實(shí)心畫(huà)筆 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(); //記錄畫(huà)布狀態(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è)短刻度,加起來(lái)一組5 if (tikeStrArray != null && tikeStrArray.length != 0) { //根據(jù)需要繪制的刻度數(shù)組大小計(jì)算刻度總數(shù) mTikeCount = (tikeStrArray.length - 1) * tikeGroup + 1; } else { tikeStrArray = new float[0]; mTikeCount = 36; } }}
上述就是小編為大家分享的Android中怎么實(shí)現(xiàn)一個(gè)底部帶刻度的進(jìn)度條樣式了,如果剛好有類(lèi)似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。