一、前言
2021年的第一天，這也是我今年發(fā)布的第一篇博客，為了達(dá)成在元旦當(dāng)天發(fā)布博客的成就，在大家歡慶元旦的時(shí)候，我忙忙碌碌的寫了一整天的代碼，祝愿自己新的一年，一帆風(fēng)順，牛氣沖天
說遠(yuǎn)了，聊一下今天這個波形圖的自定義view
最近涉及的某個醫(yī)療相關(guān)的業(yè)務(wù)，傳感器數(shù)據(jù)傳遞上來需要實(shí)現(xiàn)示波器的效果，心電圖的效果，目前交付效果還算理想，于是封裝了一下，方便自己以后使用，也給大家分享一下
二、效果圖
效果圖
圖一是心電圖效果，圖二是一個滾動的波形圖
三、功能實(shí)現(xiàn)
（一）繪制背景網(wǎng)格
為了讓他看上去像示波器上的數(shù)據(jù)，我們先繪制一層網(wǎng)格背景，看上去似乎就有那么點(diǎn)意思了
在onLayout函數(shù)中獲取控件寬高，然后除以默認(rèn)網(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能繪制多少條直線
同時(shí)創(chuàng)建一個浮點(diǎn)類型的數(shù)組，用于保存每次傳進(jìn)來的數(shù)據(jù)
/** 根據(jù)線條長度，最多能繪制多少個數(shù)據(jù)點(diǎn)*/
row = (int) (mWidth / WAVE_LINE_WIDTH);
dataArray = new float[row + 10];
2、來看數(shù)據(jù)的保存方式
心電圖效果的保存方式是創(chuàng)建了一個索引，每次繪制后自增，索引達(dá)到數(shù)組的最大值時(shí)，賦值為0
也就實(shí)現(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、繪制折線的流程
默認(rèn)最大值為20，以view高度的一半處為0，下方是-20，上方是+20
x沒什么好說的，就是i*單位寬度
y則為高度的一半減去數(shù)組中數(shù)據(jù)占view一半高度的比重
將所有的點(diǎn)坐標(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ù)還是負(fù)數(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' }
}
}
dependencies {
implementation 'com.github.Giftedcat:Waveform:1.1'
}
（二）布局文件
<?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">
<!--最大值 默認(rèn)為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" />
<!--背景顏色，默認(rèn)為黑-->
<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間的浮點(diǎn)數(shù)
五、結(jié)語
如果對你有所幫助，請記得幫我點(diǎn)一個贊和star，有什么意見和建議可以在評論區(qū)給我留言
最后貼一下github的源碼地址https://github.com/Giftedcat/Waveform
