开发者社区> 酸甜西瓜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

android仿淘宝刮刮卡功能实现

简介:
+关注继续查看

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

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

 

最后,附上两张示例的截图:

Screenshot_2014-04-02-19-21-22    Screenshot_2014-04-02-19-21-43

 

Screenshot_2014-04-02-19-22-16     Screenshot_2014-04-02-19-21-51

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
淘宝 Android 端图片体验优化实践
淘宝 Android 端图片体验优化实践
0 0
淘宝 Android 帧率采集与监控详解
淘宝 Android 帧率采集与监控详解
0 0
Android 类似淘宝的多商品订单评价
前言 近期在做一个商城类项目,需要实现对一个订单里的多个商品分别评价的功能(类似于淘宝的评价),花费了一点时间把效果做了出来,并在这里分享出来也权当做了记录,图个日后使用方便。
1581 0
【Android】仿淘宝商品详情页面的下拉渐变
最近需要做一个和最新版淘宝相似的商品详情页。先看原版: 淘宝的版本 我实现的效果: 我的版本 因为单纯实现渐变功能,所以背景只用了一张尺寸较大的imageview。
2146 0
Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/52510844 本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发。
911 0
android 实现淘宝收益图的折线
实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就是要搞一个paint嘛,然后首先肯定要设置下paint的属性,那么画文字呢,不就是Textpaint吗, 对,就是这么简单,接下来怎么画,折线图主要分为X轴和y轴,x轴表示日期,y表示收益,好,说道这里,大家应该知道怎么去做了,下面直接贴代码, 这个方法是,画x,y坐标系的,以及上面的日期和收益了 private v
816 0
Android热补丁技术—dexposed原理简析(手机淘宝采用方案)
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Arial; font-size:14px; line-height:26px"> <span style="font-family:'Microsoft YaHei'">上篇文章《</span><a
3212 0
Android Studio进行APP设计开发之矢量图及XML文件转换
Android Studio进行APP设计开发之矢量图及XML文件转换
0 0
+关注
酸甜西瓜
不妨试试
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
蚂蚁聚宝Android秒级编译—— Freeline
立即下载
Android插件化:从入门到放弃
立即下载