接：http://www.jianshu.com/p/18240ea99f6e

本文由作者授权推送。

最近项目中新增了一个抢购模块，需要一个进度指示条，UI设计了几款出来后，PM一看，不行，太low了，没有逼格 balabala... 后来看到了淘宝的淘抢购模块，眼前一亮，好就它了。

呐，就长这样：

我没开淘宝店。。。

当时看到这张图的时候，其实我。。。我是拒绝的。甚至还有点想打人。。。

不过为了世界和平，还是要给PM点赞。吐槽归吐槽，需求还是要做的（广大程序员的劳苦心声。。。）一番努力过后，终于撸出来了（没毛病），先给大家看一下实现的最终效果：

--高仿山寨版--

好了，接下来就一步一步实现该效果。

2 效果实现

一. 背景实现

分析：背景边框是一个圆角矩形，用 canvas.drawRoundRect 就可以实现，背景这里我采用的是一张图片，转化为Bitmap类型，然后用 canvas.drawBitmap 绘制出来。

1.继承View，重写构造方法以及初始化Paint：

因为我这里并没有 style 等引入，所以只实现了这两种构造方法，分别用于直接 new 或者是写到 xml 里。

2.重写onSizeChanged onDraw方法：

sideWidth就是边框的宽度，其他都是常规，就不一一解释了

这里的背景框比较好实现：

需要注意的一点是， drawRoundRect 还要其他类似的重载方法：

这个只支持5.0以上，所以这里就没有采用。

条纹背景就稍微麻烦一点了。本来我想着是不是可以通过循环 drawRectF 出每一个小条纹，后来想着太麻烦了，就让UI帮我做了一张圆角条纹图，然后直接 drawBitmap 进去。

参数解释一下：

1. bitmap对象

2. srcRect ：即绘制原图的区域，说白了，就是截图原图的哪一部分进行绘制，为 null 的话，就是截取全部

3. dstRectF ：绘制的目标区域，就是把截取后的图片绘制到哪一块。

4. Paint 画笔可以为null

但是这样做有个弊端，就是如果UI做的图不是刚好圆角的话，那么左右两边的图片会溢出圆角矩形一点，效果不好，类似这样：

--左右两边不是刚好圆角的情况--

无奈之下，只好使用大杀器 PorterDuffXfermode，图形混合模式，这里还是借用一张经典的图吧，相信大家都看过了：

一般的写法就是这样：

什么意思呢，给大家解释一下：先建立两个概念

这段代码没有什么实质意义，不用纠结，只要记住 bitmap1 是 dst ， bitmap2 是 src ，即当 paint 设置了该模式后绘制的图形，为 src。

当给 Paint 设置了不同模式的 PorterDuffXfermode 后，dst 与 src 发生部分重叠或者其他情况时（一般都是用于部分重叠），那么 dst 与 src 就会按照对应的混合模式进行显示。就比如 SRC_IN 模式，对照上文提到的经典图，圆形和矩形发生重叠的部分是一个扇形，圆形是 dst ，矩形是 src，那么按照 SRC_IN 模式，重叠的 src 部分进行保留，其他的部分就不显示了，这样就完成了图形混合。

在这里只能简单的解释一下了，太深入的话感觉这个进度条完不成了啊（太深入我也不会了〒▽〒），只要这里理解了，那么本文的自定义view也就完成一半了。

好了，接下来就是正式的开始绘制背景图了。

a). 先创建一个空的 bitmap 装载在一个新的画布上，然后在画布上绘制一个圆角矩形，以不遮挡之前绘制好的背景边框为准。

b). 然后为 paint 设置 SRC_IN 的图形混合模式，再在该画布上把我们做好的条纹图绘制进来，这样，之前绘制的圆角矩形就做为 dst ，后来绘制的条纹图就做为 src 。

c). 这样，重叠的部分始终是圆角矩形范围，而且条纹图会把这个圆角矩形填充满（因为在绘制条纹图时设置的 dstRectF 和圆角矩形一致）。

d). 根据 SRC_IN 的规则，条纹图与圆角矩形重叠的部分保留，溢出的部分则不予显示，这样的话，就算 UI 给的图不是刚好圆角，也是可以满足需求的。

还有一点需要注意的事，给 Paint 设置混合模式，绘制完后，如果还要绘制其他东西，则取消混合模式，即 setXfermode( null )。

背景终于绘制出来了：

--还可以哈--

二. 进度条实现

分析：其实绘制进度条和绘制背景图原理一样，只是换了一张和背景纹理一样但是颜色不同的图片，还有一点就是，进度条的宽度需要根据比例来进行调整，那么就在为进度条绘制 dst 圆角矩形的时候，根据比例设置该圆角矩形的宽度就行了啊。

这里我就直接上代码了：

scale就是售出商品的比例，这个会根据传入的商品总量以及售出量进行计算。

可以看到，和绘制背景的时候原理相同，唯一不同的是，做为 dst 的圆角矩形在绘制时，宽度会根据比例进行调整。

做为 src 的进度图片在绘制的时候，绘制的区域还是整个 View 的圆角矩形区域，这样可以保证进度条图片不会变形。

还有一点需要注意的是，进度条图片与背景图片纹理最好保持一致，这样实现的效果才比较美观，不然分分钟逼死强迫症。

--看到曙光了--

三. 文字实现

还有最后一个部分，就是文字信息绘制。

