Share
Mens Android ikke støtter SVGs (Scalable Vector Graphics) direkte, introduserte Lollipop en ny klasse som heter VectorDrawable, som tillater designere og utviklere å tegne eiendeler på lignende måte ved å bruke bare kode.
I denne artikkelen vil du lære å lage en VectorDrawable med XML-filer og animere dem i prosjektene dine. Dette støttes kun for enheter som kjører Android 5.0 eller nyere, og for øyeblikket er det ingen støttebibliotek implementeringer. Kildefilene til denne opplæringen finner du på GitHub.
Den viktigste likheten mellom a VectorDrawable og et standard SVG-bilde er at begge er trukket ut med en sti verdi. Mens du forstår hvordan SVG-stierer trukket ut, er ikke omfattet av denne artikkelen, kan offisiell dokumentasjon finnes på W3Cs nettsted. For denne artikkelen må du bare vite at sti-taggen er der tegningen oppstår. La oss ta en titt på SVG-filen som tegner følgende bilde:
Det er fem hoveddeler til dette bildet:
Følgende kode trekker dette bildet ut som en SVG:
Selv om dette kan se litt overveldende, trenger du ikke å forstå fullt ut hvordan alt er trukket ut for å implementere en VectorDrawable i koden din. Det skal imidlertid bemerkes at jeg separerte hver av de fem seksjonene i sin egen unike blokk i koden for lesbarhet.
Toppseksjonen består av to buer for å tegne det runde firkantet og de seksjonene som følger representerer henholdsvis bunn, topp, høyre og venstre sett av linjer. For å slå denne SVG-koden til en VectorDrawable, du må først definere vektor objekt i XML. Følgende kode er hentet fra vector_drawable_cpu.xml filen i prøvekoden for denne artikkelen.
Deretter kan du legge til i banedataene. Følgende kode er oppdelt i fem forskjellige sti-koder i stedet for en stor sti.
Som du kan se, bruker hver bane seksjonen bare pathData attributt for tegning. Du kan nå inkludere VectorDrawable XML-fil som en drawable i en standard Imageview og det vil skalere til hvilken størrelse din app krever, uten å måtte bruke noen Java-kode.
Nå som du vet hvordan du lager bilder med bare kode, er det på tide å ha litt moro og animere dem. I den følgende animasjonen vil du legge merke til at hver av ledningene er pulserende mot og vekk fra CPU.
For å oppnå denne effekten må du pakke inn hver seksjon som du vil animere i en
Deretter vil du opprette animatører for hver animasjonstype. I dette tilfellet er det en for hver gruppe av ledninger for totalt fire. Nedenfor er et eksempel på den øverste gruppens animasjon, og du vil også trenge en til bunnen, venstre og høyre. Hver av animator XML-filene kan bli funnet i prøvekoden.
Som du kan se, er eiendomsnavn er satt til translateY, som betyr at animasjonen vil bevege seg langs Y-aksen. De valueFrom og valueTo kontroller start- og sluttstedet. Ved innstilling Repetering til omvendt og repeatCount til uendelig, animasjonen vil sløyfe for alltid så lenge som VectorDrawable er synlig. De varighet av animasjonen er satt til 250, som er tiden i millisekunder.
For å bruke animasjonene til din trekkbare fil, må du opprette en ny animerte-vektor XML-fil for å tilknytte animatørene med VectorDrawable grupper. Følgende kode brukes til å opprette animated_cpu.xml fil.
Når alle XML er klare til å gå, kan du bruke de animated_cpu.xmltrekkes i en Imageview for å vise det.
For å starte animasjonen, må du få en forekomst av Animatable fra Imageview og ring start.
ImageView mCpuImageView = (ImageView) findViewById (R.id.cpu); Drawable drawable = mCpuImageView.getDrawable (); hvis (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Etter start Har blitt kalt, vil ledningene på CPU-bildet begynne å bevege seg med svært minimal Java-kode som brukes.
En vanlig bruk sak for a VectorDrawable Omdanner ett bilde til et annet, for eksempel ikonet for handlingslinjen som endres fra et hamburgerikon til en pil. For å gjøre dette må både kilden og destinasjonsbanene følge et identisk format for antall elementer. For dette eksempelet vil vi definere venstre og høyre vende pilene sett ovenfor som strenge.
M300,70 1 0,70 -70, -70 0,0 70, -70z M300,70 l 0, -70 70,70 0,0 -70,70z
Deretter må du opprette en initialtrekkbar for en pil ved hjelp av banen for venstre pil. I prøvekoden kalles den vector_drawable_left_arrow.xml.
Hovedforskjellen mellom CPU-animasjonen og transformasjonen ligger i animator_left_right_arrow.xml fil.
Du vil legge merke til valueFrom og valueTo egenskaper refererer banen data for venstre og høyre pil, valueType er satt til pathType og eiendomsnavner satt til pathData. Når disse er angitt, vil animatoren vite å endre ett sett med sti data til den andre. Når animatoren er ferdig, må du knytte den VectorDrawable med objectAnimator bruker en ny animerte-vektor gjenstand.
Til slutt må du bare knytte den animerte drawable med en Imageview og start animasjonen i Java-koden din.
mArrowImageView = (ImageView) findViewById (R.id.left_right_arrow); drawable = mArrowImageView.getDrawable (); hvis (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Som du har sett, VectorDrawable klassen er ganske enkel å bruke og gir mye tilpasning for å legge til enkle animasjoner. Mens VectorDrawable klassen er for tiden bare tilgjengelig for enheter som kjører Android 5.0 og nyere, de vil være uvurderlige ettersom flere enheter støtter Lollipop og fremtidige Android-utgivelser.
Accentsconagua