手摸手教你做动态壁纸

项目地址:https://github.com/JeasonWong/SnowingView

效果图:

Markdown

前几天看到有个朋友开源了一个雪花动画,感觉蛮不错的,算法简单,思路清楚,还使用了加速度传感器,于是fork下来,想在此基础上拓展下,动态壁纸应该是个不错的选择。

分析

目前github上大部分的自定义动画都是继承View实现的,包括我自己,平时都直接用View解决,但是想做动态壁纸,就必须得熟悉用SurfaceView做动画,原因是实现动态壁纸,得继承WallpaperService,并且实现自己的Engine类,而Engine类的内部实现逻辑与SurfaceView类似。

先简单介绍下SurfaceView,SurfaceView可以避免画图任务繁重的时候造成主线程阻塞,因为它可以在主线程之外的线程中向屏幕上绘图,详细使用后面再说。

了解了需要什么技术后,还有一点很重要,那就是得充分利用github上现有的轮子,这篇文章我是fork了别人已经写好的一个View,然后改了个别地方,其余的都直接照搬过来,正如我前面所说,目前github上大部分动画都是直接用View实现的,所以要学会如何花少量的时间把View转成SurfaceView尤为重要了。

其实写任何自定义View无非就是以下几点:

  • 创建各种画笔
  • 初始化各种绘图需要使用的实体
  • 各种坐标计算/实体值变化
  • onDraw()画画画

基本star数量>100的项目对以上几方面都分类的比较清楚,改成SurfaceView也相应简单点,我们只需要找准关键的onDraw()的内容,然后ctrl+c ctrl+v就好了(当然自己心里要对该轮子有数,并不是star多的项目就是好代码。。。)

具体实现

继承WallpaperService并实现内部Engine

1
2
3
4
5
6
7
8
9
10
11
12
public class SnowingPaperService extends WallpaperService {

@Override
public Engine onCreateEngine() {
return new SnowingEngine();
}

public class SnowingEngine extends Engine implements SensorEventListener {
...
}

}

重写onSurfaceChanged()

在直接使用SurfaceView的时候若想拿到View的宽高,可以从onMeasure()或者onSizeChanged()中拿到,而在WallpaperService里,可以从onSurfaceChanged中拿到,拿到后再做些需要宽高的一些初始化。

1
2
3
4
5
6
7
@Override
public void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height) {
super.onSurfaceChanged(holder, format, width, height);
mWidth = width;
mHeight = height;
createSnowFlakes();
}

重写onVisibilityChanged()

这个和常见业务开发一样,当页面不展现时总想取消一些操作,比如网络请求亦或是其他操作,在动态壁纸里,取消的当然就是让动画动起来的轮询啦。

1
2
3
4
5
6
7
8
9
10
@Override
public void onVisibilityChanged(boolean visible) {
super.onVisibilityChanged(visible);
isVisible = visible;
if (visible) {
startFall();
} else {
stopFall();
}
}

重写onSurfaceDestroyed()

在这里做些结束操作(如结束轮询)。

1
2
3
4
5
@Override
public void onSurfaceDestroyed(SurfaceHolder holder) {
super.onSurfaceDestroyed(holder);
stopFall();
}

找准优秀轮子的onDraw()

当然还是更鼓励自己写出优秀的轮子。。

这里就是之前强调的绘制层。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private void draw() {
Canvas canvas = null;
try {
canvas = mHolder.lockCanvas();
if (canvas != null) {

canvas.drawColor(Color.BLACK);

//优秀轮子的onDraw()
...
}
}finally{
if (canvas != null) {
mHolder.unlockCanvasAndPost(canvas);
}
}
}

Java层的代码基本就是以上了。

接下来就是一些配置问题了。

AndroidManifest.xml

1
2
3
4
5
6
7
8
9
10
11
12
<service
android:name="info.hellovass.snowingview.widgets.SnowingPaperService"
android:label="@string/app_name"
android:permission="android.permission.BIND_WALLPAPER">

<intent-filter>
<action android:name="android.service.wallpaper.WallpaperService"/>
</intent-filter>

<meta-data
android:name="android.service.wallpaper"
android:resource="@xml/snowing_paper"/>

</service>

snowing_paper.xml

1
2
3
<?xml version="1.0" encoding="utf-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android"
android:thumbnail="@drawable/ic_snowflake"/>

权限

1
<uses-permission android:name="android.permission.SET_WALLPAPER"/>

总结

动态壁纸的实现不难,但我觉得意义还是很大的,一是熟悉SurfaceView,二是能快速利用别人的优秀代码,三是这是目前Android独有的功能噢,iOS木有哈哈哈哈。我自己github上有一些直接用View写的轮子,欢迎大家fork下来改成动态壁纸哈~

参考文章

surfaceview刷新操作的一些优化建议

Android之SurfaceView使用总结