Share
Medan Android inte stöder SVGs (Scalable Vector Graphics) direkt, introducerade Lollipop en ny klass som heter VectorDrawable, vilket gör det möjligt för konstruktörer och utvecklare att dra tillgångar på ett liknande sätt med endast kod.
I den här artikeln lär du dig hur du skapar en VectorDrawable med XML-filer och animera dem i dina projekt. Detta stöds endast för enheter som kör Android 5.0 eller senare, och för närvarande finns det inga stödbibliotekets implementeringar. Källfilerna till denna handledning finns på GitHub.
Den huvudsakliga likheten mellan a VectorDrawable och en vanlig SVG-bild är att båda är ritade med hjälp av a väg värde. Medan du förstår hur SVG-vägar gårdras är uteslutet av denna artikel, kan officiell dokumentation hittas på W3C: s webbplats. För den här artikeln behöver du bara veta att sökväggen är där ritningen inträffar. Låt oss ta en titt på SVG-filen som utfärdar följande bild:
Det finns fem huvuddelar till den här bilden:
Följande kod ritar den här bilden som en SVG:
Även om detta kan se lite överväldigande, behöver du inte helt förstå hur allt är utdraget för att implementera en VectorDrawable i din kod. Det bör dock noteras att jag separerade var och en av de fem sektionerna i sitt eget unika block i koden för läsbarhet.
Den övre sektionen består av två bågar för att rita ut det runda torget och de sektioner som följer representerar respektive botten, topp, höger och vänster uppsättning linjer. För att göra den här SVG-koden till en VectorDrawable, du behöver först definiera vektor objekt i XML. Följande kod är hämtad från vector_drawable_cpu.xml filen i provkoden för den här artikeln.
Därefter kan du lägga till i sökdata. Följande kod är uppdelad i fem olika sökmarkeringar snarare än en stor sökväg.
Som du kan se använder varje banavsnitt helt enkelt pathData attribut för ritning. Du kan nu inkludera VectorDrawable XML-fil som dragbar i en standard Imageview och det kommer att skala till vilken storlek din app kräver, utan att behöva använda någon Java-kod.
Nu när du vet hur man skapar bilder med enbart kod, är det dags att ha lite roligt och animera dem. I följande animering märker du att var och en av trådgrupperna pulsar mot och bort från CPU: n.
För att uppnå denna effekt måste du pakka in varje sektion som du vill animera i en
Därefter vill du skapa animatörer för varje animationstyp. I det här fallet finns det en för varje grupp av ledningar för totalt fyra. Nedan är ett exempel på den övre gruppens animering och du behöver också en för botten, vänster och höger. Var och en av animator XML-filerna finns i provkoden.
Som du kan se, är egendomsnamn är satt till translateY, vilket innebär att animeringen kommer att röra sig längs Y-axeln. De valueFrom och valueTo kontrollera start- och slutplatsen. Genom att sätta Repetitionsläge till omvänd och repeat till oändlig, animationen kommer att slinga för evigt så länge som VectorDrawable är synlig. De varaktighet av animeringen är inställd på 250, vilket är tiden i millisekunder.
Om du vill tillämpa animationerna i din dragbara fil måste du skapa en ny animerad-vektor XML-fil för att associera animatorerna med VectorDrawable grupper. Följande kod används för att skapa animated_cpu.xml fil.
När all din XML är klar att gå kan du använda de animated_cpu.xmldragbar i en Imageview för att visa den.
För att starta din animering måste du få en instans av Animatable från Imageview och ringa Start.
ImageView mCpuImageView = (ImageView) findViewById (R.id.cpu); Drawable drawable = mCpuImageView.getDrawable (); om (drawable instanceof Animatable) ((Animerable) drawable). start ();
Efter Start har blivit kallad, kommer ledningarna på CPU-bilden att börja röra sig med mycket minimal Java-kod som används.
Ett vanligt fall för a VectorDrawable omvandlar en bild till en annan, till exempel ikonen för aktivitetsfältet som ändras från en hamburgerikon till en pil. För att göra detta måste både käll- och destinationsvägarna följa ett identiskt format för antalet element. För det här exemplet definierar vi vänster och höger vända pilar som ses ovan som strängar.
M300,70 1 0,70 -70, -70 0,070, -70z M300,70 1 0, -70 70,70 0,0 -70,70z
Därefter måste du skapa en initial dragbar för en pil med sökvägen för vänster pil. I provkoden heter den vector_drawable_left_arrow.xml.
Huvudskillnaden mellan CPU-animationen och transformationen ligger i animator_left_right_arrow.xml fil.
Du kommer att märka valueFrom och valueTo Egenskaper refererar till bandata för vänster och högerpil, värde typ är satt till pathType och egendomsnamnär satt till pathData. När dessa är inställda, kommer animatören att veta att ändra en uppsättning sökdata till den andra. När animatorn är klar måste du associera VectorDrawable med objectAnimator använder en ny animerad-vektor objekt.
Slutligen behöver du helt enkelt associera den animerade drawable med en Imageview och starta animeringen i din Java-kod.
mArrowImageView = (ImageView) findViewById (R.id.left_right_arrow); drawable = mArrowImageView.getDrawable (); om (drawable instanceof Animatable) ((Animerable) drawable). start ();
Som du har sett, VectorDrawable klassen är ganska enkel att använda och möjliggör mycket anpassning för att lägga till enkla animeringar. Medan VectorDrawable klassen är för närvarande endast tillgänglig för enheter som kör Android 5.0 eller senare, de kommer att vara ovärderliga eftersom fler enheter stöder Lollipop och framtida Android-versioner.
Accentsconagua