溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

android中如何自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫

發(fā)布時(shí)間:2020-07-16 17:54:16 來源:億速云 閱讀:162 作者:小豬 欄目:開發(fā)技術(shù)

小編這次要給大家分享的是android中如何自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

一、測(cè)試截圖

android中如何自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫

二、實(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ò)的話,可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

免責(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)容。

AI