Android自定义View 百分比进度动画

二话不说!先来看效果!

1.gif

之前在群上见有小白问怎么实现这个效果(不带动画),于是就自己动手写了一个自定义View并实现了进度“动画”效果。

为啥“动画”带引号,因为在自定义View中没有使用到动画,而达到动画的效果是因为更新视图实现的。

此篇文章需要有自定义View的基础推荐个地址:https://github.com/GcsSloop/AndroidNote

下面开始此View的思路代码讲解

       Paint mPaint1 = new Paint();//整体背景色
       Paint mPaint2 = new Paint();//进度条黄色
       Paint mPaint3 = new Paint();//设置字体颜色
       Paint mPaint4 = new Paint();//透明色

首先自定义了四个画笔

写了三个赋值方法


2

在自定义View上加文字让其竖着居中,会有文字底部位于居中线上的情况,导致文字并没有居中。上面代码通过画笔Paint算出居中位置。


3

算出View在屏幕中的百分比长度,要拿 宽/100*Double = 长度。由于Double计算不精确需要判断在100%的情况下需要View宽度充满屏幕。


4

mPaint4绘制透明进度条(全长),先绘制一条透明的View这个View的长是最后确定的View长。
mPaint2绘制的进度条是动画的进度条,在未确定View长时绘制的长


5

这是重点!!!
下图的代码作用是:当两个值相等时让之前绘制好的透明View mPaint4和mPaint2交换颜色,原因是由于RecyclerView的Adapter缓存和View 的postInvalidate()方法有莫名其妙的冲突会导致View长度错乱,目前仍没找到彻底解决的方法,有兴趣的朋友可以下Demo把View换成ProportionView2和ProportionView3找一下问题。


6

这是一个简单的自定义View,此篇文章结束,最后附上Demo地址:
https://github.com/NathansLiu/ProportionView

你可能感兴趣的:(Android自定义View 百分比进度动画)