手摸手教你做动态壁纸

发表于 |

项目地址：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使用总结