Using Android VectorDrawable Class
24
Del
38
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert å bare $ 3. Ikke gå glipp av.
Innledning
Mens Android støtter ikke SVGs (Scalable Vector Graphics) direkte, Lollipop innført en ny klasse kalt VectorDrawable, noe som gir designere og utviklere å trekke eiendeler i en lignende måte ved hjelp av kun kode.
I denne artikkelen vil du lære hvordan du oppretter en VectorDrawable med XML-filer og animere dem i dine prosjekter. Dette støttes bare for enheter som kjører Android 5.0 eller høyere, og for tiden er det ingen støtte-bibliotek implementeringer. Kildefilene for denne opplæringen kan bli funnet på GitHub.
1. Lage en vektor teikne
Den viktigste likheten mellom en VectorDrawable og en standard SVG bildet er at begge er trukket ut ved hjelp av en bane verdi. Mens forstå hvordan SVG stier Det er fem store deler til dette bildet: Følgende kode tegner dette bildet ut som en SVG:? Selv om dette kan se litt overveldende, trenger du ikke egentlig trenger å forstå hvordan alt er trukket ut til å gjennomføre et VectorDrawable i koden. Imidlertid bør det bemerkes at jeg skilte hver av de fem seksjonene inn i sin egen unike blokk i koden for lesbarhet. Den øverste delen består av to buer for å trekke ut den avrundede torget og avsnittene som følger representerer bunnen, topp, høyre og venstre sett av linjer henholdsvis. For å snu denne SVG kode i et VectorDrawable, må du først definere vektoren objektet i XML. Følgende kode er hentet fra vector_drawable_cpu.xml filen i eksempelkoden for denne artikkelen Deretter kan du legge i banedata. Følgende kode er delt opp i fem forskjellige bane tags stedet for én stor bane Som du kan se, er det bare bruker hver bane delen pathData attributt for tegning . Du kan nå inkludere VectorDrawable XML-filen som teikne i en standard Imageview, og den vil skalere til enhver størrelse appen krever, uten å måtte bruke noen Java-kode. Nå som du vet hvordan du skal lage bilder ved hjelp av bare kode, er det på tide å ha det litt gøy og animere dem. I det følgende animasjon, vil du legge merke til at hver av gruppene av ledninger er pulserende mot og bort fra CPU. For å oppnå denne effekten, må du pakke inn hver del som du vil animere i en < gruppe > tag. Den oppdaterte versjonen av vector_drawable_cpu.xml ser da slik ut: Deretter vil du ønsker å opprette animatører for hver animasjon type. I dette tilfellet, det er en for hver gruppe av ledninger for totalt fire. Nedenfor er et eksempel på den øverste gruppen animasjon, og du vil også trenge en for bunn, venstre og høyre. Hver av de animator XML-filer kan finnes i eksempelkoden Som du kan se, property er satt til translateY, noe som betyr at animasjonen vil bevege seg langs Y-aksen. Den valueFrom og valueTo kontrollere begynne og slutte plassering. Ved å sette repeatMode å reversere og repeatCount til uendelig, animasjonen vil sløyfe for alltid så lenge VectorDrawable er synlig. Varigheten av animasjonen er satt til 250, som er den tiden i millisekunder. For å bruke animasjoner til din teikne filen, må du opprette en ny animert-vektor XML-fil for å knytte animatører med VectorDrawable grupper. Følgende kode er brukt til å opprette animated_cpu.xml filen Når alle dine XML er klar til å gå, kan du bruke For å starte animasjonen, vil du trenger for å få en forekomst av Animatable fra Imageview og kaller starte Etter start har blitt kalt, ledningene på CPU bilde vil begynne å bevege seg med minimal Java-kode som brukes. En vanlig bruk case for en VectorDrawable er transformere et bilde til et annet, for eksempel handlingsfeltet ikon som endrer seg fra en hamburger ikonet inn i en pil. For å gjøre dette, må både kilde og destinasjon stier følger et identisk format for antall elementer. For dette eksempelet vil vi definere venstre og høyre vender pilene sett ovenfor som strenger Deretter må du opprette en innledende teikne for en arrow bruke banen for LEFT_ARROW. I eksempelkoden, kalles det vector_drawable_left_arrow.xml Den største forskjellen mellom CPU animasjon og transformasjon løgner .? i animator_left_right_arrow.xml filen Du vil merke valueFrom og valueTo egenskaper referere banedata for venstre og høyre pil, den valueType er satt til pathType og property Til slutt, vil du bare trenger å knytte den animerte teikne med en Imageview og start animasjonen i Java-koden Som du har sett, er det VectorDrawable klassen ganske grei å bruke og gir en mye tilpasning for å legge enkle animasjoner. Mens VectorDrawable klassen er foreløpig kun tilgjengelig for enheter som kjører Android 5.0 og nyere, vil de være uvurderlig som flere enheter støtter Lollipop og fremtidige Android-versjoner.
trekkes er ute av omfanget av denne artikkelen, kan offisiell dokumentasjon finnes på W3C nettstedet. For denne artikkelen, vil du bare trenger å vite at banen taggen er der tegningen oppstår. La oss ta en titt på SVG-filen som trekker ut følgende bilde:
en firkant for CPU kroppen består av to buer
fire grupper med fem linjer som representerer CPU ledninger
< xml version = "1.0" encoding = "utf-8" > <! DOCTYPE svg PUBLIC "- //W3C //DTD SVG 1.1 //EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd "> < SVG version =" 1.1 "xmlns =" http://www.w3.org/2000/svg~~number=plural "xmlns: XLink =" http://www.w3.org/1999/xlink "x =" 0px "y =" 0px "width =" 512px "height =" 512px "viewBox =" 0 0 512 512 "style =" enable-bakgrunn: new 0 0 512 512; " xml: space = "bevare" > < banen id = "cpu" d = "M341.087,157.478c7.417,0,13.435,6.018,13.435,13.435v170.174 c0,7.417-6.018,13.435-13.435,13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913 c0-7.417,6.018-13.435,13.435-13.435H341.087z M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c -19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785 0,35.826-16.041,35.826-35.826V157.478z M193.304,408.261V462h-17,913 v -53.739H193.304z M264.957,408.261V462h-17.914v-53.739H264.957z M300.783,408.261V462h-17.914v-53.739H300.783z M229.13,408.261 V462h-17.913v-53.739H229.13z M336.609,408.261V462h-17.914v-53,739 H336.609z M193.304,50v53.739h-17.913V50H193.304z M264.957,50 v53.739h-17.914V50H264.957z M300.783,50v53.739h-17.914V50H300.783z M229.13,50v53.739h-17.913V50H229 .13z M336.609,50v53.739 h-17.914V50H336.609z M408.261,318.695H462v17.914h-53.739V318.695z M408.261,247.043H462v17.914h-53.739V247.043z M408.261,211.217 H462v17.913h-53.739V211.217z M408. 261,282.869H462v17.914h-53.739V282.869z M408.261,175.391H462v17.913h-53.739V175.391z M50,318.695h53.739v17.914H50V318.695z M50,247.043h53.739v17.914H50V247.043z M50,211.217h53.739v17.913H50V211.217z M50,282.869 h53.739v17.914H50V282.869z M50,175.391h53.739v17.913H50V175.391z "/> < /svg >
< vektor xmlns:. Android = "http://schemas.android.com/apk/res/android" android: height = "64dp" android: width = "64dp" android: viewportHeight = "600" android: viewportWidth = "600" > < /vektor >
< vektor xmlns:. Android = "http://schemas.android.com/apk/res/android" android: height = "64dp "android: width =" 64dp "android: viewportHeight =" 600 "android: viewportWidth =" 600 "> < banen android: name = "cpu" android: fillColor = "# 000000" android: pathData = "M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435 , 13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157. 479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z "/> < banen android: name = "wires_bottom" android: fillColor = "# 000000" android: pathData = "M193.304,408.261V462h-17,913 v-53.739H193.304z M264.957,408.261V462h-17.914v-53.739H264.957z M300.783,408.261 V462h-17.914v-53.739H300.783z M229.13,408.261 V462h-17.913v-53.739H229.13z M336.609,408.261V462h-17.914v-53.739H336.609z "/> < banen android: name = "wires_top" android: fillColor = "# 000000" android: pathData = "M193.304,50v53.739h-17.913V50H193.304z M264.957,50 v53.739h-17.914V50H264.957z M300. 783,50v53.739h-17.914V50H300.783z M229.13,50v53.739h-17.913V50H229.13z M336.609,50v53.739 h-17.914V50H336.609z "/> < banen android: name = "wires_right" android: fillColor = "# 000000" android: pathData = "M408.261,318.695H462v17.914h-53.739V318.695z M408.261,247.043H462v17.914h-53.739V247.043z M408.261,211.217 H462v17. 913h-53.739V211.217z M408.261,282.869H462v17.914h-53.739V282.869z M408.261,175.391H462v17.913h-53.739V175.391z "/> < banen android: name = "wires_left" android: fillColor = "# 000000" android: pathData = "M50,318.695h53.739v17.914H50V318.695z M50,247.043h53.739v17.914H50V247.043z M50,211.217h53.739v17. 913H50V211.217z M50,282.869 h53.739v17.914H50V282.869z M50,175.391h53.739v17.913H50V175.391z "/> < /vektor >
2. Animere Vector Drawables
< vektor xmlns: android = "http://schemas.android.com/apk/res/android" android: height = "64dp" android: width = "64dp" android: viewportHeight = "600" android: viewportWidth = "600" > < gruppe android: name = "cpu_box" > < banen android: name = "cpu" android: fillColor = "# 000000" android: pathData = "M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435 , 13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157. 479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z "/> < /gruppe > < gruppe android: name = "bunnen" > < banen android: name = "wires_bottom" android: fillColor = "# 000000" android: pathData = "M193.304,408.261V462h-17,913 v-53.739H193.304z M264.957,408.261V462h-17.914v-53.739H264.957z M300.783,408.261 V462h-17.914v-53.739H300.783z M229.13,408.261 V462h-17.913v-53.739H229.13z M336.609,408.261V462h-17.914v-53.739H336.609z "/> < /gruppe > < gruppe android: name = "top" > < banen android: name = "wires_top" android: fillColor = "# 000000" android: pathData = "M193.304,50v53.739h-17.913V50H193.304z M264.957,50 v53.739h-17.914V50H264.957z M300. 783,50v53.739h-17.914V50H300.783z M229.13,50v53.739h-17.913V50H229.13z M336.609,50v53.739 h-17.914V50H336.609z "/> < /gruppe > < gruppe android: name = "right" > < banen android: name = "wires_right" android: fillColor = "# 000000" android: pathData = "M408.261,318.695H462v17.914h-53.739V318.695z M408.261,247.043H462v17.914h-53.739V247.043z M408.261,211.217 H462v17. 913h-53.739V211.217z M408.261,282.869H462v17.914h-53.739V282.869z M408.261,175.391H462v17.913h-53.739V175.391z "/> < /gruppe > < gruppe android: name = "left" > < banen android: name = "wires_left" android: fillColor = "# 000000" android: pathData = "M50,318.695h53.739v17.914H50V318.695z M50,247.043h53.739v17.914H50V247.043z M50,211.217h53.739v17. 913H50V211.217z M50,282.869 h53.739v17.914H50V282.869z M50,175.391h53.739v17.913H50V175.391z "/> < /gruppe > < /vektor >
< xml version = "1.0" encoding = "utf-8" > < satt xmlns:.? Android = "http: //skjemaer. android.com/apk/res/android"> < objectAnimator android: property = "translateY" android: valueType = "floatType" android: valueFrom = "0" android: valueTo = "- 10" android: repeatMode = "omvendt" android: repeatCount = "uendelig" android: varighet = "250" /> < /set >
< xml version = "1.0" encoding = "utf-8" > < animerte-vektor xmlns:.? Android = "http: //skjemaer .android.com /apk /res /android "android: teikne =" @ teikne /vector_drawable_cpu "> < target android: animasjon = "@ animatør /pulse_top" android: name = "top" /> < target android: animasjon = "@ animatør /pulse_right" android: name = "right" /> < target android: animasjon = "@ animatør /pulse_left" android: name = "left" /> < target android: animasjon = "@ animatør /pulse_bottom" android: name = "bunnen" /> < /animerte vektor >
den animated_cpu.xml
teikne i en Imageview for å vise det
< Imageview android. id = "+ id /cpu" android: layout_width = "64dp" android: layout_height = "64dp "android: src =" @ teikne /animated_cpu "/>
Imageview mCpuImageView = (Imageview) findViewById (. R.id.cpu), teikneteikne = mCpuImageView.getDrawable (); if (teikne instanceof Animatable) {((Animatable) teikne) .start ();}
3. Transforme Vector Drawables
. ≪ string name = "LEFT_ARROW" > M300,70 l 0,70 -70, -70 0,0 70, -70z < /string > < string name = "RIGHT_ARROW" > M300,70 l 0, -70 70,70 0,0 -70,70z < /string >
< vektor xmlns:. Android = "http://schemas.android.com/apk/res/android" android: height = "64dp" android: width = "64dp" android: viewportHeight = "600" android: viewportWidth = "600" > < banen android: name = "LEFT_ARROW" android: fillColor = "# 000000" android: pathData = "@ streng /LEFT_ARROW" /> < /vektor >
< xml version = "1.0" encoding = "UTF-8" > < sett xmlns:? android = "http://schemas.android.com/apk/res /android "> < objectAnimator android: varighet = "1000" android: property = "pathData" android: valueFrom = "@ streng /LEFT_ARROW" android: valueTo = "@ streng /RIGHT_ARROW" android: valueType = "pathType" android: repeatMode = "reverse "android: repeatCount =" - 1 "/> < /set >
er satt til pathData. Når disse er satt, vil animatøren vite for å endre ett sett med banedata til den andre. Når animatør er ferdig, må du knytte VectorDrawable med objectAnimator ved hjelp av en ny animert-vektor objekt
. ≪? Xml version = "1.0" encoding = "utf-8" >? ≪ animerte vektor xmlns: android = "http://schemas.android.com/apk/res/android" android: teikne = "@ teikne /vector_drawable_left_arrow" > < target android: name = "LEFT_ARROW" android: animasjon = "@ animator /animator_left_right_arrows" /> < /animerte vektor >
< Imageview android. id = "+ id /left_right_arrow" android: layout_width = "64dp" android: layout_height = "64dp" android: layout_below = "+ id /cpu" android : src = "@ teikne /animated_arrow" /> mArrowImageView = (Imageview) findViewById (R.id.left_right_arrow); teikne = mArrowImageView.getDrawable (); if (teikne instanceof Animatable) {((Animatable) teikne) .start ( );}
Konklusjon