绘制控件（二）--多个控件的绘制

绘制多个控件的步骤思路：

1.绘制多个继承于View的单个控件
2.将绘制的控件整合到一起（要通过继承ViewGroup来实现）
我们先来看一下实现效果
中间的波浪会有一个流动的效果 然后点击屏幕 中间绘制的文本图像会从0%加载到100%

1572266307737.gif

首先我们来画个圆：

创建一个类来管理我们绘制的控件 然后继承于View 并实现其构造方法：

image.png
image.png

然后定义画笔进行初始化操作（详细步骤见上一篇文字的讲解 这里不再赘述）

image.png

我们为了使用方便将上述的部分变量添加了getter setter方法 方便控件的尺寸、颜色、大小等属性值的传出

image.png image.png

然后在xml文件中配置一下我们绘制的控件

image.png

实现效果如图：

image.png

然后我们来绘制一个流动的曲线

效果如下：（其实很好看的 是一个流动的效果）

1572267561462.gif

首先跟上述步骤相同 定义一个类管理我们绘制的控件 然后继承于View 并实现其构造方法 这里就不再赘述

这里我们通过xml的方式自定义了属性操作：

（具体讲解请看上上篇的内容讲解）

image.png
image.png
image.png

然后设置一下路径：

image.png
（控件尺寸的度量在下个小专题中讲）
image.png

然后设置动画效果：

ValueAnimator主要是提供在执行动画过程中数值的计算，在开发中需要将计算的数值手动设置给动画执行的对象，以此来实现动画效果，因此ValueAnimator使用起来更加灵活

每次刷新后 曲线的Path的起始位置都会改变（+speed）这样使动画效果看起来像一个连续移动的曲线

image.png

在onSizeChanged方法中启动动画 （当尺寸变化后启动动画 实现连续移动的曲线效果）

image.png

绘制控件

image.png

同样为了属性值的传出方便 设置setter、getter方法

image.png image.png

最后定义一个类来整合我们绘制的控件并设置已经绘制的控件的属性将其绘制到一起

image.png

如图 创建控件 并设置属性

image.png

当进度加满的时候关闭动画

image.png
度量尺寸：
image.png

绘制控件

image.png

添加OnTouch事件 当点击以后使进度自动增加，每0.1秒增加1%

image.png
最后在Mainavtivity中设置一下 调用就ok了
image.png