去年淘宝和天猫的活动搞的有声有色的，其中有一个游戏还是很受大家欢迎的，那就是红包刮刮卡，自己也挺迷的，一刮起来就停不下来，有没有？

最近自己也在学习android入门，正好前些日子在搜索一个功能示例的时候，找到一个哥们分享的一篇介绍刮刮卡的文章，文章很简单，基本没有废话，直接贴了如何通过自定义view来实现刮刮卡的示例代码，链接如下：

http://www.cnblogs.com/xinye/p/3616095.html

 

后来又借着给大家分享android开发入门知识的机会，以这个示例为主要功能参考，并主要仿照天猫红包刮刮卡的外观样式和交互功能，做了一个还算功能齐全的示例，因为主要是为了讲解，所以特意把注释标注的比较完整，大家可以通过下面的链接到我共享的列表中下载示例源码：

https://github.com/yangguilin/GuaGuaLe

 

下面简单分析一下，实现刮刮卡功能的几点关键知识点：

1. 自定义一个View子类（TextView当然也可以，俺就是用得TextView做父类），并且重写下面几个主要方法：

（1） 构造函数

（2）视图绘制方法：protected void onDraw(Canvas canvas)

（3） 触屏事件处理方法：public boolean onTouchEvent(MotionEvent event)

 

2. 第一步中的三个方法是主要且必须的三个方法，接下来，在构造函数中，需要添加初始化刮刮卡视图的功能，该功能可以分解为以下几个关键步骤：

（1） 设置视图背景图片：因为涉及到随机变换的是否中奖的图片，所以意味着这个背景需要通过canvas来操作bitmap来做一次简单的绘制，首先为bitmap设置一种背景色，然后再通过canvas将得到的，需要显示的图片，根据具体的尺寸比例，画到bitmap中即可。

（2） 视图背景搞定后，接下来要搞定的就是刮刮卡的涂层，也就是咱们能用手指划掉的那一层，原理基本类似于背景，首先创建一个topBitmap，然后将该topBitmap载入到一个Canvas中进行编辑，为该topBitmap添加一层灰色的背景色，然后再通过定义一个画笔，再在该topBitmap上绘制上提示文字“请刮开涂层”，这样刮刮卡的所谓上下两层均已经定义完毕。

（3） 接下来，需要定义一只手指划到涂层时，来绘制透明色的画笔，其工作原理主要就是，通过调用默认的触屏事件 + 视图自动绘制，来实现所谓的手指刮开涂层的操作。（这部分也是不太容易理解的，或许是我说不清楚，总之看代码注释吧，会比较清楚）

（4） 此外，如何实现当手指划开大部分背景图片时，自动去除全部涂层，说来也挺简单，不排除有更完美的处理方案，俺用的是关键点法，即定义若干（示例中定义了9个）关键点，分布于待显示的背景图的主要区域，然后在每一次判断手指滑动的事件的同时，顺便检查是否有大多数的关键点的颜色值已经变为了透明（颜色值为0，即已被刮开），如果是，则通过canvas直接将topBitmap的颜色统一设置为透明色即可。

（5） 针对不同尺寸的android手机，如何做到显示一致？这也是一个后期的主要问题，因为前期通过不断调试，设定的一些尺寸，都是基于调试机的，既然要在各种不同版本、品牌的机器上运行，那么适配就是一个主要的问题，我是用了一种比较偷懒的方法，及将调试机的各项参数数据作为默认的参数，然后每次初始化的时候，都会获取当前屏幕的分辨率尺寸，然后与默认值的屏幕宽度进行比较，得到一个比例，然后在所有需要明确使用数值的地方，都乘以该比例，间接地达到了对试图缩放的目的。

 

最后，附上两张示例的截图：