android自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫
更新時(shí)間：2020年07月16日 16:02:41 作者：Freedoman1990
這篇文章主要為大家詳細(xì)介紹了android自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了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);
}
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android實(shí)現(xiàn)動(dòng)畫效果的自定義下拉菜單功能
- Android自定義view仿QQ的Tab按鈕動(dòng)畫效果(示例代碼)
- Android自定義view之圍棋動(dòng)畫效果的實(shí)現(xiàn)
- Android動(dòng)畫系列之屬性動(dòng)畫的基本使用教程
- android實(shí)現(xiàn)加載動(dòng)畫對(duì)話框
- Android動(dòng)畫系列之幀動(dòng)畫和補(bǔ)間動(dòng)畫的示例代碼
- Android實(shí)現(xiàn)長按圓環(huán)動(dòng)畫View效果的思路代碼
- android實(shí)現(xiàn)截圖并動(dòng)畫消失效果的思路詳解
- Android 自定義加載動(dòng)畫Dialog彈窗效果的示例代碼
- Android自定義帶動(dòng)畫效果的圓形ProgressBar
- Android實(shí)現(xiàn)美團(tuán)外賣底部導(dǎo)航欄動(dòng)畫
- Android 使用cos和sin繪制復(fù)合曲線動(dòng)畫
相關(guān)文章
Android優(yōu)雅地處理按鈕重復(fù)點(diǎn)擊的幾種方法
這篇文章主要介紹了Android優(yōu)雅地處理按鈕重復(fù)點(diǎn)擊的幾種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Android插件化之資源動(dòng)態(tài)加載的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android仿新浪微博、QQ空間等帖子顯示,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
android浮層圖片拖動(dòng)并且可點(diǎn)擊效果
這篇文章主要為大家詳細(xì)介紹了android浮層的圖片拖動(dòng)并且可點(diǎn)擊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android帶進(jìn)度條的下載圖片示例（AsyncTask異步任務(wù)）
本文主要介紹Android帶進(jìn)度條的下載圖片示例（AsyncTask異步任務(wù)）的方法解析。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
深入理解與運(yùn)行Android Jetpack組件之ViewModel
ViewModel是Android Jetpack組件之一,是一種用于管理UI相關(guān)數(shù)據(jù)的架構(gòu)組件,它能夠幫助開發(fā)者實(shí)現(xiàn)優(yōu)雅的數(shù)據(jù)驅(qū)動(dòng)和生命周期管理,本文將深入淺出地介紹ViewModel的使用和原理,帶你一步步掌握這個(gè)強(qiáng)大的組件2023-08-08
Android線程的優(yōu)先級(jí)設(shè)置方法技巧
對(duì)于Android平臺(tái)上的線程優(yōu)先級(jí)設(shè)置來說可以處理很多并發(fā)線程的阻塞問題，比如很多無關(guān)緊要的線程會(huì)占用大量的CPU時(shí)間，雖然通過了MultiThread來解決慢速I/O但是合理分配優(yōu)先級(jí)對(duì)于并發(fā)編程來說十分重要2016-02-02
選中item，其字體設(shè)置為#3197FF，未選中的，其字體為#FFFFFF，下面與大家分享下listview怎么改變選中行字體顏色，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要為大家介紹了Android 各版本兼容性適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Android使用內(nèi)置WebView打開TextView超鏈接的實(shí)現(xiàn)方法
這篇文章主要介紹了Android使用內(nèi)置WebView打開TextView超鏈接的實(shí)現(xiàn)方法，文中給出了詳細(xì)的示例代碼，對(duì)各位Android開發(fā)者們具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03