Android自定义View - 仿淘宝淘抢购进度条

前言

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

      呐，就长这样：

 

我没开淘宝店。。。

 

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

       不过为了世界和平，还是要给PM点赞。

 

       吐槽归吐槽，需求还是要做的（广大程序员的劳苦心声。。。）

      一番努力过后，终于撸出来了（没毛病），先给大家看一下实现的最终效果：

 

高仿山寨版

 

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

效果实现

 一. 背景实现

      分析：背景边框是一个圆角矩形，用 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