Android自定義View實現(xiàn)繪制水波浪溫度刻度表
前言
之前的繪制圓環(huán)，我們了解了如何繪制想要的形狀和進度的一些特點，那么此篇文章我們更近一步，繪制一個稍微復雜一點的刻度與波浪。來一起復習一下Android的繪制。
相對應(yīng)的這種類型的自定義View網(wǎng)上并不少見，但是如果我們要做一些個性化的效果，最好還是自己繪制一份，也相對的比較容易控制效果，如果想實現(xiàn)上面的效果，我們一般來說分為以下幾個步驟：
- 重寫測量方法，確保它是一個正方形
- 繪制刻度
- 繪制中心的圓與文字
- 水波紋的動畫
- 設(shè)置進度與動畫，一起動起來
思路我們已經(jīng)有了，下面一步一步的來實現(xiàn)吧。
話不多說，Let's go
1、onMeasure重新測量
之前的圓環(huán)進度，我們并沒有重寫 onMeasure 方法，而是在布局中指定為固定的寬高，其實兼容性和健壯性并不好，萬一寫錯了就會變形導致顯示異常。
最好的辦法是不管xml中設(shè)置為什么值，這里都能保證為一個正方形，要么是取寬度為準，讓高度和寬度一致，要么就是寬度高度取最大值，讓他們保持一致。由于我們是豎屏的應(yīng)用，所以我就取寬度為準，讓高度和寬度一致。
前面我們只是講了 onDraw 并沒有講到 onMeasure , 這里簡單的說一下。
我們?yōu)槭裁匆貙?onMeasure ？
- 為了自定義View尺寸的規(guī)則，如果你的自定義View的尺寸是根據(jù)父控件行為一致，就不需要重寫onMeasure()方法。
- 如果不重寫onMeasure方法，那么自定義view的尺寸默認就和父控件一樣大小，當然也可以在布局文件里面寫死寬高，而重寫該方法可以根據(jù)自己的需求設(shè)置自定義view大小。
一般來說我們重寫的 onMeasure 長這樣：
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec,heightMeasureSpec)
}widthMeasureSpec ，heightMeasureSpec 并不是真正的寬高，看名字就知道，它只是寬高測量的規(guī)格，我們通過 MeasureSpec 的一些靜態(tài)方法，通過它們拿到一些信息。
static int getMode(int measureSpec):根據(jù)提供的測量值(規(guī)格)提取模式(上述三個模式之一)
測量的 Model 一共有三種
- UNSPECIFIED(未指定),父元素部隊自元素施加任何束縛，子元素可以得到任意想要的大小;
- EXACTLY(完全)，父元素決定自元素的確切大小，子元素將被限定在給定的邊界里而忽略它本身大??；
- AT_MOST(至多)，子元素至多達到指定大小的值。
我們常用的就是 EXACTLY 和 AT_MOST ，EXACTLY 對應(yīng)的就是我們設(shè)置的match_parent或者300這樣的精確值，而 AT_MOST 對應(yīng)的就是wrap_content。
static int getSize(int measureSpec):根據(jù)提供的測量值(規(guī)格)提取大小值(這個大小也就是我們通常所說的大小)
通過此方法就能獲取控件的寬度和高度值。
static int makeMeasureSpec(int size,int mode):根據(jù)提供的大小值和模式創(chuàng)建一個測量值(規(guī)格)
通過具體的寬高和model，創(chuàng)建對應(yīng)的寬高測量規(guī)格，用于確定View的測量
而 onMeasure 的最終設(shè)置確定寬度的測量有兩種方式，
- setMeasuredDimension(width, height)
- super.onMeasure(widthMeasureSpec,heightMeasureSpec）
實戰(zhàn)：
比如我們的自定義溫度刻度View，我們整個View要確保一個正方形，那么就拿到寬度，設(shè)置同樣的高度，然后確定測量，流程如下：
//重新測量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//獲取控件的寬度，高度
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int newWidthMeasureSpec = widthMeasureSpec;
//如果沒有指定寬度，默認給200寬度
if (widthMode != MeasureSpec.EXACTLY) {
newWidthMeasureSpec = MeasureSpec.makeMeasureSpec(200, MeasureSpec.EXACTLY);
}
//獲取到最新的寬度
int width = MeasureSpec.getSize(newWidthMeasureSpec) - getPaddingLeft() - getPaddingRight();
//我們要的是矩形，不管高度是多高，讓它總是和寬度一致
int height = width;
centerPosition.x = width / 2;
centerPosition.y = height / 2;
radius = width / 2f;
mRectF.set(0f, 0f, width, height);
//最后設(shè)置生效-下面兩種方式都可以
// setMeasuredDimension(width, height);
super.onMeasure(
MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
);
}這里有詳細的注釋，大致實現(xiàn)的效果如下：
2、繪制刻度
由于原本的 Canvas 內(nèi)部沒有繪制刻度這么一說，所以我們只能用繪制線條的方式，就是 drawLine 方法。
為了了解到坐標系和方便實現(xiàn)，我們可以先繪制一個圓環(huán)，定位我們刻度需要繪制的位置。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫圓環(huán)
canvas.drawArc(
mRectF.left + 2f, mRectF.top + 2f, mRectF.right - 2f, mRectF.bottom - 2f,
mStartAngle, mSweepAngle, false, mDegreeCirPaint
);
}這個圓環(huán)是之前講到過了，就不過多贅述了，實現(xiàn)效果如下：
由于開始繪制的地方在左上角位置，我們要移動到圓的中心點開始繪制，也就是紅色點移動到藍色點。
我們就需要x軸和y軸做一下偏移 canvas.translate(radius, radius);
默認的 drawLine 都是橫向繪制，我們想要實現(xiàn)效果圖的效果，就需要旋轉(zhuǎn)一下畫筆，也就是用到 canvas.rotate(rotateAngle);
那么旋轉(zhuǎn)多少了，如果說最底部是90度，我們的起始角度是120度開始的，我們就起始旋轉(zhuǎn)30度。后面每一次旋轉(zhuǎn)就按照百分比來，比如我們100度的溫度，那么就相當于要畫100個刻度，我們就用需要繪制的角度除以100，就是每一個刻度的角度。
具體的刻度實現(xiàn)代碼：
private float mStartAngle = 120f; // 圓弧的起始角度
private float mSweepAngle = 300f; //繪制的起始角度和滑過角度(繪制300度)
private float mTargetAngle = 300f; //刻度的角度(根據(jù)此計算需要繪制有色的進度)
private void drawDegreeLine(Canvas canvas) {
//先保存
canvas.save();
// 移動畫布
canvas.translate(radius, radius);
// 旋轉(zhuǎn)坐標系,需要確定旋轉(zhuǎn)角度
canvas.rotate(30);
// 每次旋轉(zhuǎn)的角度
float rotateAngle = mSweepAngle / 100;
// 累計疊加的角度
float currentAngle = 0;
for (int i = 0; i <= 100; i++) {
if (currentAngle <= mTargetAngle && mTargetAngle != 0) {
// 計算累計劃過的刻度百分比
float percent = currentAngle / mSweepAngle;
//動態(tài)的設(shè)置顏色
mDegreelinePaint.setColor(evaluateColor(percent, Color.GREEN, Color.RED));
canvas.drawLine(0, radius, 0, radius - 20, mDegreelinePaint);
// 畫過的角度進行疊加
currentAngle += rotateAngle;
} else {
mDegreelinePaint.setColor(Color.WHITE);
canvas.drawLine(0, radius, 0, radius - 20, mDegreelinePaint);
}
//畫完一個刻度就要旋轉(zhuǎn)移動位置
canvas.rotate(rotateAngle);
}
//再恢復
canvas.restore();
}加上圓環(huán)與刻度的效果圖：
3. 設(shè)置刻度動畫
前面的一篇我們使用的是屬性動畫不停的繪制從而實現(xiàn)進度的效果，那么這一次我們使用定時任務(wù)的方式也是可以實現(xiàn)動畫的效果。
由于我們之前的 drawDegreeLine 方法內(nèi)部控制繪制進度的變量就是 targetAngle 來控制的，所以我們通過入口方法設(shè)置溫度的時候通過定時任務(wù)的方式來控制。
代碼如下：
//動畫狀態(tài)
private boolean isAnimRunning;
// 手動實現(xiàn)越來越慢的效果
private int[] slow = {10, 10, 10, 8, 8, 8, 6, 6, 6, 6, 4, 4, 4, 4, 2};
// 動畫的下標
private int goIndex = 0;
//設(shè)置溫度，入口的開始
public void setupTemperature(float temperature) {
mCurPercent = 0f;
totalAngle = (temperature / 100) * mSweepAngle;
targetAngle = 0f;
mCurPercent = 0f;
mCurTemperature = "0.0";
mWaveUpValue = 0;
startTimerAnim();
}
//使用定時任務(wù)做動畫
private void startTimerAnim() {
if (isAnimRunning) {
return;
}
mAnimTimer = new Timer();
mAnimTimer.schedule(new TimerTask() {
@Override
public void run() {
isAnimRunning = true;
targetAngle += slow[goIndex];
goIndex++;
if (goIndex == slow.length) {
goIndex--;
}
if (targetAngle >= totalAngle) {
targetAngle = totalAngle;
isAnimRunning = false;
mAnimTimer.cancel();
}
// 計算的溫度
mCurPercent = targetAngle / mSweepAngle;
mCurTemperature = mDecimalFormat.format(mCurPercent * 100);
// 水波紋的高度
mWaveUpValue = (int) (mCurPercent * (mSmallRadius * 2));
postInvalidate();
}
}, 250, 30);
}那么刻度動畫的效果如下：
4. 繪制中心的圓與文字
我們再動畫中記錄動畫的百分比進度，和動畫當前的溫度。
...
// 計算的溫度
mCurPercent = targetAngle / mSweepAngle;
mCurTemperature = mDecimalFormat.format(mCurPercent * 100);
postInvalidate();
...我們記錄一下小圓的半徑和文本的畫筆資源
private float mSmallRadius = 0f;
private Paint mTextPaint;
private Paint mSmallCirclePaint;
private float mCurPercent = 0f; //進度
private String mCurTemperature = "0.0";
private DecimalFormat mDecimalFormat;
private void init() {
...
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextAlign(Paint.Align.CENTER);
mTextPaint.setColor(Color.WHITE);
mSmallCirclePaint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
...
//畫小圓
drawSmallCircle(canvas, evaluateColor(mCurPercent, Color.GREEN, Color.RED));
//畫中心的圓與文本
drawTemperatureText(canvas);
}具體的文本與小圓的繪制
private void drawSmallCircle(Canvas canvas, int evaluateColor) {
mSmallCirclePaint.setColor(evaluateColor);
mSmallCirclePaint.setAlpha(65);
canvas.drawCircle(centerPosition.x, centerPosition.y, mSmallRadius, mSmallCirclePaint);
}
private void drawTemperatureText(Canvas canvas) {
//提示文字
mTextPaint.setTextSize(mSmallRadius / 6f);
canvas.drawText("當前溫度", centerPosition.x, centerPosition.y - mSmallRadius / 2f, mTextPaint);
//溫度文字
mTextPaint.setTextSize(mSmallRadius / 2f);
canvas.drawText(mCurTemperature, centerPosition.x, centerPosition.y + mSmallRadius / 4f, mTextPaint);
//繪制單位
mTextPaint.setTextSize(mSmallRadius / 6f);
canvas.drawText("°C", centerPosition.x + (mSmallRadius / 1.5f), centerPosition.y, mTextPaint);
}由于進度和溫度都是動畫在 invalidate 之前賦值的，所以我們的文本和小圓天然就支持動畫的效果了。
效果如下：
5. 水波紋動畫
水波紋的效果，我們不能直接用 Canvas 來繪制，我們可以用刻度的方法用 drawLine的方式來繪制，如何繪制呢？相信大家也有了解，就是正弦函數(shù)了。
由于我們的效果是兩個水波紋相互疊加起起伏伏的效果，所以我們定義兩個函數(shù)。
總體的思路是：我們定義兩個數(shù)組來管理我們的Y軸的值，通過正弦函數(shù)給Y軸賦值，然后在drawLine的時候取出對應(yīng)的x軸的y值就可以繪制出來。
x軸其實就是我們的控件寬度，我們先用一個數(shù)組保存起來
private float[] mFirstWaterLine;
private float[] mSecondWaterLine;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//獲取控件的寬度，高度
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int newWidthMeasureSpec = widthMeasureSpec;
//如果沒有指定寬度，默認給200寬度
if (widthMode != MeasureSpec.EXACTLY) {
newWidthMeasureSpec = MeasureSpec.makeMeasureSpec(200, MeasureSpec.EXACTLY);
}
//獲取到最新的寬度
int width = MeasureSpec.getSize(newWidthMeasureSpec) - getPaddingLeft() - getPaddingRight();
//我們要的是矩形，不管高度是多高，讓它總是和寬度一致
int height = width;
mFirstWaterLine = new float[width];
mSecondWaterLine = new float[width];
super.onMeasure(
MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
);
}
然后我們再繪制之前就先對x軸對應(yīng)的y值賦值，然后繪制的時候就取出對應(yīng)的y值來 drawLine，具體的代碼如下：
動畫的時候先對橫向運動和垂直運動的變量做一個賦值：
private int mWaveUpValue = 0;
private float mWaveMoveValue = 0f;
//使用定時任務(wù)做動畫
private void startTimerAnim() {
if (isAnimRunning) {
return;
}
mAnimTimer = new Timer();
mAnimTimer.schedule(new TimerTask() {
@Override
public void run() {
...
// 計算的溫度
mCurPercent = targetAngle / mSweepAngle;
mCurTemperature = mDecimalFormat.format(mCurPercent * 100);
// 水波紋的高度
mWaveUpValue = (int) (mCurPercent * (mSmallRadius * 2));
postInvalidate();
}
}, 250, 30);
}
public void moveWaterLine() {
mWaveTimer = new Timer();
mWaveTimer.schedule(new TimerTask() {
@Override
public void run() {
mWaveMoveValue += 1;
if (mWaveMoveValue == 100) {
mWaveMoveValue = 1;
}
postInvalidate();
}
}, 500, 200);
}拿到了對應(yīng)的變量值之后，然后開始繪制：
/**
* 繪制水波
*/
private void drawWaterWave(Canvas canvas, int color) {
int len = (int) mRectF.right;
// 將周期定為view總寬度
float mCycleFactorW = (float) (2 * Math.PI / len);
// 得到第一條波的峰值
for (int i = 0; i < len; i++) {
mFirstWaterLine[i] = (float) (10 * Math.sin(mCycleFactorW * i + mWaveMoveValue) - mWaveUpValue);
}
// 得到第一條波的峰值
for (int i = 0; i < len; i++) {
mSecondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + mWaveMoveValue + 10) - mWaveUpValue);
}
canvas.save();
// 裁剪成圓形區(qū)域
Path path = new Path();
path.addCircle(len / 2f, len / 2f, mSmallRadius, Path.Direction.CCW);
canvas.clipPath(path);
path.reset();
// 將坐標系移到底部
canvas.translate(0, centerPosition.y + mSmallRadius);
mSmallCirclePaint.setColor(color);
for (int i = 0; i < len; i++) {
canvas.drawLine(i, mFirstWaterLine[i], i, len, mSmallCirclePaint);
}
for (int i = 0; i < len; i++) {
canvas.drawLine(i, mSecondWaterLine[i], i, len, mSmallCirclePaint);
}
canvas.restore();
}一個是對Y軸賦值，一個是取出x軸對應(yīng)的y軸進行繪制，這里需要注意的是我們裁剪出了一個小圓的圖形，并且覆蓋在小圓上面實現(xiàn)出效果圖的樣子。
運行的效果如下：
要記得對定時器進行資源你的關(guān)閉哦。
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mWaveTimer != null) {
mWaveTimer.cancel();
}
if (mAnimTimer != null && isAnimRunning) {
mAnimTimer.cancel();
}
}使用的時候我們只需要設(shè)置溫度即可開始動畫。
findViewById<View>(R.id.set_progress).click {
val temperatureView = findViewById<TemperatureView>(R.id.temperature_view)
temperatureView .setupTemperature(70f)
}后記
由于是自用定制的，本人也比較懶，所以并沒有對一些配置的屬性做自定義屬性的抽取，比如圓環(huán)的間距，大小，顏色，波紋的間距，動畫的快慢等等。
內(nèi)部加了一點點測量的用法，但是主要還是繪制的流程，基本上把常用的幾種繪制方式都用到了。以后有類似的效果大家也可以按需修改即可。
到此這篇關(guān)于Android自定義View實現(xiàn)繪制水波浪溫度刻度表的文章就介紹到這了,更多相關(guān)Android自定義View繪制溫度刻度表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Android的圖片平鋪效果的實現(xiàn)方法，主要有使用系統(tǒng)API、使用XML配置、自定義繪制三種方法,需要的朋友可以參考下2014-02-02
Android的Activity跳轉(zhuǎn)動畫各種效果整理
Android的Activity跳轉(zhuǎn)就是很生硬的切換界面。其實Android的Activity跳轉(zhuǎn)可以設(shè)置各種動畫，本文整理了一些，還有很多動畫效果，就要靠我們發(fā)揮自己的想象力2013-06-06
這篇文章主要介紹了如何利用Flutter時時渲染頁面從而達到文本滾動高亮的效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-03-03
這篇文章主要為大家詳細介紹了Android自定義帶動畫的半圓環(huán)型進度效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Android編程中Tween動畫和Frame動畫,結(jié)合實例形式較為詳細的分析了Android中Tween動畫和Frame動畫的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2015-12-12
Android Studio用genymotion運行后小圖標無法顯示問題
這篇文章主要介紹了Android Studio用genymotion運行后小圖標無法顯示的問題，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
本篇文章主要介紹了Android 仿京東側(cè)滑篩選實例代碼，詳細的介紹了側(cè)滑篩選的代碼，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
Android 自定義密碼輸入框?qū)崿F(xiàn)代碼
最近做個項目自定義密碼輸入框功能，下面小編把實現(xiàn)思路分享到腳本之家平臺，需要的朋友參考下吧2018-03-03
Android調(diào)用google地圖生成路線圖實現(xiàn)代碼
Android程序調(diào)用本機google地圖并且傳遞起始和終點位置生成路線圖，有需要的朋有可以參考下，或許本文對你有所幫助,好了話不多說，看代碼2013-02-02
Android編程使用加速度傳感器實現(xiàn)搖一搖功能及優(yōu)化的方法詳解
這篇文章主要介紹了Android編程使用加速度傳感器實現(xiàn)搖一搖功能及優(yōu)化的方法,結(jié)合實例形式分析了Android傳感器的調(diào)用方法、參數(shù)含義及具體使用技巧,需要的朋友可以參考下2017-08-08