分析：文字绘制这一块，其实难度不大，就是用 drawText 进行绘制，控制好绘制的起点坐标，然后根据售出比例调整即可。唯一的难点就在于文字的变色，当进度条覆盖在文字上时，要显示出白色的文字。

其实这个想一下是不是可以用我们之前画进度条的思路来解决：

1. 先把红色的文字全部绘制出来。

2. 然后绘制一个跟随进度变化的白色圆角矩形区域。

3. 那么该白色圆角矩形区域与文字的重叠部分，不就是文字线条部分吗？（想象一下盖章的时候，白纸就是我们的白色圆角矩形，章上面的字就是我们的文字，只不过章上面的字是突起的，盖章的时候不就是章上突起的字与白纸接触的地方被染上印泥了吗。）

4.上面一条理解了，再来分析我们的实现思路，当白色圆角矩形区域与文字重叠的时候，把重叠区域染成白色，不就成了白色的文字了吗。 5.用代码实现就是：把白色圆角矩形当做 src ，之前写好的红色文字为 dst ，采用 SRC_IN 的图形混合模式，显示出重叠部分的 src 就可以实现该效果了。

好了，上代码：

现在看这些代码应该很清晰了吧，主要注意点就是根据 scale 绘制不同的文字

这里再提一点就是，绘制 text 的时候，起始点的坐标就是文字左下角的基准点，而不是左上角，至于基准点的 Y

坐标，一般的计算方法就是：

网上对于这个有很详细的解释，这里就不过多介绍了，流传的版本也挺多。。。这一种是我都试过后感觉比较合适的。

如果需要动画效果的话（就是设置了固定进度后，进度条会一点一点走过去，而不是瞬间完成），这里只需要另外设置一个新的变量代替当前进度，而且让该新变量从0自增至当前进度大小，自增过程中让 View 重绘就可以了。

总结

好了，这一个自定义 View 已经被我们完成了（其实还有很多其他的方案，我一开始是想继承 ProgressBar，但是思路上大都差不多，有兴趣的可以自己动手实现一下哈），大家可以发现，乍看一下感觉很难很复杂的 View，在拆分成一个个小模块后，问题也就迎刃而解了，所以嘛，不要感觉自定义 View 是一个很难的东西，Google 已经为我们封装了一套很完善的 api ，剩下的就靠我们的想象力了。

写在最后

本人刚开始写博客，文笔生疏，排版不佳，有些地方表述的不太清楚，个人的理解也有不全面的地方，望各位看官轻喷。有任何的意见或者建议欢迎给我留言。

项目我已经上传到 github 了，有兴趣的可以去看一下，顺手一个 Star 也是极好的 ●_●

Github 地址：

https://github.com/zhlucky/SaleProgressView

仿淘宝淘抢购进度条——鸿洋相关推荐

Android淘宝好评星级进度条RatingBar原来可以这么玩
Android淘宝好评星级进度条RatingBar原来可以这么玩系统自带的比较老土布局文件:activity_main.xml <LinearLayout xmlns:android=&qu ...
仿淘宝网首页导航条效果
< html > < head > < meta http - equiv = " Content-Type " content = " ...
用python实现淘宝毫秒级秒！！天猫淘宝的抢购完美实现而且说实话有很多人需要它。每次在抢购前的无法提交订单导致很多买家无法购买。今天我教给大家如何更好快速实现你的购买愿望！教程如下！请仔
用python实现淘宝毫秒级秒!! 天猫淘宝的抢购完美实现而且说实话有很多人需要它. 每次在抢购前的无法提交订单导致很多买家无法购买. 今天我教给大家如何更好快速实现你的购买愿望! 教程如下!请仔细 ...
Python实战：淘宝自动抢购
Python实战:淘宝自动抢购淘宝的限时抢购活动让许多消费者都感到头痛,往往在短时间内就被抢空了.有没有想过用Python写一个抢购程序呢?今天我们就来一起学习如何使用Python实现淘宝自动抢购. ...
如何秒下单？python的淘宝秒杀抢购下单源码参考
如何秒下单?python的淘宝秒杀抢购下单源码参考疫情如期,隔离还在继续,何时工作是一个头大的问题,最近在看口罩,不少电商平台都有放出口罩,当然,手残党将会也会是一直难以下手,你可能很难抢得到,故找 ...
python实现淘宝定时抢购简易版
python实现淘宝定时抢购简易版前几天自己写了一个淘宝定时秒杀的代码,简易版的,原理很简单,首先获取淘宝服务器的时间,然后再通过模拟点击实现抢购,仅供娱乐. 获取淘宝服务器时间部分: getTim ...
Android仿淘宝淘口令实现
先复制信息到剪切板,然后再打开淘宝,.既然是复制,肯定是复制到系统的剪切板了,我们可以通过下边的代码来把口令给复制到系统的剪切板里 1 2 3 4 5 6 //获取剪贴板管理器: ClipboardM ...
微信图灵机器人自动回复和微信加淘宝淘客推广
#两块内容 1.微信图灵机器人自动回复首先去图灵机器人注册,记住秘钥要关上,不然会出现4001错误 import itchat import requests import jsondef auto ...
仿新浪微博图片加载进度条——JLPieProgressView
2019独角兽企业重金招聘Python工程师标准>>> JLPieProgressView 仿新浪微博图片加载进度条实现代码如下: #import "JLPieProgr ...

仿淘宝淘抢购进度条——鸿洋

一. 背景实现

二. 进度条实现

三. 文字实现

总结

写在最后

仿淘宝淘抢购进度条——鸿洋相关推荐

最新文章

热门文章