您好,登錄后才能下訂單哦!
小編這次要給大家分享的是android中如何自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
一、測(cè)試截圖
二、實(shí)現(xiàn)原理
package com.freedomanlib; import java.util.Timer; import java.util.TimerTask; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Typeface; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; /** * @name 自定義車輛數(shù)據(jù)統(tǒng)計(jì)比重環(huán) * 1、比重環(huán)由底環(huán)(灰色)、里程環(huán)(紅色)、平均速度環(huán)(黃色)、行駛時(shí)間環(huán)(藍(lán)色)、超速次數(shù)環(huán)(綠色)、環(huán)中間評(píng)級(jí)、指示器組成 * ,其中四個(gè)數(shù)據(jù)統(tǒng)計(jì)環(huán)和底環(huán)是同心圓、圓心處有評(píng)分文本,圓環(huán)外是四個(gè)統(tǒng)計(jì)指示器。<br> * 2、四個(gè)統(tǒng)計(jì)環(huán)是四個(gè)弧線,弧度由外界提供數(shù)據(jù),并動(dòng)態(tài)顯示在界面上。<br> * 3、評(píng)分等級(jí)分為三種:未評(píng)分、正在評(píng)分、評(píng)分完成,當(dāng)用戶點(diǎn)擊中間區(qū)域時(shí)開啟評(píng)分,評(píng)分結(jié)束自動(dòng)停止。<br> * 4、外側(cè)對(duì)應(yīng)的四個(gè)指示器上結(jié)構(gòu)上包括:指示器位置的小圓圈、折線連接線、指示文本、文本數(shù)據(jù)顯示具體的數(shù)值。<br> * * @author Freedoman * @date 2014-10-27 */ public class CirStatisticGraph extends View { private static final String TAG = "CirStatisticGraph"; /** * @name CenterPoint * @Descripation 中心點(diǎn)<br> */ class CenterPoint { float x; float y; } /** * 邊界寬高、中心坐標(biāo)、外環(huán)和內(nèi)環(huán)半徑 */ private float boundsWidth; private float boundsHeigh; private CenterPoint centerPoint = new CenterPoint(); private float radius; private float paintWidth; private float genPaintWidth; /** * 幾種不同的畫筆 */ private Paint defaultPaint; private Paint genPaint; private Paint progressTextPaint; private Paint flagPaint; /** * 進(jìn)度 */ private int curProgress; private int targetProgress = 88; private boolean complete; private int mileage = 128; private int averageSpeed = 78; private float goTime = 1.5f; private int overSpeedCount = 3; /** * 構(gòu)造 * * @param context */ public CirStatisticGraph(Context context) { this(context, null); } public CirStatisticGraph(Context context, AttributeSet attrs) { super(context, attrs, 0); } public CirStatisticGraph(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); this.initialize(); } /** * 初始化 */ private void initialize() { // 底環(huán)畫筆 defaultPaint = new Paint(); defaultPaint.setColor(Color.argb(0xEE, 0x8E, 0x8E, 0x8E)); defaultPaint.setStyle(Paint.Style.STROKE); defaultPaint.setStrokeWidth(paintWidth); defaultPaint.setAntiAlias(true); // 比重環(huán)畫筆 genPaint = new Paint(); genPaint.setStyle(Paint.Style.STROKE); genPaint.setStrokeWidth(genPaintWidth); genPaint.setAntiAlias(true); // 中心進(jìn)度文本和評(píng)級(jí)畫筆 progressTextPaint = new Paint(); progressTextPaint.setColor(Color.WHITE); progressTextPaint.setStyle(Paint.Style.STROKE); progressTextPaint.setStrokeWidth(0); progressTextPaint.setTypeface(Typeface.DEFAULT_BOLD); // 指示器畫筆 flagPaint = new Paint(); flagPaint.setColor(Color.WHITE); flagPaint.setStyle(Paint.Style.STROKE); flagPaint.setStrokeWidth(3); flagPaint.setAntiAlias(true); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 繪制區(qū)域的寬高 boundsWidth = getWidth(); boundsHeigh = getHeight(); centerPoint.x = boundsWidth / 2; centerPoint.y = boundsHeigh / 2; radius = boundsHeigh * 1 / 3; paintWidth = 50; genPaintWidth = paintWidth / 7; initialize(); } /** * 啟動(dòng)進(jìn)度動(dòng)畫 */ public void start() { curProgress = 0; if (targetProgress == 0) { targetProgress = 88; } final Timer timer = new Timer(); TimerTask timerTask = new TimerTask() { @Override public void run() { curProgress++; if (curProgress == targetProgress) { timer.cancel(); } postInvalidate(); } }; timer.schedule(timerTask, 0, 20); } @SuppressLint("DrawAllocation") @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); // 底環(huán)(灰色) canvas.drawCircle(centerPoint.x, centerPoint.y, radius, defaultPaint); // 很重要的一個(gè)半徑(最外層環(huán)即里程環(huán)的半徑) float sroundRadius = radius + paintWidth / 2 - genPaintWidth / 2; // 里程比重環(huán)(紅色) genPaint.setColor(Color.argb(0xEE, 0xFF, 0x35, 0x9A)); RectF oval1 = new RectF(centerPoint.x - sroundRadius, centerPoint.y - sroundRadius, centerPoint.x + sroundRadius, centerPoint.y + sroundRadius); canvas.drawArc(oval1, -90, 300, false, genPaint); // 里程比重環(huán)的指示器位置(勾股定理計(jì)算坐標(biāo)) float temp = sroundRadius; float relativePoint = (float) Math.sqrt(temp * temp / 2); canvas.drawCircle(centerPoint.x - relativePoint, centerPoint.y - relativePoint, radius / 12, flagPaint); // 連線 float[] pts1 = new float[8]; pts1[0] = centerPoint.x - relativePoint - radius / 24; pts1[1] = centerPoint.y - relativePoint - radius / 24; pts1[2] = centerPoint.x - relativePoint - 80; pts1[3] = centerPoint.y - relativePoint - 40; pts1[4] = pts1[2]; pts1[5] = pts1[3]; pts1[6] = pts1[4] - 50; pts1[7] = pts1[5]; canvas.drawLines(pts1, flagPaint); // 文本 progressTextPaint.setTextSize(30); String txt = "里程"; float wt = progressTextPaint.measureText(txt); canvas.drawText(txt, pts1[6] - wt - 10, pts1[7] + 15, progressTextPaint); if (complete) { canvas.drawText(mileage + "km", pts1[6] - wt - 10, pts1[7] + 50, progressTextPaint); } // 平均速度環(huán)(黃色) genPaint.setColor(Color.argb(0xEE, 0xF7, 0x50, 0x00)); RectF oval2 = new RectF(centerPoint.x - sroundRadius + 2 * genPaintWidth, centerPoint.y - sroundRadius + 2 * genPaintWidth, centerPoint.x + sroundRadius - 2 * genPaintWidth, centerPoint.y + sroundRadius - 2 * genPaintWidth); canvas.drawArc(oval2, 0, 280, false, genPaint); // 平均速度環(huán)的指示器位置 temp = sroundRadius - 2 * genPaintWidth; relativePoint = (float) Math.sqrt(temp * temp / 2); canvas.drawCircle(centerPoint.x + relativePoint, centerPoint.y - relativePoint, radius / 12, flagPaint); // 連接線 pts1 = new float[8]; pts1[0] = centerPoint.x + relativePoint + radius / 24; pts1[1] = centerPoint.y - relativePoint - radius / 24; pts1[2] = centerPoint.x + relativePoint + 80; pts1[3] = centerPoint.y - relativePoint - 40; pts1[4] = pts1[2]; pts1[5] = pts1[3]; pts1[6] = pts1[4] + 50; pts1[7] = pts1[5]; canvas.drawLines(pts1, flagPaint); // 文本 txt = "平均速度"; wt = progressTextPaint.measureText(txt); canvas.drawText(txt, pts1[6] + 10, pts1[7] + 15, progressTextPaint); if (complete) { canvas.drawText(averageSpeed + "km/h", pts1[6] + 10, pts1[7] + 50, progressTextPaint); } // 行駛時(shí)間環(huán)(藍(lán)色)和指示 genPaint.setColor(Color.argb(0xEE, 0x00, 0x72, 0xE3)); RectF oval3 = new RectF(centerPoint.x - sroundRadius + 4 * genPaintWidth, centerPoint.y - sroundRadius + 4 * genPaintWidth, centerPoint.x + sroundRadius - 4 * genPaintWidth, centerPoint.y + sroundRadius - 4 * genPaintWidth); canvas.drawArc(oval3, 90, 270, false, genPaint); // 行駛時(shí)間環(huán)指示器的位置 temp = sroundRadius - 4 * genPaintWidth; relativePoint = (float) Math.sqrt(temp * temp / 2); canvas.drawCircle(centerPoint.x - relativePoint, centerPoint.y + relativePoint, radius / 12, flagPaint); // 連接線和文本 pts1 = new float[8]; pts1[0] = centerPoint.x - relativePoint - radius / 24; pts1[1] = centerPoint.y + relativePoint + radius / 24; pts1[2] = centerPoint.x - relativePoint - 80; pts1[3] = centerPoint.y + relativePoint + 40; pts1[4] = pts1[2]; pts1[5] = pts1[3]; pts1[6] = pts1[4] - 50; pts1[7] = pts1[5]; canvas.drawLines(pts1, flagPaint); txt = "行駛時(shí)間"; wt = progressTextPaint.measureText(txt); canvas.drawText(txt, pts1[6] - wt - 10, pts1[7] + 15, progressTextPaint); if (complete) { canvas.drawText(goTime + "h", pts1[6] - wt - 10, pts1[7] - 20, progressTextPaint); } // 超速次數(shù)環(huán)(綠色) genPaint.setColor(Color.argb(0xEE, 0x00, 0xEC, 0x00)); RectF oval4 = new RectF(centerPoint.x - sroundRadius + 6 * genPaintWidth, centerPoint.y - sroundRadius + 6 * genPaintWidth, centerPoint.x + sroundRadius - 6 * genPaintWidth, centerPoint.y + sroundRadius - 6 * genPaintWidth); canvas.drawArc(oval4, 0, 290, false, genPaint); // 超速次數(shù)環(huán)指示器的位置 temp = sroundRadius - 6 * genPaintWidth; relativePoint = (float) Math.sqrt(temp * temp / 2); canvas.drawCircle(centerPoint.x + relativePoint, centerPoint.y + relativePoint, radius / 12, flagPaint); // 連接線 pts1 = new float[8]; pts1[0] = centerPoint.x + relativePoint + radius / 24; pts1[1] = centerPoint.y + relativePoint + radius / 24; pts1[2] = centerPoint.x + relativePoint + 80; pts1[3] = centerPoint.y + relativePoint + 40; pts1[4] = pts1[2]; pts1[5] = pts1[3]; pts1[6] = pts1[4] + 50; pts1[7] = pts1[5]; canvas.drawLines(pts1, flagPaint); // 文本 txt = "超速次數(shù)"; wt = progressTextPaint.measureText(txt); canvas.drawText(txt, pts1[6] + 10, pts1[7] + 15, progressTextPaint); if (complete) { canvas.drawText(overSpeedCount + "次", pts1[6] + 10, pts1[7] - 20, progressTextPaint); } // 環(huán)中心進(jìn)度文本(動(dòng)態(tài)迭加的) int curPercent = curProgress; progressTextPaint.setTextSize(60); float ww = progressTextPaint.measureText(curPercent + "%"); canvas.drawText(curPercent + "%", centerPoint.x - ww / 2, centerPoint.y, progressTextPaint); // 評(píng)級(jí)提示 progressTextPaint.setTextSize(25); float w = 0; String text = ""; if (curPercent == 0) { // 暫未評(píng)級(jí) text = "暫未評(píng)級(jí)"; w = progressTextPaint.measureText(text); complete = false; } else if (curPercent < targetProgress) { // 評(píng)級(jí)中... text = "評(píng)級(jí)中..."; w = progressTextPaint.measureText(text); } else if (curPercent == targetProgress) { // 評(píng)級(jí)完成 text = "評(píng)級(jí)完成"; w = progressTextPaint.measureText(text); complete = true; postInvalidate(); } canvas.drawText(text, centerPoint.x - w / 2, centerPoint.y + 40, progressTextPaint); } /** * 點(diǎn)擊評(píng)分區(qū)域,進(jìn)行評(píng)分 * * @param event * @return */ @Override public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); if (x > centerPoint.x - radius && x < centerPoint.x + radius && y > centerPoint.y - radius && y < centerPoint.y + radius) { Log.i(TAG, ">>>"); start(); } return super.onTouchEvent(event); } }
看完這篇關(guān)于android中如何自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。