Erstellung von einem Live Wallpaper auf Android mit einem animierten GIF

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Haben Sie jemals ein wunderschönes animiertes GIF gesehen, das sich nahtlos wiederholt, und sich gefragt, ob Sie es als Live-Hintergrundbild auf Ihrem Android-Gerät verwenden können? Nun, das können Sie, und in diesem Tutorial werde ich Ihnen zeigen, wie.

Einführung

Das Erstellen eines interessanten und schönen Live-Hintergrundbilds von Grund auf mit nur Mathematik und Code zum Generieren der Grafiken kann mühsam und zeitaufwändig sein. Es erfordert auch viel Kreativität. Auf der anderen Seite ist es viel einfacher, ein animiertes GIF zu erstellen oder eines online zu finden. In diesem Tutorial erfahren Sie, wie Sie animierte GIFs in ein Live-Hintergrundbild konvertieren.

Voraussetzungen

Stellen Sie sicher, dass Sie die neueste Version von Android Studio eingerichtet haben. Sie können es von der Android Developer-Website herunterladen.

Obwohl jedes animierte GIF ausreicht, empfehle ich Ihnen, einen guten Cinemagraph herunterzuladen. Ein Cinemagraph ist nichts anderes als ein animiertes GIF - normalerweise aus einem Video erstellt -, das sich nahtlos wiederholt. Auf Flickr finden Sie viele gute.

Für dieses Tutorial verwende ich einen Cinemagraph, der vom Flickr-Benutzer djandyw.com erstellt wurde, da er unter einer Creative Commons-Lizenz verfügbar ist.

1. Erstellen Sie ein neues Projekt

Starten Sie Android Studio, erstellen Sie ein neues Projekt und benennen Sie das Projekt GIFWallpaper. Wählen Sie einen eindeutigen Paketnamen, wenn Sie diese App auf Google Play veröffentlichen möchten.

Stellen Sie das minimale SDK auf API 8: Android 2.2 (Froyo) ein.

Unsere App wird keine Activity haben. Wählen Sie also Keine Aktivität hinzufügen und klicken Sie auf Fertig stellen.

2. Beschreiben Sie das Hintergrundbild

Ein Live-Hintergrund benötigt eine Datei, die es beschreibt. Erstellen Sie eine neue XML-Datei mit dem Namen res/xml/wallpaper.xml und ersetzen Sie deren Inhalt durch das folgende XML:

<?xml version="1.0" encoding="UTF-8"?>
<wallpaper 
  xmlns:android="http://schemas.android.com/apk/res/android"
    android:label="GIF Wallpaper"
    android:thumbnail="@drawable/ic_launcher">
</wallpaper>

Das Etikett und die Miniaturansicht sind besonders wichtig, da sie verwendet werden, wenn das Hintergrundbild in der Liste der auf Ihrem Gerät verfügbaren Hintergrundbilder angezeigt wird.

3. Bearbeiten Sie das Manifest

Um als Live-Hintergrundbild ausgeführt zu werden, benötigt unsere App nur eine Berechtigung, android.permission.BIND_WALLPAPER.

Ein Live-Hintergrundbild wird als Service ausgeführt, der die Absichtsaktion android.service.wallpaper.WallpaperService empfangen kann. Benennen Sie den Service GIFWallpaperService und fügen Sie ihn dem Manifest des Projekts, AndroidManifest.xml, hinzu.

<service
    android:name=".GIFWallpaperService"
    android:enabled="true"
    android:label="GIF Wallpaper"
    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/wallpaper" >
    </meta-data>
</service>

Um sicherzustellen, dass die App nur auf Geräten installiert werden kann, auf denen Live-Hintergründe ausgeführt werden können, fügen Sie dem Manifest den folgenden Ausschnitt hinzu:

1	<uses-feature
2	android:name="android.software.live_wallpaper"
3	android:required="true" >
4	</uses-feature>

4. Fügen Sie animiertes GIF hinzu

Kopieren Sie das animierte GIF, das Sie von Flickr heruntergeladen haben, in den assets-Ordner des Projekts. Ich habe das GIF girl.gif genannt.

5. Erstellen Sie den Service

Erstellen Sie eine neue Java-Klasse und nennen Sie sie GIFWallpaperService.java. Diese Klasse sollte die WallpaperService-Klasse erweitern.

1	public class GIFWallpaperService extends WallpaperService {
2
3	}

Da WallpaperService eine abstrakte Klasse ist, müssen Sie die onCreateEngine-Methode überschreiben und eine Instanz Ihrer eigenen Engine zurückgeben, die die Frames des GIF rendern kann.

Um das animierte GIF zu verwenden, müssen Sie es zunächst in ein Movie-Objekt konvertieren. Sie können dazu die decodeStream-Methode der Movie-Klasse verwenden. Übergeben Sie das Movie-Objekt nach dem Erstellen als Parameter an den Konstruktor der benutzerdefinierten Engine.

So sollte die onCreateEngine-Methode aussehen:

@Override
public WallpaperService.Engine onCreateEngine() {
    try {
		Movie movie = Movie.decodeStream(
                getResources().getAssets().open("girl.gif"));

		return new GIFWallpaperEngine(movie);
	}catch(IOException e){
		Log.d("GIF", "Could not load asset");
		return null;
	}
}

6. Erstellen Sie die Engine

Beginnen wir jetzt mit der Arbeit an der Engine. Erstellen Sie eine Klasse mit dem Namen GIFWallpaperEngine in der GIFWallpaperService-Klasse und erweitern Sie WallpaperService.Engine.

