照虎画猫仿支付宝信用仪表盘
这几天闲来无事,决定好好复习一下自定义控件
然后再抄一个自定义控件
仿支付宝信用仪表盘
我知道没有效果图你们是不会往下看的.
开始照虎画猫:
新建一个类继承view,重写构造:
代码中初始化自定义属性:
这里我们自定义控件设置了宽高同时又设置了权重,这样下面的控件刚好包裹住,剩下的都分配给了自定义控件
初始化画笔:
重写onDraw方法:
把画布移动到中间位置
效果如下:
drawScale画刻度
我们观察一下原图，粗的刻度线一共有6条，数字的刻度是再粗刻度线下面的，每两个粗刻度线之间有5条细刻度线，并且中间那条细刻度线下方有对应文字。我们把扫过的角度除以30，就是每个刻度的间隔了，然后通过判断就可以画对应刻度和文字了。
其中:
drawIndicator绘制进度
对于进度颜色的渐变,我们使用paint的着色器shader渲染,
它有5个子类
BitmapShader位图
LinearGradient线性渐变
RadialGradient径向渐变
SweepGradient梯度渐变
ComposeShader混合渐变
详情参考:
Android中Canvas绘图之Shader使用图文详解
详解Paint的setShader(Shader shader)
Android 图像处理(一) : Shader
我们这里使用SweepGradient,梯度渐变,也称扫描渐变,
SweepGradient可以用来创建360度颜色旋转渐变效果，具体来说颜色是围绕中心点360度顺时针旋转的，起点就是3点钟位置。
SweepGradient有两个构造函数：
SweepGradient(float cx, float cy, int color0, int color1)
SweepGradient(float cx, float cy, int[] colors, float[] positions)
我们这里使用第二个构造函数
在SweepGradient的第二个构造函数中，我们可以传入一个colors颜色数组，这样Android就会根据传入的颜色数组一起进行颜色插值。还可以指定positions数组，该数组中每一个position对应colors数组中每个颜色在360度中的相对位置，position取值范围为[0,1]，0和1都表示3点钟位置，0.25表示6点钟位置，0.5表示9点钟位置，0.75表示12点钟位置，诸如此类。如果positions数组为null，那么Android会自动为colors设置等间距的位置。
当然，起点颜色的位置不一定是0，终点颜色的位置也不一定是1，我们将positions数组改为如下所示：
float[] positions = {0.25f, 0.5f, 0.75f};
那么0.25f之前的颜色,和0.75之后的颜色都会被开始和结束的颜色填充,并不会什么都没有,这个需要注意.
对于小圆点有光源一样的边缘模糊效果,我们使用paint的setMaskFilter,其中有一个子类BlurMaskFilter模糊遮罩滤镜可以实现边缘模糊效果,这是一个过时方法,不支持硬件加速,
我们可以在View中通过
setLayerType(LAYER_TYPE_SOFTWARE, null);
只针对某个View关闭硬件加速
或者在清单文件中的activity中使用
android:hardwareAccelerated="false"
关闭activity的硬件加速
具体请参考:
Android Paint之MaskFilter详解
详解Paint的setMaskFilter(MaskFilter maskfilter)
自定义控件其实很简单1/4
看下代码:
看下效果:
最后我们来画信用值drawCenterText
对于text的测量:
使用measureText:只能测量字符串的宽度,不能测量高度
使用getTextBounds可以测量出字符串的左上右下
看下效果:
发现好多大神都把自定义控件和动画放在一起写博客,现在才知道...嗯嗯..
下面我们来处理一下进度条的动画吧!
我们给自定义控件一个getMaxNum方法,用来得到在布局中设置的最大刻度
然后获取输入框中设置的当前进度值,非空判断,然后使用属性动画的ObjectAnimator.ofPropertyValuesHolder方法,来把小球的动画及背景的动画都设置进去
属性动画请参考
Android 属性动画：这是一篇很详细的 属性动画 总结&攻略
Android 动画：你真的会使用插值器与估值器吗？（含详细实例教学）
PropertyValuesHolder请参考:
自定义控件三部曲之动画篇(八)——PropertyValuesHolder与Keyframe
我们这里的背景使用了两种颜色的渐变,自己定义开始起始颜色,结束颜色我们根据输入框设置的进度使用一个ArgbEvaluator来获取.大家可参考原文的方式,或者参考这一篇作者设置颜色的方法.
Android仿支付宝9.5芝麻信用分仪表盘
OK,我们看下整体效果:
源码地址:
https://github.com/walle9/RoundIndicatorView
总结:
自定义控件看似简单,但是其中涉及到的东西还是挺杂的,包括事件分发,动画等等,有时间还是画个思维导图好好梳理下.
over...
