Android 怎样画出一个好看的LoadingView~
哈。。。自定义View真的不难, 一些酷炫的View看着很玄乎,其实只要把自己的思路捋清晰了一步一步的去做绝对能做出来,过程很痛苦但写出来了也很有成就感不是~接下来我分享的是一个自己画的看着很神奇(我反正是觉得挺神奇的 = =!)其实炒鸡简单的自定义Loading。
上效果图
loading.gif
下面开始说一下画这个loadingView的过程。
-
第一步
观察一下上面的这个动图,想象下当他是静止时的样子,在纸上画画~这里我就不贴图了,我帮你们想,上下左右各一个圆并且边缘处有交集,最原始的图只有4个圆,就是这样的。上代码
for (int i = 0; i < 4; i++) {
canvas.rotate(90 * i);
mPaint.setColor(colors[i]);
canvas.drawCircle(0, -((width / 2 - insideRectWidth) / 2 + insideRectWidth) + oneStepValue, threeStepValue, mPaint);
}
我们在onDraw方法里面写一个for循环,循环4次每循环1次画一个圆然后将画布旋转90°这样4个圆就画出来了。
-
第二步
4个方位的圆已经画出来了如何让他动起来呢?
我们先看一下这行代码
canvas.rotate(twoStepValue);
意思是将画布旋转twoStepValue度,twoStepValue这个值是通过
PropertyValuesHolder twoAnimation = PropertyValuesHolder.ofInt(TWOANIM, 0, 359);
这个属性持有者来动态改变的 从0-359度,至于不到360度的原因是在圆的角度上来说 360度==0度,如果写360度就会在这个度数上重复两次,就会有那么点点的能感觉出来的卡顿。
oneStepValue = (int) animation.getAnimatedValue(ONEANIM);
twoStepValue = (int) animation.getAnimatedValue(TWOANIM);
threeStepValue = (int) animation.getAnimatedValue(THREE);
invalidate();
这里赋值完成之后刷新界面,四个方位的圆就跟着动起来了。
-
第三步
上两步完成之后4个圆确实是动起来了,但是也只是绕着控件周围移动而不会向控件中心移动,这不是我们想要的效果,下面说下向中心移动的思路在Android中画出来的圆是由x,y坐标构成圆心加上半径组成的。。。所以呢,我们只需要更改他的y坐标就好啦是不是炒鸡简单!!!
canvas.drawCircle(0, -((width / 2 - insideRectWidth) / 2 + insideRectWidth) + oneStepValue, threeStepValue, mPaint);
x坐标永远为0,动态的改变y的坐标从而达到我们想要的效果。
-
第四步
现在的View已经很漂亮了~不过还是可以在小小的点缀下的, threeStepValue这个变量是不是很眼熟没错,在步骤三出现过,他的本名叫半径,是一个动态的半径(这个半径是算出来的,不贴怎么算的了后面有源码)。。改变他,就会忽大忽小了
完成了~~我知道写文章要用Markdown了!确实很优雅啊又学到了新知识共同进步!加油以后我可能每周都会写点东西,嗯。。不管写的好不好我都要写,再就是希望对各位看官稍微有那么点帮助我就很开心了~