Android 自定View實現(xiàn)仿QQ運動步數(shù)圓弧及動畫效果
更新時間：2016年10月28日 09:28:14 作者：DylanAndroid
這篇文章主要介紹了Android自定義view實現(xiàn)高仿QQ運動步數(shù)圓弧及動畫效果的實例代碼,本文涉及到繪制圓弧需要具備的知識點，需要的朋友可以參考下
在之前的Android超精準計步器開發(fā)-Dylan計步中的首頁用到了一個自定義控件，和QQ運動的界面有點類似，還有動畫效果，下面就來講一下這個View是如何繪制的。
1.先看效果圖
2.效果圖分析
功能說明：黃色的代表用戶設(shè)置的總計劃鍛煉步數(shù)，紅色的代表用戶當前所走的步數(shù)。
初步分析：完全自定義View重寫onDraw()方法，畫圓弧。
3.畫一個圓弧必備知識
在Canvas中有一個畫圓弧的方法
drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)//畫弧，
參數(shù)一是RectF對象，一個矩形區(qū)域橢圓形的界限用于定義在形狀、大小、電弧，
參數(shù)二是起始角(度)在電弧的開始，圓弧起始角度，單位為度。
參數(shù)三圓弧掃過的角度，順時針方向，單位為度,從右中間開始為零度。
參數(shù)四是如果是true(真)的話,在繪制圓弧時將圓心包括在內(nèi)，通常用來繪制扇形；如果是false(假)這將是一個弧線。
參數(shù)五是Paint對象；
對于這個方法，大家可以看一下我手繪的草圖，比較爛，表達一下這幾個參數(shù)的意思和繪制過程，畫得不好望大家見諒!
4.繪圖的準備工作
(1).獲取中心點坐標
/**中心點的x坐標*/ float centerX = (getWidth()) / 2;
(2).建立一個圓弧外的參考矩形
/**指定圓弧的外輪廓矩形區(qū)域*/ RectF rectF = new RectF(0 + borderWidth, borderWidth, 2 * centerX - borderWidth, 2 * centerX - borderWidth);
5.繪圖的主要步驟
(1).【第一步】繪制整體的黃色圓弧
/**
* 1.繪制總步數(shù)的黃色圓弧
*
* @param canvas 畫筆
* @param rectF 參考的矩形
*/
private void drawArcYellow(Canvas canvas, RectF rectF) {
Paint paint = new Paint();
/** 默認畫筆顏色，黃色 */
paint.setColor(getResources().getColor(R.color.yellow));
/** 結(jié)合處為圓弧*/
paint.setStrokeJoin(Paint.Join.ROUND);
/** 設(shè)置畫筆的樣式 Paint.Cap.Round ,Cap.SQUARE等分別為圓形、方形*/
paint.setStrokeCap(Paint.Cap.ROUND);
/** 設(shè)置畫筆的填充樣式 Paint.Style.FILL :填充內(nèi)部;Paint.Style.FILL_AND_STROKE ：填充內(nèi)部和描邊; Paint.Style.STROKE ：僅描邊*/
paint.setStyle(Paint.Style.STROKE);
/**抗鋸齒功能*/
paint.setAntiAlias(true);
/**設(shè)置畫筆寬度*/
paint.setStrokeWidth(borderWidth);
/**繪制圓弧的方法
* drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)//畫弧，
參數(shù)一是RectF對象，一個矩形區(qū)域橢圓形的界限用于定義在形狀、大小、電弧，
參數(shù)二是起始角(度)在電弧的開始，圓弧起始角度，單位為度。
參數(shù)三圓弧掃過的角度，順時針方向，單位為度,從右中間開始為零度。
參數(shù)四是如果這是true(真)的話,在繪制圓弧時將圓心包括在內(nèi)，通常用來繪制扇形；如果它是false(假)這將是一個弧線,
參數(shù)五是Paint對象；
*/
canvas.drawArc(rectF, startAngle, angleLength, false, paint);
}
(2).【第二步】繪制當前進度的紅色圓弧
/**
* 2.繪制當前步數(shù)的紅色圓弧
*/
private void drawArcRed(Canvas canvas, RectF rectF) {
Paint paintCurrent = new Paint();
paintCurrent.setStrokeJoin(Paint.Join.ROUND);
paintCurrent.setStrokeCap(Paint.Cap.ROUND);//圓角弧度
paintCurrent.setStyle(Paint.Style.STROKE);//設(shè)置填充樣式
paintCurrent.setAntiAlias(true);//抗鋸齒功能
paintCurrent.setStrokeWidth(borderWidth);//設(shè)置畫筆寬度
paintCurrent.setColor(getResources().getColor(R.color.red));//設(shè)置畫筆顏色
canvas.drawArc(rectF, startAngle, currentAngleLength, false, paintCurrent);
}
(3).【第三步】繪制當前進度的紅色數(shù)字
/**
* 3.圓環(huán)中心的步數(shù)
*/
private void drawTextNumber(Canvas canvas, float centerX) {
Paint vTextPaint = new Paint();
vTextPaint.setTextAlign(Paint.Align.CENTER);
vTextPaint.setAntiAlias(true);//抗鋸齒功能
vTextPaint.setTextSize(numberTextSize);
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL);
vTextPaint.setTypeface(font);//字體風(fēng)格
vTextPaint.setColor(getResources().getColor(R.color.red));
Rect bounds_Number = new Rect();
vTextPaint.getTextBounds(stepNumber, 0, stepNumber.length(), bounds_Number);
canvas.drawText(stepNumber, centerX, getHeight() / 2 + bounds_Number.height() / 2, vTextPaint);
}
(4).【第四步】繪制”步數(shù)”的紅色數(shù)字
/**
* 4.圓環(huán)中心[步數(shù)]的文字
*/
private void drawTextStepString(Canvas canvas, float centerX) {
Paint vTextPaint = new Paint();
vTextPaint.setTextSize(dipToPx(16));
vTextPaint.setTextAlign(Paint.Align.CENTER);
vTextPaint.setAntiAlias(true);//抗鋸齒功能
vTextPaint.setColor(getResources().getColor(R.color.grey));
String stepString = "步數(shù)";
Rect bounds = new Rect();
vTextPaint.getTextBounds(stepString, 0, stepString.length(), bounds);
canvas.drawText(stepString, centerX, getHeight() / 2 + bounds.height() + getFontHeight(numberTextSize), vTextPaint);
}
6.動畫是如何實現(xiàn)的->ValueAnimator
ValueAnimator是整個屬性動畫機制當中最核心的一個類，屬性動畫的運行機制是通過不斷地對值進行操作來實現(xiàn)的，而初始值和結(jié)束值之間的動畫過渡就是由ValueAnimator這個類來負責(zé)計算的。它的內(nèi)部使用一種時間循環(huán)的機制來計算值與值之間的動畫過渡， 我們只需要將初始值和結(jié)束值提供給ValueAnimator，并且告訴它動畫所需運行的時長，那么ValueAnimator就會自動幫我們完成從初始值平滑地過渡到結(jié)束值這樣的效果。
/*為進度設(shè)置動畫
* @param start 初始值
* @param current 結(jié)束值
* @param length 動畫時長
*/
private void setAnimation(float start, float current, int length) {
ValueAnimator progressAnimator = ValueAnimator.ofFloat(start, current);
progressAnimator.setDuration(length);
progressAnimator.setTarget(currentAngleLength);
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
/**每次在初始值和結(jié)束值之間產(chǎn)生的一個平滑過渡的值，逐步去更新進度*/
currentAngleLength = (float) animation.getAnimatedValue();
invalidate();
}
});
progressAnimator.start();
}
7.整個自定義StepArcView的源碼
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;
import cn.bluemobi.dylan.step.R;
/**
* Created by DylanAndroid on 2016/5/26.
* 顯示步數(shù)的圓弧
*/
public class StepArcView extends View {
/**
* 圓弧的寬度
*/
private float borderWidth = 38f;
/**
* 畫步數(shù)的數(shù)值的字體大小
*/
private float numberTextSize = 0;
/**
* 步數(shù)
*/
private String stepNumber = "0";
/**
* 開始繪制圓弧的角度
*/
private float startAngle = 135;
/**
* 終點對應(yīng)的角度和起始點對應(yīng)的角度的夾角
*/
private float angleLength = 270;
/**
* 所要繪制的當前步數(shù)的紅色圓弧終點到起點的夾角
*/
private float currentAngleLength = 0;
/**
* 動畫時長
*/
private int animationLength = 3000;
public StepArcView(Context context) {
super(context);
}
public StepArcView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public StepArcView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**中心點的x坐標*/
float centerX = (getWidth()) / 2;
/**指定圓弧的外輪廓矩形區(qū)域*/
RectF rectF = new RectF(0 + borderWidth, borderWidth, 2 * centerX - borderWidth, 2 * centerX - borderWidth);
/**【第一步】繪制整體的黃色圓弧*/
drawArcYellow(canvas, rectF);
/**【第二步】繪制當前進度的紅色圓弧*/
drawArcRed(canvas, rectF);
/**【第三步】繪制當前進度的紅色數(shù)字*/
drawTextNumber(canvas, centerX);
/**【第四步】繪制"步數(shù)"的紅色數(shù)字*/
drawTextStepString(canvas, centerX);
}
/**
* 1.繪制總步數(shù)的黃色圓弧
*
* @param canvas 畫筆
* @param rectF 參考的矩形
*/
private void drawArcYellow(Canvas canvas, RectF rectF) {
Paint paint = new Paint();
/** 默認畫筆顏色，黃色 */
paint.setColor(getResources().getColor(R.color.yellow));
/** 結(jié)合處為圓弧*/
paint.setStrokeJoin(Paint.Join.ROUND);
/** 設(shè)置畫筆的樣式 Paint.Cap.Round ,Cap.SQUARE等分別為圓形、方形*/
paint.setStrokeCap(Paint.Cap.ROUND);
/** 設(shè)置畫筆的填充樣式 Paint.Style.FILL :填充內(nèi)部;Paint.Style.FILL_AND_STROKE ：填充內(nèi)部和描邊; Paint.Style.STROKE ：僅描邊*/
paint.setStyle(Paint.Style.STROKE);
/**抗鋸齒功能*/
paint.setAntiAlias(true);
/**設(shè)置畫筆寬度*/
paint.setStrokeWidth(borderWidth);
/**繪制圓弧的方法
* drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)//畫弧，
參數(shù)一是RectF對象，一個矩形區(qū)域橢圓形的界限用于定義在形狀、大小、電弧，
參數(shù)二是起始角(度)在電弧的開始，圓弧起始角度，單位為度。
參數(shù)三圓弧掃過的角度，順時針方向，單位為度,從右中間開始為零度。
參數(shù)四是如果這是true(真)的話,在繪制圓弧時將圓心包括在內(nèi)，通常用來繪制扇形；如果它是false(假)這將是一個弧線,
參數(shù)五是Paint對象；
*/
canvas.drawArc(rectF, startAngle, angleLength, false, paint);
}
/**
* 2.繪制當前步數(shù)的紅色圓弧
*/
private void drawArcRed(Canvas canvas, RectF rectF) {
Paint paintCurrent = new Paint();
paintCurrent.setStrokeJoin(Paint.Join.ROUND);
paintCurrent.setStrokeCap(Paint.Cap.ROUND);//圓角弧度
paintCurrent.setStyle(Paint.Style.STROKE);//設(shè)置填充樣式
paintCurrent.setAntiAlias(true);//抗鋸齒功能
paintCurrent.setStrokeWidth(borderWidth);//設(shè)置畫筆寬度
paintCurrent.setColor(getResources().getColor(R.color.red));//設(shè)置畫筆顏色
canvas.drawArc(rectF, startAngle, currentAngleLength, false, paintCurrent);
}
/**
* 3.圓環(huán)中心的步數(shù)
*/
private void drawTextNumber(Canvas canvas, float centerX) {
Paint vTextPaint = new Paint();
vTextPaint.setTextAlign(Paint.Align.CENTER);
vTextPaint.setAntiAlias(true);//抗鋸齒功能
vTextPaint.setTextSize(numberTextSize);
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL);
vTextPaint.setTypeface(font);//字體風(fēng)格
vTextPaint.setColor(getResources().getColor(R.color.red));
Rect bounds_Number = new Rect();
vTextPaint.getTextBounds(stepNumber, 0, stepNumber.length(), bounds_Number);
canvas.drawText(stepNumber, centerX, getHeight() / 2 + bounds_Number.height() / 2, vTextPaint);
}
/**
* 4.圓環(huán)中心[步數(shù)]的文字
*/
private void drawTextStepString(Canvas canvas, float centerX) {
Paint vTextPaint = new Paint();
vTextPaint.setTextSize(dipToPx(16));
vTextPaint.setTextAlign(Paint.Align.CENTER);
vTextPaint.setAntiAlias(true);//抗鋸齒功能
vTextPaint.setColor(getResources().getColor(R.color.grey));
String stepString = "步數(shù)";
Rect bounds = new Rect();
vTextPaint.getTextBounds(stepString, 0, stepString.length(), bounds);
canvas.drawText(stepString, centerX, getHeight() / 2 + bounds.height() + getFontHeight(numberTextSize), vTextPaint);
}
/**
* 獲取當前步數(shù)的數(shù)字的高度
*
* @param fontSize 字體大小
* @return 字體高度
*/
public int getFontHeight(float fontSize) {
Paint paint = new Paint();
paint.setTextSize(fontSize);
Rect bounds_Number = new Rect();
paint.getTextBounds(stepNumber, 0, stepNumber.length(), bounds_Number);
return bounds_Number.height();
}
/**
* dip 轉(zhuǎn)換成px
*
* @param dip
* @return
*/
private int dipToPx(float dip) {
float density = getContext().getResources().getDisplayMetrics().density;
return (int) (dip * density + 0.5f * (dip >= 0 ? 1 : -1));
}
/**
* 所走的步數(shù)進度
*
* @param totalStepNum 設(shè)置的步數(shù)
* @param currentCounts 所走步數(shù)
*/
public void setCurrentCount(int totalStepNum, int currentCounts) {
stepNumber = currentCounts + "";
setTextSize(currentCounts);
/**如果當前走的步數(shù)超過總步數(shù)則圓弧還是270度，不能成為園*/
if (currentCounts > totalStepNum) {
currentCounts = totalStepNum;
}
/**所走步數(shù)占用總共步數(shù)的百分比*/
float scale = (float) currentCounts / totalStepNum;
/**換算成弧度最后要到達的角度的長度-->弧長*/
float currentAngleLength = scale * angleLength;
/**開始執(zhí)行動畫*/
setAnimation(0, currentAngleLength, animationLength);
}
/**
* 為進度設(shè)置動畫
* ValueAnimator是整個屬性動畫機制當中最核心的一個類，屬性動畫的運行機制是通過不斷地對值進行操作來實現(xiàn)的，
* 而初始值和結(jié)束值之間的動畫過渡就是由ValueAnimator這個類來負責(zé)計算的。
* 它的內(nèi)部使用一種時間循環(huán)的機制來計算值與值之間的動畫過渡，
* 我們只需要將初始值和結(jié)束值提供給ValueAnimator，并且告訴它動畫所需運行的時長，
* 那么ValueAnimator就會自動幫我們完成從初始值平滑地過渡到結(jié)束值這樣的效果。
*
* @param last
* @param current
*/
private void setAnimation(float last, float current, int length) {
ValueAnimator progressAnimator = ValueAnimator.ofFloat(last, current);
progressAnimator.setDuration(length);
progressAnimator.setTarget(currentAngleLength);
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentAngleLength = (float) animation.getAnimatedValue();
invalidate();
}
});
progressAnimator.start();
}
/**
* 設(shè)置文本大小,防止步數(shù)特別大之后放不下，將字體大小動態(tài)設(shè)置
*
* @param num
*/
public void setTextSize(int num) {
String s = String.valueOf(num);
int length = s.length();
if (length <= 4) {
numberTextSize = dipToPx(50);
} else if (length > 4 && length <= 6) {
numberTextSize = dipToPx(40);
} else if (length > 6 && length <= 8) {
numberTextSize = dipToPx(30);
} else if (length > 8) {
numberTextSize = dipToPx(25);
}
}
}
8.用法說明
xml中
<cn.bluemobi.dylan.step.view.StepArcView android:id="@+id/sv " android:layout_width="200dp" android:layout_height="200dp" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" />
Activity中
StepArcView sv = (StepArcView) findViewById(R.id.sv); sv.setCurrentCount(7000, 1000);
以上所述是小編給大家介紹的Android 仿QQ運動步數(shù)圓弧及動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Android中使用Kotlin實現(xiàn)一個簡單的登錄界面
Kotlin 是一種在 Java 虛擬機上運行的靜態(tài)類型編程語言，被稱之為 Android 世界的Swift，由 JetBrains 設(shè)計開發(fā)并開源。接下來本文通過實例代碼給大家講解Android中使用Kotlin實現(xiàn)一個簡單的登錄界面，一起看看吧2017-09-09
Android編程自定義View時添加自己的監(jiān)聽器示例
這篇文章主要介紹了Android編程自定義View時添加自己的監(jiān)聽器,涉及Android自定義view中監(jiān)聽器的添加、設(shè)置與使用相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細介紹了Android實現(xiàn)多維商品屬性SKU選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
一文帶你徹底搞懂Behavior實現(xiàn)復(fù)雜的視覺聯(lián)動效果原理
這篇文章主要為大家介紹了一文帶你徹底搞懂Behavior實現(xiàn)復(fù)雜的視覺聯(lián)動效果原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
Android使用SqLite實現(xiàn)登錄注冊功能流程詳解
這篇文章主要介紹了使用Android Studio自帶的sqlite數(shù)據(jù)庫實現(xiàn)一個簡單的登錄注冊功能,SQLite是一個軟件庫,實現(xiàn)了自給自足的、無服務(wù)器的、零配置的、事務(wù)性的SQL數(shù)據(jù)庫引擎,本文給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12
Andriod 讀取網(wǎng)絡(luò)圖片實例代碼解析
Android手機上，我們經(jīng)常用imageview顯示圖片，通過本文學(xué)習(xí)獲取網(wǎng)絡(luò)圖片并顯示在imageview中，對android讀取網(wǎng)絡(luò)圖片相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要介紹了Android 自定義彈出框?qū)崿F(xiàn)代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了 Android 打包三種方式實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android使用友盟集成QQ、微信、微博等第三方分享與登錄方法詳解
之前的項目第三方分享和登錄一直都使用ShareSDK實現(xiàn)的。為了統(tǒng)一使用友盟的全家桶，所以三方分享和登錄也就選擇了友盟，這里為大家整理出詳細方法2018-03-03
Android Uri和文件路徑互相轉(zhuǎn)換的實例代碼
在項目中需要用到將Uri轉(zhuǎn)換為絕對路徑，下面小編把Android Uri和文件路徑互相轉(zhuǎn)換的實例代碼分享到腳本之家平臺，需要的的朋友參考下吧2017-07-07