Android自定义 View 练习 —— 心电图的绘制

先上个效果图（画块饼），让你有耐心看完下面内容。

网上已经有不少人，把类似的效果做出来了。我就把自己做出这个效果的思路写出来，希望对想学自定义 View 的朋友有些帮助。

先作一个草图，打开 Windows 自带的“画图”软件，OS X 系统的就找个类似的软件吧。先想好，再来画个草图。我画的草图如下：

看到这，可能有人有疑问了，写自定义 View 怎么不写代码啊，我是来看代码的，最好把完整代码贴出来，画这些图有 * 用啊。有的高手能够在脑海里把很复杂的自定义 View 想象出来。为了说服你最好画一画图，我在这里简单说几句，个人认为画图是个重要的步骤，能事半功倍。想法是代码的灵魂，先想好想法，再去写代码就容易了，类似于“胸中有文章，下笔如涌泉”。假如你是新手阶段，对着别人的代码敲可以有进步，但如果你一直都是对着别人的代码敲然后敲成一个项目的，你自己深想一下，有没有前途？画了图之后，你的思维就被解放了，不会深陷于文字之中，还可能激发出新的想法，你就会想办法实现它。如果你没尝试过的话，可以试一试，顶多就是半个小时的时间，如果你有特别深刻的体验，那恭喜你学会了一种新方式；如果没有，你只是进行了一次风险不大的尝试，人生的惊喜就在于新的尝试。

看着你画的草图，我们可以看到屏幕宽度是已知的，设置大格子的数目后，大格子的宽度也就确定了。这个时候有思绪了，需要横纵两个方向的格子数量。来设置两个全局变量：

horizontalBigGirdNum 为横向的线，即纵向大格子的数量。verticalBigGirdNum 为纵向的线，即横向大格子的数量。

在 XML 文件中使用：

在 xml 中宽 360 dp( match_parent )，高 270 dp，也就是 3 : 4 的关系。
horizontalBigGirdNum = 6，verticalBigGirdNum = 8，横向八个格子，纵向六个格子，这样划分比较科学。

正式开始写代码。首先初始化画笔。

在 onSizeChanged() 方法调用后，View 的宽高也就确定了。我们可以在这个方法里面来确定每个大格子的宽度。

在 onDraw() 方法中进行绘画。
将画网格写在一个方法中，并设置标志位，这样可以设置一个 public 方法来设置是否画网格。

画网格的方法：

到这里，网格就出来了。

接下来就是重点，画心电图了。
画草图。

分析：一条这样的线我们可以用 Path 类来画，画笔 Paint的类型记得设为 Paint.Style.STROKE（不然会很难看）。

没有数据是出不了效果的，我们来生成一些模拟的数据。

如果你需要将真实的心电图数据（比如说从传感器通过蓝牙传送过来的）放进来的话，只要设置一个 public 方法从外面传参数进来就好了。

到了这里，轨迹就能画出来了。但是，它不能像真实心电图那样将心电轨迹慢慢呈现出来，而是一下子就显示出来了。

我们可以加个延时，将心电图的点一个一个慢慢地连接起来。让我来做个比喻。我们都玩过贪吃蛇的游戏，每个蛇要吃的点就是数据源的坐标，没加延时情况下，贪吃蛇的速度很快，我们一眨眼的瞬间它就吃完了，我们就马上看到了整体曲线，而加了延时后，贪吃蛇的速度就慢了，它慢慢地经过点然后吃掉变长，我们也就看到了轨迹形成的过程。

代码实现如下：

增加延时，并且使上面的代码持续地执行。

项目代码：
完整代码
(用 AS 的话太大了，还是用 Eclipse 的项目吧)

到此，心电图就基本完成了。这只是一个简单的绘画，要想做的更好，还有许多事情要做，比如说封装入库等。如果你是一个想练习自定义 View 的初学者，我想这篇文章会对你有所启发。如果你是一名高级开发者，我想说，大佬，请指教。