Fügen Sie dieser neuen Klasse die folgenden Felder hinzu:

frameDuration: Diese Ganzzahl repräsentiert die Verzögerung zwischen den Neuzeichnungsvorgängen. Bei einem Wert von 20 erhalten Sie 50 Bilder pro Sekunde.
visible: Dieser Boolesche Wert informiert die Engine darüber, ob das Live-Hintergrundbild derzeit auf dem Bildschirm sichtbar ist. Dies ist wichtig, da wir das Hintergrundbild nicht zeichnen sollten, wenn es nicht sichtbar ist.
movie: Dies ist das animierte GIF in Form eines Movie-Objekts.
holder: Dies bezieht sich auf das SurfaceHolder-Objekt, das der Engine zur Verfügung steht. Es muss durch Überschreiben der onCreate-Methode initialisiert werden.
handler: Dies ist ein Handler-Objekt, mit dem ein Runnable gestartet wird, das für das eigentliche Zeichnen des Hintergrundbilds verantwortlich ist.

Ihre Klasse sollte jetzt so aussehen:

private class GIFWallpaperEngine extends WallpaperService.Engine {
    private final int frameDuration = 20;

    private SurfaceHolder holder;
    private Movie movie;
    private boolean visible;
    private Handler handler;

    public GIFWallpaperEngine(Movie movie) {
        this.movie = movie;
        handler = new Handler();
    }

    @Override
    public void onCreate(SurfaceHolder surfaceHolder) {
        super.onCreate(surfaceHolder);
        this.holder = surfaceHolder;
    }
}

Erstellen Sie als Nächstes eine Methode namens draw, die den Inhalt des animierten GIF zeichnet. Lassen Sie uns diese Methode aufschlüsseln:

Wir prüfen zunächst, ob die visible Variable auf true gesetzt ist. Wir machen nur weiter, wenn es so ist.
Verwenden Sie die lockCanvas-Methode des SurfaceHolder, um einen Canvas zum Zeichnen zu erhalten.
Zeichnen Sie nach dem Skalieren und Positionieren einen Rahmen des animierten GIF auf die Canvas.
Wenn alle Zeichnungen fertig sind, übergeben Sie den Canvas zurück an den SurfaceHolder.
Aktualisieren Sie den aktuellen Frame des animierten GIF mithilfe der setTime-Methode des Movie-Objekts.
Rufen Sie die Methode erneut mit dem handler auf, nachdem Sie auf frameDuration Millisekunden gewartet haben.

Die draw -methode wird niemals direkt aufgerufen. Es wird immer mit einem Handler und einem Runnable Objekt aufgerufen. Machen wir das Runnable-Objekt daher zu einem Feld der Klasse und nennen es drawGIF.

Fügen Sie der GIFWallpaperService-Klasse den folgenden Code hinzu:

private Runnable drawGIF = new Runnable() {
    public void run() {
        draw();
    }
};

private void draw() {
    if (visible) {
        Canvas canvas = holder.lockCanvas();
        canvas.save();
            // Adjust size and position so that
            // the image looks good on your screen
            canvas.scale(3f, 3f);
            movie.draw(canvas, -100, 0);
        canvas.restore();
        holder.unlockCanvasAndPost(canvas);
        movie.setTime((int) (System.currentTimeMillis() % movie.duration()));

        handler.removeCallbacks(drawGIF);
        handler.postDelayed(drawGIF, frameDuration);
    }
}

Die onVisibilityChanged-Methode wird automatisch aufgerufen, wenn sich die Sichtbarkeit des Hintergrundbilds ändert. Wir müssen es überschreiben und basierend auf dem Wert des visible Arguments drawGIF entweder starten oder stoppen. Die removeCallbacks-Methode des Handler wird verwendet, um ausstehende drawGIF-Läufe zu stoppen.

@Override
public void onVisibilityChanged(boolean visible) {
    this.visible = visible;
    if (visible) {
        handler.post(drawGIF);
    } else {
        handler.removeCallbacks(drawGIF);
    }
}

Überschreiben Sie abschließend die onDestroy-Methode der Engine, um ausstehende drawGIF-Läufe zu stoppen, wenn das Hintergrundbild deaktiviert ist.

@Override
public void onDestroy() {
    super.onDestroy();
    handler.removeCallbacks(drawGIF);
}

7. Kompilieren und installieren

Ihr Live-Hintergrund ist jetzt fertig. Kompilieren Sie es und installieren Sie es auf Ihrem Android-Gerät. Nach der Installation sollten Sie das Hintergrundbild in der Liste der verfügbaren Hintergrundbilder finden können.

Die meisten Starter bieten Ihnen die Möglichkeit, das Hintergrundbild nach einer langen Tippgeste zu ändern. Alternativ können Sie zu den Anzeigeeinstellungen gehen, um das Hintergrundbild zu ändern.

Wenn das GIF zu klein aussieht oder nicht richtig positioniert ist, kehren Sie zur draw-methode zurück und passen Sie den Maßstab und die Position an.

Abschluss

Sie wissen jetzt, wie Sie mit einem animierten GIF ein Live-Hintergrundbild erstellen. Fühlen Sie sich frei, mit mehr GIFs zu experimentieren. Wenn Sie vorhaben, Ihr Live-Hintergrundbild bei Google Play zu veröffentlichen, stellen Sie sicher, dass Sie die Erlaubnis des Erstellers haben, das animierte GIF kommerziell zu verwenden. Besuchen Sie die Android Developer-Website, um mehr über die WallpaperService-Klasse zu erfahren.