最近在项目中需要使用到的心电Ecg显示效果，本来打算使用sdk方的视图组件的，但是奈何他们的组件问题太多了。比如网格不对齐(强迫症表示这个无法忍)，组件不支持静态显示数据等等问题。所以打算自己写一个用来做主页面的心电数据展示。
首先要实现以下几个功能点：
1.网格的大小，颜色可控。
2.心电线条的颜色粗细可控。
3.无论传入的数据源长度是多少，都要均匀的显示在表格上(按一定的比例尺缩放或者扩展)
之后可能会实现动态显示数据的部分，会在本篇博客更新。
技术实现要点：
传入的数据源是String字符串，类似于："0.101253886148333549,0.001253886148333549,0.003036087844520807,0.002440808573737741"
这样的数据，所以这里要对传入的数据进行处理，根据数据的个数确定屏幕上一共要均匀连线多少个点。
代码实现：
class EcgShowView : View {private var mWidth: Float = 0.toFloat()private var mHeight: Float = 0.toFloat()private var paint: Paint? = nullprivate var path: Path? = nullprivate var dataStrList: Array<String>? = nullprivate var intervalNumHeart: Int = 0private var intervalRowHeart: Float = 0.toFloat()private var intervalColumnHeart: Float = 0.toFloat()private var data: FloatArray? = nullprivate var mHeartLinestrokeWidth: Float = 0.toFloat()private var row: Int = 0private var intervalRow: Float = 0.toFloat()private var column: Int = 0private var intervalColumn: Float = 0.toFloat()private var mGridLinestrokeWidth: Float = 0.toFloat()private var mGridstrokeWidthAndHeight: Float = 0.toFloat()//心电private val MAX_VALUE = 20f //峰值private val HEART_LINE_STROKE_WIDTH = 5f//网格private val GRID_LINE_STROKE_WIDTH = 3fprivate val GRID_WIDTH_AND_HEIGHT = 10fconstructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {init()}private fun init() {paint = Paint()path = Path()//setLayerType(View.LAYER_TYPE_SOFTWARE, null);}constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {super.onLayout(changed, left, top, right, bottom)mWidth = measuredWidth.toFloat()mHeight = measuredHeight.toFloat()mGridLinestrokeWidth = dip2px(GRID_LINE_STROKE_WIDTH).toFloat()mGridstrokeWidthAndHeight = dip2px(GRID_WIDTH_AND_HEIGHT).toFloat()column = (mWidth / mGridstrokeWidthAndHeight).toInt();intervalColumn = mWidth / columnrow = (mHeight / mGridstrokeWidthAndHeight).toInt()intervalRow = mHeight / rowmHeartLinestrokeWidth = dip2px(HEART_LINE_STROKE_WIDTH).toFloat()initData()}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)//绘制网格paint!!.style = Paint.Style.STROKEpaint!!.color = Color.parseColor("#D8D8D8")paint!!.strokeWidth = mGridLinestrokeWidthpaint!!.isAntiAlias = truefor (i in 0..column) {val iTempC = i * intervalColumnpath!!.moveTo(iTempC, 0f)path!!.lineTo(iTempC, mHeight)}for (i in 0..row) {path!!.moveTo(0f, i * intervalRow)path!!.lineTo(mWidth, i * intervalRow)}canvas.drawPath(path!!, paint!!)//绘制心电图if (data == null || data!!.size == 0) {return}paint!!.reset()path!!.reset()paint!!.style = Paint.Style.STROKEpaint!!.color = Color.parseColor("#31CE32")paint!!.strokeWidth = mGridLinestrokeWidthpaint!!.isAntiAlias = truepath!!.moveTo(0f, mHeight / 2)var nowX: Floatvar nowY: Floatfor (i in data!!.indices) {nowX = i * intervalRowHeartvar dataValue = data!![i]if (dataValue > 0) {if (dataValue > MAX_VALUE * 0.8f) {dataValue = MAX_VALUE * 0.8f}} else {if (dataValue < -MAX_VALUE * 0.8f) {dataValue = -(MAX_VALUE * 0.8f)}}nowY = mHeight / 2 - dataValue * intervalColumnHeartpath!!.lineTo(nowX, nowY)}canvas.drawPath(path!!, paint!!)}fun setData(dataStr: String) {dataStrList = dataStr.split(",".toRegex()).dropLastWhile { it.isEmpty() }.toTypedArray()initData()}private fun initData() {try {var dataLength = dataStrList!!.sizeif (dataLength > mWidth) {dataLength = mWidth.toInt()}data = FloatArray(dataLength)for (i in 0 until dataLength) {data!![i] = java.lang.Float.parseFloat(dataStrList!![i])}intervalNumHeart = data!!.sizeintervalRowHeart = mWidth / intervalNumHeartintervalColumnHeart = mHeight / (MAX_VALUE * 2)} catch (e: Exception) {e.printStackTrace()}}private fun px2dip(px: Int): Int {val scale = context.resources.displayMetrics.densityreturn (px / scale + 0.5f).toInt()}private fun dip2px(dipValue: Float): Int {val scale = context.resources.displayMetrics.densityreturn (dipValue * scale + 0.5f).toInt()}}
Github项目地址：
/jiangzhengnan/UI
最近会把实现的UI效果都集中到一个库里面，求start~
如果觉得《Android——ECG心电图的绘制实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
