Maak een Live Wallpaper op Android met behulp van een geanimeerde GIF

Heb je ooit een prachtige geanimeerde GIF gezien die naadloos in een lus past en vroeg je af of je hem als live wallpaper op je Android-apparaat zou kunnen gebruiken? Nou, dat kan, en in deze tutorial ga ik je laten zien hoe.

Op zoek naar een snelkoppeling?

Als je liever een kant-en-klare oplossing gebruikt in plaats van het zelf te coderen, probeer dan het GIF Live Wallpaper-item op Envato Market. Hiermee kunt u uw eigen Live Wallpaper Android-app maken op basis van geanimeerde GIF's. 

Invoering

Het creëren van een interessante en mooie live wallpaper vanuit het niets met alleen wiskunde en code om de graphics te genereren, kan vervelend en tijdrovend zijn. Het vereist ook veel creativiteit. Aan de andere kant is het een stuk eenvoudiger om een ​​geanimeerde GIF te maken of een online te vinden. In deze tutorial leer je hoe je elke geanimeerde GIF in een live wallpaper converteert.

voorwaarden

Zorg ervoor dat je de nieuwste versie van Android Studio hebt ingesteld. Je kunt het krijgen van de Android Developer-website.

Hoewel elke geanimeerde GIF het doet, raad ik aan dat je een goede cinemagraph downloadt. Een cinemagraph is niets anders dan een geanimeerde GIF - meestal gemaakt van een video - die naadloos in een lus past. Je kunt veel goede vinden op Flickr.

Voor deze zelfstudie gebruik ik een cinemagraph gemaakt door Flickr-gebruiker djandyw.com omdat deze beschikbaar is onder een Creative Commons-licentie.

1. Maak een nieuw project

Start Android Studio, maak een nieuw project en geef een naam aan het project GIFWallpaper. Kies een unieke pakketnaam als u van plan bent om deze app op Google Play te publiceren.

Stel de minimum SDK in op API 8: Android 2.2 (Froyo).

Onze app zal geen hebben Activiteit, dus kies Voeg geen activiteit toe en klik Af hebben.

2. Beschrijf de achtergrond

Een live wallpaper heeft een bestand nodig dat dit beschrijft. Maak een nieuw XML-bestand met de naam res / xml / wallpaper.xml en vervang de inhoud door de volgende XML:

  

Het label en de thumbnail zijn bijzonder belangrijk omdat ze worden gebruikt wanneer de achtergrond wordt weergegeven in de lijst met beschikbare achtergronden op uw apparaat.

3. Bewerk het manifest

Om als live wallpaper te worden uitgevoerd, heeft onze app slechts één toestemming nodig, android.permission.BIND_WALLPAPER.

Een live wallpaper wordt uitgevoerd als een Service die de  android.service.wallpaper.WallpaperService intentie actie. Noem de Service GIFWallpaperService en voeg het toe aan het manifest van het project, AndroidManifest.xml.

      

Als u vervolgens wilt dat de app alleen kan worden geïnstalleerd op apparaten waarop live achtergronden kunnen worden uitgevoerd, voegt u het volgende fragment toe aan het manifest:

 

4. Voeg geanimeerde GIF toe

Kopieer de geanimeerde GIF die je hebt gedownload van Flickr naar de middelen map van het project. Ik heb de GIF genoemd girl.gif.

5. Maak de service

Maak een nieuwe Java-klasse en geef deze een naam GIFWallpaperService.java. Deze klasse zou het moeten uitbreiden WallpaperService klasse.

openbare klasse GIFWallpaperService verlengt WallpaperService 

Omdat WallpaperService is een abstracte klasse, je moet deze overschrijven onCreateEngine methode en stuur een eigen exemplaar terug Motor, die de frames van de GIF kan weergeven.

Om de geanimeerde GIF te gebruiken, moet je deze eerst converteren naar een Film voorwerp. U kunt de Film klasse decodeStream methode om dit te doen. Zodra de Film object is gemaakt, geef het door als een parameter aan de constructor van de aangepaste Motor.

Dit is wat de onCreateEngine methode moet er als volgt uitzien:

@Override public WallpaperService.Engine onCreateEngine () try Movie movie = Movie.decodeStream (getResources (). GetAssets (). Open ("girl.gif")); retourneer nieuw GIFWallpaperEngine (film);  catch (IOException e) Log.d ("GIF", "Kon geen activum laden"); return null; 

6. Maak de motor

Laten we beginnen aan de Motor nu. Maak een klasse met de naam GIFWallpaperEngine binnen in de GIFWallpaperService klasse en laat het uitbreiden WallpaperService.Engine.

