今天给大家分享一个android的波浪图控件制作。具体效果如下图所示:
上次有个app使用了这个控件,感觉特别酷炫。今天讲解一下这个控件的思路分析与代码编写。
思路分析:
1.绘制波浪图
2.移动波浪图
3.使用Xfermode绘制圆形图片
4.找到中心点与波浪点的交界处绘制图片。根据以上分析开始完成自定义控件。自定义控件第一步都是继承一个View,重写构造方法,获取一些波浪变量。并且制作圆形图片。具体代码如下:
以上代码都是简单的获取基本属性。关于制作圆形图片采用Xfermode来实现,相当于一个圆形图和一个正方形图采用相交的方式来获取圆图。详细Xfermode可访问
/u011418943/article/details/79310254
在实例化波浪效果基本参数之后。我们需要获取控件的宽高,根据控件宽高进行一些变量计算。而获取控件宽高都是在onMeasure()方法中。如下图所示:接下来就是今天重点,绘制波形图。
我们起点可以多画一个周期的波浪,终点夜神多画一个周期。当一个周期结束时,我们又可以从头开始进行移动,这样就可以给人一种无限波浪效果。那么如何绘制这种波浪图以及在哪里绘制波浪图呢?在android中,绘制控件我们都是重写onDraw()方法。而且绘制波浪效果,可以使用Path对象,其中的贝塞尔曲线就可以绘制出该波浪图(不明白贝塞尔曲线的可以百度。很简单的)。具体代码如下:
这样,我们就可以绘制一个静态的波浪图效果了。接下来只需要增加一个水平移动的动画即可。这里采用的属性动画。具体代码如下:
这样我们自定义的空间就已经完成。接下来创建代码测试。
以上就是今天的内容分享。
如需代码可以访问/wqercs/waveview/tree/master
感兴趣的小伙伴可以自己试试,还是比较简单的一个内容
再次做个广告。本人有一套java后台高级开发以及android高级开发视频。感兴趣的小伙伴可以私聊我。