手把手教你打造一个心电图效果View Android自定义View

最新推荐文章于 2025-06-28 15:02:45 发布

原创

最新推荐文章于 2025-06-28 15:02:45 发布 · 1.7w 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#android

本文介绍了如何在Android中创建一个自定义View来绘制心电图效果，包括背景表格和心电图线条的绘制。通过使用drawBackground()方法绘制网格背景，利用Path和scrollBy()实现心电图的动态效果。最后，文章提到将背景和心电图线条分隔到两个不同的View中，以避免滚动时背景一同移动的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，看我像不像蘑菇…因为我在学校呆的发霉了。这里写图片描述

思而不学则殆

丽丽说得对，我有奇怪的疑问，大都是思而不学造成的，在我书读不够的情况下想太多，大多等于白想这里写图片描述，所以革命没成功，同志仍需努力。

好了废话不说了，由于布总要做一个心电图的玩意，所以做来练练手，总之拿到的UI图如下:
这里写图片描述

做好的效果如下：
这里写图片描述
拿到图，先做一些简单的分析。呃..

背景表格的绘制
心电图的绘制

背景表格的绘制：

首先drawColor黑色，然后用循环来画线、

心电图的绘制：

看样子是path，应该没问题。

于是就大干一番，按照这俩步骤画完了。。结果发现，嗯。。确实画上去了，关键怎么让他动呢。。轻而易举想到scrollBy吧。然后你就发现。。背景也跟着变了。。遇到问题就要解决。。所以这里投机取巧一下把两个View分离，即背景是一个View，折线图是一个View。

首先，创建一个View，用来做背景View。他有一些属性，因为这些View本来是一个，后来又有一个折现View需要相同的属性，所以索性偷懒改成protected修饰。。
转载请注明出处：http://blog.youkuaiyun.com/wingichoy/article/details/51023865

public class CardiographView extends View {
   
   
    //画笔
    protected Paint mPaint;
    //折现的颜色
    protected int mLineColor = Color.parseColor("#76f112");
    //网格颜色
    protected int mGridColor = Color.parseColor("#1b4200");

    //小网格颜色
    protected int mSGridColor = Color.parseColor("#092100");
    //背景颜色
    protected int mBackgroundColor = Color.BLACK;
    //自身的大小
    protected int mWidth,mHeight;

    //网格宽度
    protected int mGridW