仿抖音加载进度条
最近在一个android学习交流群中看到有同学问仿抖音进度条加载怎么实现,刚好自己在学习自定义view,就尝试实现了一下,效果如下图,在此记录一下实现过程,如有不足,欢迎指正交流。
效果分析
首先我们来分析这个进度条的效果,可以看到刚开始进度条是固定长度的深灰色的,然后慢慢向两端延伸并且颜色渐变成透明色,到达屏幕两边时完全透明,如此循环,在这个过程中有两个要点:
- 1 长度向外延伸,由中间向两侧延伸,至屏幕边界
- 2 颜色渐变,深灰色>透明色
首先我们来分析长度向外延伸至屏幕边界,首先我们可以获取到整个view的高度,我们可以在view中心位置上画一个固定初始宽度和高度的灰色的进度条(其实就是一条灰色的线),然后定时向两边增加固定的宽度,然后再次重新绘制这个view,直到进度条的宽度大于view的宽度时,我们再次将进度条的宽度设置为初始宽度。接着执行此步骤
接着我们来分析颜色渐变,项目中我们常用的颜色表示方式有两种,一种是不带透明度,一种是带透明度,如下所示
如果我们直接改变颜色的值,由于颜色值不易控制,改变颜色值的过程中很容易出现我们不需要的颜色,所以我们可以换一种思路,通过改变颜色的透明度来达到我们的效果,我们将最开始的深灰色,通过不断加大它的透明度,最后使其变为透明色不可见,颜色的透明度由两位16进制数来表示,为ff时表明不透明,为00时表示全透明,如下图
我们知道两位16进制数表示的范围0-255,在进度条为初始宽度时设置透明度为255,随着进度条宽度逐渐增大,我们将透明度由255逐渐减小,最后变为接近全透明0,好了,废话不多说,开始上代码。
首先我们创建一个类LoadingView继承View类,并重写它的构造方法,最后一个构造方法我们一般用不到,删除就行了,让前两个构造方法调用第三个构造方法,以保证每次都会调用到第三个构造方法,如下图
接下来我们给view设置一个默认最小宽度和高度,以及进度条的初始宽度,初始颜色 并创建画笔
然后就是自定义view三部曲了,首先我们重写onMeasure方法来测量view的宽高,具体实现如下图,(每一步的说明已经写的很详细不再叙述,如果对MeasureSpec不是很了解的同学可以参考此文MeasureSpec详解)
onSizeChanged方法会在view的大小发生改变时调用,所以获取完view的宽高后我们重写onSizeChanged方法将宽高赋值给全局变量,并设置画笔高度为view的高度,如下图
接着我们重写onDraw方法开始view的绘制,具体过程如下,首先保证进度条宽度不能大于view的宽度,然后根据进度条宽度占比来计算颜色的透明度,最后给画笔设置为此颜色,然后用canvas来画一条从view的中心点开始向左右画一条宽度为进度条二分之一的线,(关于canvas的使用方法不了解的同学可以参考此文Canvas使用详解) 如下图
最后调用 invalidate()方法来不断刷新重新绘制,由于在重新绘制的过程中进度条宽度不断改变,这样就形成了进度条不断延伸的效果,效果如下
至此基本效果已经实现了,可能有的同学会说你这个最小宽度每次都要去修改,我想修改个颜色,修改个宽度,每次还要到源码中去修改,太麻烦,那么接下来我们就通过自定义属性,将一些经常更改的东西通过属性来提供(关于自定义属性,可以参考自定义属性)
首先我们在values文件夹下创建attrs.xml文件,然后在其中定义相应的属性
然后我们在view的构造函数中获取自定义属性值,并赋值给相关常量,并且根据正则表达式来判断值传入的是否正确,
接下来我们在xml布局中添加这些属性
然后运行项目,发现我们更改的属性已经生效
接下来我们来更改动画的执行时间,动画执行时间我们使用handler 来定时发送消息,并在接收到消息后再次发送,以达到循环执行的目的,然后对外提供方法更改重绘周期
我们通过findviewbyid找到此view,并设置间隔时间为100毫秒测试一下效果
至此仿抖音loadingview基本就完成了,android小白,初次写博客,如有不足的地方望多多指教 本人邮箱suntongf@126.com 项目地址Demo地址