Android自定义View实现星星评分效果 |
||||||||||||||
|
+ 目录
前言在前面的学习中，我们基本了解了一些 Canvas 的绘制，那么这一章我们一起复习一下图片的绘制几种方式，和事件的简单交互方式。 我们从易到难，作为基础的进阶控件，我们从最简单的交互开始，那就自定义一个星星评分的控件吧。 一个 App 必不可少的评论系统打分的控件，可以展示评分，可以点击评分，可以滑动评分。它的实现总体上可以分为以下的步骤：
思路我们已经有了，下面一步一步的来实现吧。 话不多说，Lets go
1、测量与图片的绘制我们需要绘制几个星星，那么我们必须要设置的几个属性： 当前的评分值，总共有几个星星，每一个星星的间距和大小，选中和未选中的Drawable图片：
?
测量布局的时候，我们就不能根据xml设置的 match_parent 或 wrap_content 来设置宽高，我们需要根据星星的大小与间距来动态的计算，所以不管xml中如何设置，我们都强制性的使用我们自己的测量。 星星的数量 * 星星的宽度再加上中间的间距 * 数量-1，就是我们的控件宽度，控件高度则是星星的高度。 具体的确定测量我们再上一篇已经详细的复习过了，这里直接贴代码：
?
这样就可以得到对应的测量宽高 （加一个背景方便看效果）：
如何绘制星星？直接绘制Drawable即可，默认的Drawable的绘制为:
?
如果有5个星星图片，那么就为每一个星星定好位置：
那么已经选中的图片也需要使用这种方法绘制吗？ 计算当前的评分，然后计算计算需要绘制多少星星，那么就是这样做：
?
可是这么做不符合我们的要求啊 ，我们是需要是可以显示评分为2.5之类值，那么我们怎么能绘制半颗星呢？Drawable.draw(canvas) 的方式满足不了，那我们可以使用 BitmapShader 的方式来绘制。 初始化一个 BitmapShader 设置给 Paint 画笔，通过画笔就可以画出对应的形状。 比如此时的场景，我们如果想只画0.5个星星，那么我们就可以
?
那么如果是大于一个星星之后的小数点就可以用公式计算
?
效果：
关于 BitmapShader 的其他用法，可以翻看我之前的自定义圆角圆形View，和自定义圆角容器的文章，里面都有用到过，主要是方便一些图片的裁剪和缩放等。
2、事件的交互与计算这里并没有涉及到什么事件嵌套，拦截之类的复杂处理，只需要处理自身的 onTouch 即可。而我们需要处理的就是按下的时候和移动的时候评分值的变化。 在onDraw方法中，我们使用 mScoreNum 变量来绘制的已评分的 Bitmap 绘制。所以这里我们只需要在 onTouch 中计算出对应的 mScoreNum 值，让其重绘即可。
?
|
