Android如何實現動態(tài)滾動波形圖(心電圖)功能
更新時間：2021年03月27日 11:18:00 作者：龍旋
這篇文章主要介紹了Android如何實現動態(tài)滾動波形圖(心電圖)功能，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下
一、前言
最近涉及的某個醫(yī)療相關的業(yè)務，傳感器數據傳遞上來需要實現示波器的效果，心電圖的效果，目前交付效果還算理想，于是封裝了一下，方便自己以后使用，也給大家分享一下
二、效果圖
圖一是心電圖效果，圖二是一個滾動的波形圖
三、功能實現
（一）繪制背景網格
為了讓他看上去像示波器上的數據，我們先繪制一層網格背景，看上去似乎就有那么點意思了
在onLayout函數中獲取控件寬高，然后除以默認網格的寬高，得出需要繪制橫線和豎線的數量
/** 根據網格的單位長寬，獲取能繪制網格橫線和豎線的數量*/ gridHorizontalNum = (int) (mHeight / GRID_WIDTH); gridVerticalNum = (int) (mWidth / GRID_WIDTH);
在onDraw函數中，通過for循環(huán)，來一條條繪制橫線和豎線
/**
* 繪制網格
*
* @param canvas
*/
private void drawGrid(Canvas canvas) {
/** 設置顏色*/
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);
}
}
網格是靜態(tài)的，所以繪制起來比較簡單
（二）繪制折線
折線的繪制有兩種模式，也就是效果圖上下兩種效果的區(qū)別
原理也比較簡單
1、首先和繪制網格一樣，在onLayout函數中根據每段數據線條的跨度，算出當前view能繪制多少條直線
同時創(chuàng)建一個浮點類型的數組，用于保存每次傳進來的數據
/** 根據線條長度，最多能繪制多少個數據點*/ row = (int) (mWidth / WAVE_LINE_WIDTH); dataArray = new float[row + 10];
2、來看數據的保存方式
心電圖效果的保存方式是創(chuàng)建了一個索引，每次繪制后自增，索引達到數組的最大值時，賦值為0
也就實現了循環(huán)的效果
普通的滾動效果的，就是刪除第一個，新增的數據添加至數組的末尾
/**
* 添加新的數據
*/
public void showLine(float line) {
if (draw_index >= row) {
draw_index = 0;
}
switch (drawMode){
case 0:
/** 常規(guī)模式數據添加至最后一位*/
dataArray[row - 1] = line;
break;
case 1:
/** 循環(huán)模式數據添加至當前繪制的位*/
dataArray[draw_index] = line;
break;
}
postInvalidate();
}
3、繪制折線的流程
默認最大值為20，以view高度的一半處為0，下方是-20，上方是+20
x沒什么好說的，就是i*單位寬度
y則為高度的一半減去數組中數據占view一半高度的比重
將所有的點坐標傳入Path類中，最后使用Canvas的drawPath函數就可以繪制出想要有的效果了
/**
* 取數組中的指定一段數據來繪制折線
* @param start 起始數據位
* @param end 結束數據位
* */
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];
/** 判斷數據為正數還是負數 超過最大值的數據按最大值來繪制*/
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中可使用的參數
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="WaveView"> <!--最大值 默認為20，數據為-20 ~ 20--> <attr name="max_value" format="integer" /> <!--波形圖折線單位寬度，通過修改該參數，控制橫坐標的單位--> <attr name="wave_line_width" format="integer" /> <!--波形圖折線的線寬--> <attr name="wave_line_stroke_width" format="integer" /> <!--波形圖折線的顏色--> <attr name="wave_line_color" format="string" /> <!--背景網格圖的顏色--> <attr name="grid_line_color" format="string" /> <!--背景顏色，默認為黑--> <attr name="wave_background" format="string"/> <!--背景網格是否可見--> <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>
（三）向波形圖中添加數據
data = new Random().nextFloat()*(20f)-10f;
waveShowView.showLine(data);//取得是-10到10間的浮點數
源碼地址：
https://github.com/Giftedcat/Waveform
到這里就結束啦.
以上就是Android如何實現動態(tài)滾動波形圖(心電圖)功能的詳細內容，更多關于Android 實現動態(tài)滾動波形圖(心電圖)功能的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Android SDK中的Support兼容包詳解,本文詳細區(qū)分了Support Library的版本區(qū)別、各種Theme的概念和使用注意事項等內容,需要的朋友可以參考下2015-05-05
Android自定義Drawable之在Drawable中部指定透明區(qū)域方法示例
對于不同的屏幕密度、不同的設備方向,不同的語言和區(qū)域,都會涉及到備選 drawable 資源，下面這篇文章主要給你大家介紹了關于Android自定義Drawable之在Drawable中部指定透明區(qū)域的相關資料，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了Android貝塞爾曲線初步學習的第一課，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了Android利用Canvas類繪制圖形，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Android中SharedPreference使用實例講解
這篇文章主要介紹了Android中SharedPreference使用方法，實現登陸界面記住密碼功能，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細介紹了Android仿微信5實現滑動導航條，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
Android通過自定義Activity實現懸浮的Dialog詳解
這篇文章主要給大家介紹了關于Android通過自定義Activity實現懸浮的Dialog的相關資料，文中給出了詳細的示例代碼供大家參考學習，對大家具有一定的參考學習價值，感興趣的朋友們下面來一起看看吧。2017-05-05
這篇文章主要介紹了Android使用記錄訪問權限的相關資料，文中介紹的很詳細，對大家具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。2017-02-02
android開發(fā)通過Scroller實現過渡滑動效果操作示例
這篇文章主要介紹了android開發(fā)通過Scroller實現過渡滑動效果,結合實例形式分析了Android Scroller類實現過渡滑動效果的基本原理與實現技巧,需要的朋友可以參考下2020-01-01
Android App中實現可以雙擊放大和縮小圖片功能的實例
這篇文章主要介紹了Android App中實現可以雙擊放大和縮小圖片功能的實例,文中的例子不能做到逐級放大但可以做到邊界控制和以觸摸點為中心進行放大,需要的朋友可以參考下2016-03-03