Android如何实现动态滚动波形图(心电图)功能
一、前言
最近涉及的某个医疗相关的业务,传感器数据传递上来需要实现示波器的效果,心电图的效果,目前交付效果还算理想,于是封装了一下,方便自己以后使用,也给大家分享一下
二、效果图
图一是心电图效果,图二是一个滚动的波形图
三、功能实现
(一)绘制背景网格
为了让他看上去像示波器上的数据,我们先绘制一层网格背景,看上去似乎就有那么点意思了
在onLayout函数中获取控件宽高,然后除以默认网格的宽高,得出需要绘制横线和竖线的数量
/** 根据网格的单位长宽,获取能绘制网格横线和竖线的数量*/ gridHorizontalNum = (int) (mHeight / GRID_WIDTH); gridVerticalNum = (int) (mWidth / GRID_WIDTH);
在onDraw函数中,通过for循环,来一条条绘制横线和竖线
/** * 绘制网格 * * @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); } }
网格是静态的,所以绘制起来比较简单
(二)绘制折线
折线的绘制有两种模式,也就是效果图上下两种效果的区别
原理也比较简单
1、首先和绘制网格一样,在onLayout函数中根据每段数据线条的跨度,算出当前view能绘制多少条直线
同时创建一个浮点类型的数组,用于保存每次传进来的数据
/** 根据线条长度,最多能绘制多少个数据点*/ row = (int) (mWidth / WAVE_LINE_WIDTH); dataArray = new float[row + 10];
2、来看数据的保存方式
心电图效果的保存方式是创建了一个索引,每次绘制后自增,索引达到数组的最大值时,赋值为0
也就实现了循环的效果
普通的滚动效果的,就是删除第一个,新增的数据添加至数组的末尾
/** * 添加新的数据 */ public void showLine(float line) { if (draw_index >= row) { draw_index = 0; } switch (drawMode){ case 0: /** 常规模式数据添加至最后一位*/ dataArray[row - 1] = line; break; case 1: /** 循环模式数据添加至当前绘制的位*/ 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" /> <!--波形图绘制模式,常规和循环--> <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如何实现动态滚动波形图(心电图)功能的详细内容,更多关于Android 实现动态滚动波形图(心电图)功能的资料请关注猪先飞其它相关文章!
相关文章
- ps动态环绕动画效果是现在很多人都非常喜欢的,大多数人还不知道ps动态环绕动画效果怎么制作下面文章就给大家介绍下ps怎么制作科技感十足的动态环绕动画效果,一起来看看...2017-07-06
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 最近由于项目的需要,需要动态的添加和删除table中的tr,感觉用JS可以实现,但是在网上找了一下,单纯的自己写JS,感觉太麻烦,而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法,有需要的朋友们可以参考借鉴。...2016-10-20
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- 想在网页中动态地显示当前系统的时间,找了好多,不过都是一些停在那里不动的。。。不过皇天不负有心人,终于让我找到了...2020-06-25
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
- 这篇文章介绍了c#动态调用Webservice的两种方法实例,有需要的朋友可以参考一下...2020-06-25
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 本文详细讲解了SQLServer中执行动态SQL的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2022-05-19
- 下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02
- 这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15