ANDROID——仿360手机卫士的旋转打分控件

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!

简介

灵感源自360手机卫,主要功能就是实现显示评分或等级的效果。并稍微改良了一下,有更好的实用性和扩展性。

因为主要用途就是显示“分数”,“评价”,所以暂且叫它RatingView。 
RatingView由多个可自定义的RatingBar组成,RatingBar代表要显示的单个条目。


效果图:

360手机卫士截图: 
360手机卫士截图

效果图1:包含4个RatingBar。 
这里写图片描述

效果图2:可以自由设置RatingBar个数。 
这里写图片描述

效果图3:可自定义颜色 
这里写图片描述

效果图4:在我自己做的户外探子上的效果。 
这里写图片描述


组成:

RatingView

控件整体为一个RatingView,控件的外围由多个可自定义的RatingBar组成。控件中心区域可以自由添加布局或控件。

RatingBar

RatingBar代表要显示的单个条目。由3部分组成:

  • 最外圈虚线:顺时针旋转。
  • 打分条:逆时针旋转。
  • 文字:旋转结束后渐隐显示。

实现思路:

思路很简单,控件本身可以理解成一个圆,这个圆分为外圈和内圈。 
外圈:可以显示打分和文字,并且有一个旋转动画。 
内圈:可以添加任意的布局和控件。

难点在于外圈,外圈可以看成一个圆环,圆环内包含多个等分的扇形,而每一个等份可以看做一个扇形圆环。 
现在思路清晰了,只要画出等分的扇形圆环这个控件已经完成一半了。

画扇形:

Android中画图使用Canvas类,具体就不介绍了。里面有一个函数可以用来画弧线。

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

 

  • oval :指定圆弧的外轮廓矩形区域。
  • startAngle: 圆弧起始角度,单位为度。
  • sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度。
  • useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形。
  • paint: 绘制圆弧的画板属性,如颜色,是否填充等。

下面代码就可以画出一个60度的扇形圆环:

/** 定义画笔 **/
Paint paint = new Paint();
paint.setAntiAlias(true); // 抗锯齿
paint.setStyle(Paint.Style.STROKE); // 带轮廓
paint.setStrokeWidth(10);  // 轮廓宽度(轮廓宽度就是圆环宽度)

/** 定义绘制区域 **/
RectF oval = new RectF(0, 0, 100, 100); // 100 * 100的区域

/** 在onDraw方法中画弧线 **/
canvas.drawArc(oval, 0, 60, false, paint);  // 弧度0-60,不包括圆心的圆弧

 

旋转扇形:

扇形画好后,就该让它旋转起来了。Canvas已经提供了旋转的函数。

public void rotate(float degrees, float px, float py)

  • degrees :旋转的角度
  • px: 旋转点x坐标
  • py: 旋转点y坐标

可以通过Android提供的ValueAnimator,给出动画的旋转角度,然后在onDraw方法中调用旋转函数,这个扇形圆环就转起来了。

锁定画布:

前面说了,外圈还细分为最外圈的虚线,需要顺时针转,内环打分条需要逆时针转,所以这时候就需要锁定画布,让不同的扇形圆环按不同的角度旋转。

锁定画布需要使用canvas.save()canvas.restore()两个函数。

  • save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
  • restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

画文字:

在视图的最外侧有一个贴着扇形圆环的文字,所以这里就需要使用另一个canvas提供的方法来画带弧度的文字。

public void drawTextOnPath(String text,Path path,float hOffset,float vOffset,Paint paint)

  • Path绘制文本的路径
  • hOffset水平偏移
  • vOffset垂直偏移

计算:

剩下的任务就是数学计算了,需要根据Ratingbar的个数将圆环等分,并计算文字大小和位置,计算Ratingbar的每个刻度大小位置,处理动画,设置颜色等,就不一一介绍了。


使用&源码:

代码已经放在Github上了,具体的使用和源码下载大家可以访问下面的链接: 
https://github.com/a396901990/RatingView


 

猜你喜欢

转载自lishuaishuai.iteye.com/blog/2297028