Créer un fond d’écran animé sur Android à l’aide d’un GIF animé

Avez-vous déjà vu un beau GIF animé qui se boucle de manière transparente et vous êtes-vous demandé si vous pouviez l’utiliser comme fond d’écran en direct sur votre appareil Android? Eh bien, vous pouvez, et dans ce tutoriel, je vais vous montrer comment.

Vous recherchez un raccourci?

Si vous préférez utiliser une solution toute faite au lieu de la coder vous-même, essayez le GIF Fond d’écran animé article sur Envato Market. Il vous permet de créer votre propre application Android Live Wallpaper basée sur des GIF animés.

introduction

Créer un fond d’écran en direct intéressant et beau à partir de zéro en utilisant uniquement des mathématiques et du code pour générer les graphiques peut être fastidieux et prendre du temps. Cela demande également beaucoup de créativité. D’un autre côté, créer un GIF animé ou en trouver un en ligne est beaucoup plus facile. Dans ce didacticiel, vous allez apprendre à convertir n’importe quel GIF animé en fond d’écran animé.

Conditions préalables

Assurez-vous que vous disposez de la dernière version d’Android Studio. Vous pouvez l’obtenir auprès du Site Web des développeurs Android.

Même si n’importe quel GIF animé fera l’affaire, je vous suggère de télécharger un bon cinémagraphe. Un cinemagraph n’est rien d’autre qu’un GIF animé – généralement créé à partir d’une vidéo – qui se déroule en boucle. Vous pouvez en trouver plein de bons sur Flickr.

Pour ce tutoriel, j’utilise un cinémagraphe créé par l’utilisateur Flickr djandyw.com car il est disponible sous une licence Creative Commons.

1. Créer un nouveau projet

Démarrez Android Studio, créez un nouveau projet et nommez le projet GIFWallpaper. Choisissez un nom de package unique si vous prévoyez de publier cette application sur Google Play.

Définissez le SDK minimum sur API 8: Android 2.2 (Froyo).

Notre application n’aura pas de Activity, alors choisis Ajouter aucune activité et cliquez terminer.

2. Décrivez le papier peint

Un fond d’écran animé a besoin d’un fichier qui le décrit. Créez un nouveau fichier XML nommé res / xml / wallpaper.xml et remplacez son contenu par le XML suivant:

<?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>

L’étiquette et la vignette sont particulièrement importantes car elles seront utilisées lorsque le fond d’écran apparaîtra dans la liste des fonds d’écran disponibles sur votre appareil.

3. Modifier le manifeste

Pour fonctionner comme fond d’écran en direct, notre application n’a besoin que d’une seule autorisation, android.permission.BIND_WALLPAPER.

Un fond d’écran animé fonctionne comme un Service qui peut recevoir le android.service.wallpaper.WallpaperService action d’intention. Nomme le Service GIFWallpaperService et ajoutez-le au manifeste du projet, AndroidManifest.xml.

<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>

Ensuite, pour vous assurer que l’application ne peut être installée que sur les appareils pouvant exécuter des fonds d’écran animés, ajoutez l’extrait de code suivant au manifeste:

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

4. Ajouter un GIF animé

Copiez le GIF animé que vous avez téléchargé depuis Flickr vers le les atouts dossier du projet. J’ai nommé le GIF girl.gif.

5. Créer le service

Créez une nouvelle classe Java et nommez-la GIFWallpaperService.java. Cette classe devrait étendre la WallpaperService classe.

public class GIFWallpaperService extends WallpaperService {
    
}

Car WallpaperService est une classe abstraite, vous devez remplacer son onCreateEngine méthode et renvoyez une instance de votre choix Engine, qui peut rendre les cadres du GIF.

Pour utiliser le GIF animé, vous devez d’abord le convertir en un Movie objet. Vous pouvez utiliser le Movie classe decodeStream méthode pour le faire. Une fois la Movie objet a été créé, passez-le en paramètre au constructeur de la personnalisation Engine.

C’est ce que le onCreateEngine La méthode devrait ressembler à:

@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. Créer le moteur

Commençons à travailler sur le Engine maintenant. Créez une classe nommée GIFWallpaperEngine à l’intérieur de GIFWallpaperService classe et fais-le s’étendre WallpaperService.Engine.

Ajoutez les champs suivants à cette nouvelle classe:

• frameDuration: Cet entier représente le délai entre les opérations de redessiner. Une valeur de 20 vous donne 50 images par seconde.
• visible: Ce booléen permet au moteur de savoir si le fond d’écran en direct est actuellement visible à l’écran. Ceci est important, car nous ne devrions pas dessiner le papier peint lorsqu’il n’est pas visible.
• movie: Il s’agit du GIF animé sous la forme d’un Movie objet.
• holder: Cela fait référence au SurfaceHolder objet disponible pour le moteur. Il doit être initialisé en remplaçant le onCreate méthode.
• handler: C’est un Handler objet qui sera utilisé pour démarrer un Runnable qui est responsable du dessin du papier peint.

Votre classe devrait maintenant ressembler à ceci:

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;
    }
}

Ensuite, créez une méthode nommée draw qui dessine le contenu du GIF animé. Décomposons cette méthode:

• Nous vérifions d’abord si le visible la variable est définie sur true. Nous continuons seulement si c’est le cas.
• Utilisez le SurfaceHolderde lockCanvas méthode pour obtenir un Canvas pour dessiner.
• Dessinez un cadre du GIF animé sur le Canvas après sa mise à l’échelle et son positionnement.
• Une fois que tout le dessin est terminé, passez le Canvas Retour à la SurfaceHolder.
• Mettez à jour l’image actuelle du GIF animé à l’aide de la Movie objets setTime méthode.
• Appelez à nouveau la méthode en utilisant le handler après avoir attendu frameDuration millisecondes.

le draw La méthode n’est jamais appelée directement. Il est toujours appelé à l’aide d’un Handler et un Runnable objet. Par conséquent, faisons le Runnable objectez un champ de la classe et appelez-le drawGIF.

Ajoutez le code suivant au GIFWallpaperService classe:

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);
    }
}

le onVisibilityChanged La méthode est automatiquement appelée chaque fois que la visibilité du papier peint change. Nous devons le remplacer et, en fonction de la valeur du visible argument, démarrer ou arrêter drawGIF. le removeCallbacks méthode de la Handler est utilisé pour arrêter toute attente drawGIF s’exécute.

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

Enfin, remplacez le onDestroy méthode de la Engine pour arrêter tout en attente drawGIF s’exécute si le fond d’écran est désactivé.

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

7. Compilez et installez

Votre fond d’écran en direct est maintenant prêt. Compilez-le et installez-le sur votre appareil Android. Une fois installé, vous devriez pouvoir trouver le fond d’écran dans la liste des fonds d’écran disponibles.

La plupart des lanceurs vous offrent la possibilité de changer le fond d’écran après un long geste. Vous pouvez également accéder aux paramètres d’affichage pour modifier le fond d’écran.

Si le GIF semble trop petit ou n’est pas positionné correctement, revenez à la draw méthode et ajustez l’échelle et la position.

Conclusion

Vous savez maintenant comment utiliser un GIF animé pour créer un fond d’écran animé. N’hésitez pas à expérimenter avec plus de GIF. Si vous prévoyez de publier votre fond d’écran animé sur Google Play, assurez-vous d’avoir l’autorisation du créateur pour utiliser le GIF animé à des fins commerciales. Visiter le Site Web des développeurs Android pour en savoir plus sur le WallpaperService classe.