Voeg de volgende velden toe aan deze nieuwe klasse:

  • frameDuration: Dit gehele getal vertegenwoordigt de vertraging tussen opnieuw uitgevoerde bewerkingen. Een waarde van 20 geeft u 50 frames per seconde.
  • zichtbaar: Met deze boolean weet de engine of de live achtergrond momenteel zichtbaar is op het scherm. Dit is belangrijk, want we mogen de achtergrond niet tekenen wanneer deze niet zichtbaar is.
  • film: Dit is de geanimeerde GIF in de vorm van een Film voorwerp.
  • houder: Dit verwijst naar de SurfaceHolder object beschikbaar voor de motor. Het moet worden geïnitialiseerd door het overschrijven van de onCreate methode.
  • handler: Dit is een handler object dat zal worden gebruikt om een ​​te starten uitvoerbare dat is verantwoordelijk voor het daadwerkelijk tekenen van het behang.

Je klas zou er nu als volgt uit moeten zien:

private class GIFWallpaperEngine breidt WallpaperService.Engine uit private finale int frameDuration = 20; privé houder voor SurfaceHolder; privéfilm; privé boolean zichtbaar; particuliere afhandelaar voor handlers; public GIFWallpaperEngine (Movie movie) this.movie = movie; handler = nieuwe handler ();  @Override public void onCreate (SurfaceHolder surfaceHolder) super.onCreate (surfaceHolder); this.holder = surfaceHolder; 

Maak vervolgens een methode met de naam trek die de inhoud van de geanimeerde GIF tekent. Laten we deze methode verbreken:

  • We controleren eerst of het zichtbaar variabele is ingesteld op waar. We gaan alleen verder als het zo is.
  • Gebruik de SurfaceHolder's lockCanvas methode om een ​​te krijgen Canvas tekenen.
  • Teken een frame van de geanimeerde GIF op de Canvas na het schalen en positioneren.
  • Als de tekening klaar is, passeert u de Canvas terug naar de SurfaceHolder.
  • Werk het huidige frame van de geanimeerde GIF bij met behulp van de Film voorwerpen tijd instellen methode.
  • Roep de methode opnieuw aan met behulp van de handler na het wachten op frameDuration milliseconden.

De trek methode wordt nooit rechtstreeks aangeroepen. Het wordt altijd met behulp van een handler en een uitvoerbare voorwerp. Laten we daarom het maken uitvoerbare object een veld van de klasse en noem het drawGIF.

Voeg de volgende code toe aan de GIFWallpaperService klasse:

private Runnable drawGIF = new Runnable () public void run () draw (); ; private ongeldige trekking () if (visible) Canvas canvas = holder.lockCanvas (); canvas.save (); // Pas grootte en positie aan zodat // de afbeelding er goed uitziet op uw canvas.scale canvas (3f, 3f); film.draw (canvas, -100, 0); canvas.restore (); holder.unlockCanvasAndPost (canvas); movie.setTime ((int) (System.currentTimeMillis ()% movie.duration ())); handler.removeCallbacks (drawGIF); handler.postDelayed (drawGIF, frameDuration);  

De onVisibilityChanged methode wordt automatisch opgeroepen wanneer de zichtbaarheid van de achtergrond verandert. We moeten het opheffen en, op basis van de waarde van de zichtbaar argument, begin of stop drawGIF. De removeCallbacks methode van de handler wordt gebruikt om alle lopende aanvragen te stoppen drawGIF runs.

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

Beëindig ten slotte de onDestroy methode van de Motor om wachtende berichten te stoppen drawGIF wordt uitgevoerd als de achtergrond is gedeactiveerd.

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

7. Compileer en installeer

Je live wallpaper is nu klaar. Compileer het en installeer het op je Android-apparaat. Na de installatie kunt u de achtergrond in de lijst met beschikbare achtergronden vinden.

De meeste launchers bieden je de mogelijkheid om de achtergrond te veranderen na een lange tikbeweging. U kunt ook naar de weergave-instellingen gaan om de achtergrond te wijzigen.

Als de GIF er te klein uitziet of als deze niet correct is gepositioneerd, ga dan terug naar de trek methode en pas de schaal en positie aan.

Conclusie

Je weet nu hoe je een geanimeerde GIF gebruikt om een ​​live wallpaper te maken. Experimenteer met meer GIF's. Als je van plan bent om je live wallpaper op Google Play te publiceren, zorg er dan voor dat je de maker toestemming hebt om de geanimeerde GIF commercieel te gebruiken. Ga naar de Android Developer-website voor meer informatie over de WallpaperService klasse.