您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在Android中實現(xiàn)一個動態(tài)滾動波形圖,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
(一)繪制背景網(wǎng)格
為了讓他看上去像示波器上的數(shù)據(jù),我們先繪制一層網(wǎng)格背景,看上去似乎就有那么點意思了
在onLayout函數(shù)中獲取控件寬高,然后除以默認網(wǎng)格的寬高,得出需要繪制橫線和豎線的數(shù)量
/** 根據(jù)網(wǎng)格的單位長寬,獲取能繪制網(wǎng)格橫線和豎線的數(shù)量*/ gridHorizontalNum = (int) (mHeight / GRID_WIDTH); gridVerticalNum = (int) (mWidth / GRID_WIDTH);
在onDraw函數(shù)中,通過for循環(huán),來一條條繪制橫線和豎線
/** * 繪制網(wǎng)格 * * @param canvas */ private void drawGrid(Canvas canvas) { /** 設(shè)置顏色*/ mLinePaint.setColor(gridLineColor); /** 繪制橫線*/ for (int i = 0; i < gridHorizontalNum + 1; i++) { canvas.drawLine(0, i * GRID_WIDTH, mWidth, i * GRID_WIDTH, mLinePaint); } /** 繪制豎線*/ for (int i = 0; i < gridVerticalNum + 1; i++) { canvas.drawLine(i * GRID_WIDTH, 0, i * GRID_WIDTH, mHeight, mLinePaint); } }
網(wǎng)格是靜態(tài)的,所以繪制起來比較簡單
(二)繪制折線
折線的繪制有兩種模式,也就是效果圖上下兩種效果的區(qū)別
原理也比較簡單
1、首先和繪制網(wǎng)格一樣,在onLayout函數(shù)中根據(jù)每段數(shù)據(jù)線條的跨度,算出當(dāng)前view能繪制多少條直線
同時創(chuàng)建一個浮點類型的數(shù)組,用于保存每次傳進來的數(shù)據(jù)
/** 根據(jù)線條長度,最多能繪制多少個數(shù)據(jù)點*/ row = (int) (mWidth / WAVE_LINE_WIDTH); dataArray = new float[row + 10];
2、來看數(shù)據(jù)的保存方式
心電圖效果的保存方式是創(chuàng)建了一個索引,每次繪制后自增,索引達到數(shù)組的最大值時,賦值為0
也就實現(xiàn)了循環(huán)的效果
普通的滾動效果的,就是刪除第一個,新增的數(shù)據(jù)添加至數(shù)組的末尾
/** * 添加新的數(shù)據(jù) */ public void showLine(float line) { if (draw_index >= row) { draw_index = 0; } switch (drawMode){ case 0: /** 常規(guī)模式數(shù)據(jù)添加至最后一位*/ dataArray[row - 1] = line; break; case 1: /** 循環(huán)模式數(shù)據(jù)添加至當(dāng)前繪制的位*/ dataArray[draw_index] = line; break; } postInvalidate(); }
3、繪制折線的流程
默認最大值為20,以view高度的一半處為0,下方是-20,上方是+20
x沒什么好說的,就是i*單位寬度
y則為高度的一半減去數(shù)組中數(shù)據(jù)占view一半高度的比重
將所有的點坐標(biāo)傳入Path類中,最后使用Canvas的drawPath函數(shù)就可以繪制出想要有的效果了
/** * 取數(shù)組中的指定一段數(shù)據(jù)來繪制折線 * @param start 起始數(shù)據(jù)位 * @param end 結(jié)束數(shù)據(jù)位 * */ private void drawPathFromDatas(Canvas canvas, int start, int end){ mPath.reset(); mPath.moveTo(start * WAVE_LINE_WIDTH, mHeight / 2); for (int i = start; i < end; i++) { nowX = i * WAVE_LINE_WIDTH; float dataValue = dataArray[i]; /** 判斷數(shù)據(jù)為正數(shù)還是負數(shù) 超過最大值的數(shù)據(jù)按最大值來繪制*/ if (dataValue > 0) { if (dataValue > MAX_VALUE) { dataValue = MAX_VALUE; } } else { if (dataValue < -MAX_VALUE) { dataValue = -MAX_VALUE; } } nowY = mHeight / 2 - dataValue * (mHeight / (MAX_VALUE * 2)); mPath.lineTo(nowX, nowY); } canvas.drawPath(mPath, mWavePaint); }
(一)添加庫
allprojects { repositories { ... maven { url 'https://jitpack.io' } } }
(二)布局文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="波形圖1" android:textColor="#000000" android:textSize="24sp" /> <com.giftedcat.wavelib.view.WaveView android:id="@+id/wave_view1" android:layout_width="match_parent" android:layout_height="1dp" android:layout_weight="1" app:draw_mode="loop" app:max_value="30" app:wave_background="#000000" app:wave_line_color="#ffff00" app:wave_line_width="20" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="波形圖2" android:textColor="#000000" android:textSize="24sp" /> <com.giftedcat.wavelib.view.WaveView android:id="@+id/wave_view2" android:layout_width="match_parent" android:layout_height="1dp" android:layout_weight="1" app:draw_mode="normal" app:grid_visible="false" app:wave_line_stroke_width="5" /> </LinearLayout>
xml中可使用的參數(shù)
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="WaveView"> <!--最大值 默認為20,數(shù)據(jù)為-20 ~ 20--> <attr name="max_value" format="integer" /> <!--波形圖折線單位寬度,通過修改該參數(shù),控制橫坐標(biāo)的單位--> <attr name="wave_line_width" format="integer" /> <!--波形圖折線的線寬--> <attr name="wave_line_stroke_width" format="integer" /> <!--波形圖折線的顏色--> <attr name="wave_line_color" format="string" /> <!--背景網(wǎng)格圖的顏色--> <attr name="grid_line_color" format="string" /> <!--背景顏色,默認為黑--> <attr name="wave_background" format="string"/> <!--背景網(wǎng)格是否可見--> <attr name="grid_visible" format="boolean" /> <!--波形圖繪制模式,常規(guī)和循環(huán)--> <attr name="draw_mode" format="enum"> <enum name="normal" value="0" /> <enum name="loop" value="1" /> </attr> </declare-styleable> </resources>
(三)向波形圖中添加數(shù)據(jù)
data = new Random().nextFloat()*(20f)-10f; waveShowView.showLine(data);//取得是-10到10間的浮點數(shù)
上述就是小編為大家分享的怎么在Android中實現(xiàn)一個動態(tài)滾動波形圖了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。