Share
Hoewel Android SVG's (Scalable Vector Graphics) niet rechtstreeks ondersteunt, introduceerde Lollipop een nieuwe klasse genaamd VectorDrawable, waarmee ontwerpers en ontwikkelaars op dezelfde manier activa kunnen tekenen met alleen code.
In dit artikel leert u hoe u een maakt VectorDrawable met XML-bestanden en animeer ze in uw projecten. Dit wordt alleen ondersteund voor apparaten met Android 5.0 of hoger en momenteel zijn er geen implementaties van de ondersteuningsbibliotheek. De bronbestanden van deze tutorial zijn te vinden op GitHub.
De belangrijkste overeenkomst tussen een VectorDrawable en een standaard SVG-afbeelding is dat beide worden opgehaald met behulp van een pad waarde. Terwijl je begrijpt hoe SVG-paden zijnzijn getekend valt buiten het bestek van dit artikel, officiële documentatie is te vinden op de W3C-website. Voor dit artikel moet je gewoon weten dat de pad-tag de plaats is waar de tekening plaatsvindt. Laten we het SVG-bestand bekijken waarin de volgende afbeelding wordt weergegeven:
Er zijn vijf belangrijke delen in deze afbeelding:
De volgende code trekt deze afbeelding uit als een SVG:
Hoewel dit een beetje overweldigend lijkt, hoeft u niet echt volledig te begrijpen hoe alles wordt uitgevoerd om een a te implementeren VectorDrawable in uw code. Er moet echter worden opgemerkt dat ik elk van de vijf secties heb gescheiden in hun eigen unieke blok in de code voor leesbaarheid.
Het bovenste gedeelte bestaat uit twee bogen om het afgeronde vierkant uit te tekenen en de secties die volgen, vertegenwoordigen respectievelijk de onderste, bovenste, rechter en linker sets van lijnen. Om van deze SVG-code een te maken VectorDrawable, je moet eerst de vector object in XML. De volgende code is overgenomen van de vector_drawable_cpu.xml bestand in de voorbeeldcode voor dit artikel.
Vervolgens kunt u de padgegevens toevoegen. De volgende code is opgesplitst in vijf verschillende padlabels in plaats van één groot pad.
Zoals je kunt zien, gebruikt elke padsectie eenvoudig de pathData attribuut voor tekenen. U kunt nu de VectorDrawable XML-bestand als een aantrekbaar in een standaard Figuurweergave en het zal schalen naar elk formaat dat uw app nodig heeft, zonder dat u een Java-code hoeft te gebruiken.
Nu je weet hoe je afbeeldingen kunt maken met alleen code, is het tijd om een beetje plezier te maken en ze te animeren. In de volgende animatie zult u merken dat elk van de groepen draden naar en van de CPU pulseert.
Om dit effect te bereiken, moet je elke sectie wikkelen die je wilt animeren in a
Vervolgens wil je maken animators voor elk type animatie. In dit geval is er een voor elke groep draden voor een totaal van vier. Hieronder staat een voorbeeld van de animatie van de bovenste groep en je hebt er ook een nodig voor de onderste, linker en rechter. Elk van de animator XML-bestanden kan worden gevonden in de voorbeeldcode.
Zoals u kunt zien, de eigendomsnaam ingesteld op translateY, wat betekent dat de animatie langs de Y-as zal bewegen. De valueFrom en valueto controle over de begin- en eindlocatie. Door in te stellen Herhaal Modus naar omgekeerde en repeatCount naar oneindig, de animatie loopt voor altijd zolang door als de VectorDrawable is zichtbaar. De looptijd van de animatie is ingesteld op 250, dat is de tijd in milliseconden.
Als u de animaties wilt toepassen op uw tekenbare bestand, moet u een nieuw maken animated-vector XML-bestand om de animators te associëren met de VectorDrawable groepen. De volgende code wordt gebruikt om het te maken animated_cpu.xml het dossier.
Wanneer al uw XML klaar is om te gebruiken, kunt u gebruiken de animated_cpu.xmltekenbaar in een Figuurweergave om het weer te geven.
Om uw animatie te starten, moet u een instantie van de animatable van de Figuurweergave en bel begin.
ImageView mCpuImageView = (ImageView) findViewById (R.id.cpu); Drawable drawable = mCpuImageView.getDrawable (); if (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Na begin is aangeroepen, zullen de draden op de CPU-afbeelding gaan bewegen met zeer minimale gebruikte Java-code.
Een veelvoorkomende gebruikscasus voor een VectorDrawable transformeert de ene afbeelding naar de andere, zoals het actiebalkpictogram dat verandert van een hamburgersymbool in een pijl. Om dit te doen, moeten zowel de bron- als de bestemmingspaden een identiek formaat voor het aantal elementen hebben. Voor dit voorbeeld definiëren we de naar links en rechts gerichte pijlen die hierboven als snaren worden gezien.
M300,70 l 0,70 -70, -70 0,0 70, -70z M300,70 l 0, -70 70,70 0,0 -70,70z
Vervolgens moet u een eerste tekening maken voor een pijl met behulp van het pad voor linker pijl. In de voorbeeldcode wordt deze genoemd vector_drawable_left_arrow.xml.
Het grootste verschil tussen de CPU-animatie en de transformatie ligt in de animator_left_right_arrow.xml het dossier.
Je zult de valueFrom en valueto eigenschappen verwijzen naar de padgegevens voor de linker- en rechterpijl, de waarde type ingesteld op pathType en eigendomsnaamingesteld op pathData. Wanneer deze zijn ingesteld, weet de animator dat de ene set padgegevens moet worden gewijzigd in de andere. Wanneer de animator klaar is, moet u de. Associëren VectorDrawable met de objectAnimator een nieuw gebruiken animated-vector voorwerp.
Ten slotte moet je de geanimeerde drawable gewoon associëren met een Figuurweergave en start de animatie in uw Java-code.
mArrowImageView = (ImageView) findViewById (R.id.left_right_arrow); drawable = mArrowImageView.getDrawable (); if (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Zoals je hebt gezien, de VectorDrawable klasse is redelijk eenvoudig te gebruiken en biedt veel aanpassingsmogelijkheden om eenvoudige animaties toe te voegen. Terwijl de VectorDrawable klasse is momenteel alleen beschikbaar voor apparaten met Android 5.0 en hoger, ze zijn van onschatbare waarde aangezien meer apparaten Lollipop en toekomstige Android-releases ondersteunen.
Accentsconagua