×

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

96
luckyzh
2017.08.20 16:08* 字数 2199

前言

       最近项目中新增了一个抢购模块,需要一个进度指示条,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 





随笔
Web note ad 1