利用Android实现比较炫酷的自定义View

一、背景

1.1、控件效果

要实现的自定义控件效果大致如下，实现过程中用到了比较多的自定义view的api，觉得比较有代表性，就分享出来也当做学习总结

项目代码已上传github

github.com/daleige/and…

1.2、从功能上分析一下这个控件，大致有以下特点

• 随机运动粒子从圆周向圆心运动，并与切线方向有正负30°的角度差，粒子透明度、半径、运动速度随机，运动超过一定距离或者时间消失
• 背景圆有一个从内到外的渐变色
• 计时模式下圆环有一个颜色渐变的顺时针rotate动画
• 整个背景圆颜色随着扇形角度变化而变化
• 指针颜色变化
• 数字变化是上下切换动画

1.3、从结构上分析

这个控件可以拆分为两个部分，由背景圆+数字控件两个部分构成的组合控件，之所以把数字控件单独拆分出来，也是为了方便做数字上下跳动的动画，毕竟通过控制drawtext的位置实现动画感觉不方便，直接通过view的属性动画更好实现

二、 背景圆实现

2.1、实现粒子运动

使用animpoint.java表示运动粒子，它具有x,y坐标，半径，角度，运动速度，透明度等属性，通过这些属性就可以画出一个静态的粒子

粒子的初始位置位于随机角度的圆周，且一个粒子具有随机的半径，透明度，速度等，通过init()方法，实现初始化粒子如下

想让粒子运动起来，使用update更新粒子的这些坐标属性就能实现，比如粒子现在坐标在(5,5)，通过update()改变粒子的坐标到(6,6),结合属性动画不停地调用update()则就能不停的改变x,y的坐标，实现粒子运动，然后当粒子移动超过一定距离，或者调用update超过一定次数，再重新调用init()让粒子重新从圆周上开始下一个生命周期运动

在view中大致实现如下

2.2、实现渐变色圆

实现圆从内到外渐变使用radialgradient

大致实现方式如下

2.3、展示背景圆的扇形区域

原本想通过drawarc实现这个效果，但是drawarc无法实现到圆心的区域

那么如何实现这么一个不规则的形状呢，可以使用canvas.clippath()实现裁剪不规则的形状，所以只要得到扇形的path就能实现，通过圆点+弧形再闭合path就能实现

2.4、实现指针变色

指针是不规则形状，无法通过绘制几何图形实现，所以选用drawbitmap实现

至于如何实现bitmap指针图片的颜色变化呢，原本的方案是使用avoidxfermode改变指定像素通道范围内的颜色，但是avoidxfermode在api 24已经被移除，所以这方案无效

最终采用图层混合模式实现指针图片变色

通过porterduff.mode.multiply模式可以实现bitmap颜色，源图像为要修改的指针颜色，目标图像为白色指针，通过获取两个图像的重叠部分实现变色

大致实现如下

2.5、实现背景圆颜色随扇形角度变化

把圆形控件拆成3600°，每一个角度对应控件一种具体颜色值，那么如何计算特定角度他具体的颜色值呢？

参考属性动画中的变色动画android.animation.argbevaluator实现方式，计算两个颜色中具体某一个点的颜色值方式如下

控件中总共有四个颜色段，3600/4=900，所以 fraction = progressvalue % 900 / 900;

然后判断当前的角度位于第几段颜色值中，通过android.animation.argbevaluator.evaluate(float fraction, object startvalue, object endvalue) 就能回去具体的颜色值

大致实现过程如下

三、跳动数字动画实现

3.1、属性动画+2个textview实现数字上下切换动画

实现数字切换动画，原本打算用recycleview实现，但是考虑到动效上将来可能面临ui小姐姐各种骚操作，所以最终决定就用两个textview做上下translation动画，这样可控性高，对view执行属性动画也简单

numberview使用framelayout包裹两个textview，widget_progress_number_item_layout.xml

然后通过属性动画控制两个textview上下切换

这样numberview就能实现一位数字的变化是上下切换动画，具有个十百位还有时钟冒号的通过容器布局

animnumberview组合布局的方式实现表示时间和个十百位数

四、项目源码

博客只是大致讲了实现思路，具体实现请阅读源码

github.com/daleige/and…

总结

到此这篇关于利用android实现比较炫酷的自定义view的文章就介绍到这了,更多相关android自定义view内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！