Android Vector Drawable

Tässä opetusohjelmassa käsittelemme Android Vector Drawablea. Lisäksi toteutamme ne Android-sovelluksessamme.

Android Vector Drawable
Polun luominen vektoriobjekteille
Android Vector Drawable Esimerkkiprojektin rakenne
Android Vector Drawable Koodi

Android Vector Drawable

Usein käytämme PNG:tä piirtokuvina. Jotta PNG-kuvat toimisivat eri näytön koossa, luomme useita eri kokoisia ja eri tiheydellä varustettuja PNG-varoja. Tämän jälkeen PNG-kuvat vievät ylimääräistä tilaa ja johtavat Android-sovellusten suuriin APK-kokoihin.

Tässä kohtaa Vector Drawable tulee apuun! Ne korvaavat PNG-kuvat.

VectorDrawable on vektorigrafiikka, joka on määritelty XML-tiedostossa joukoksi pisteitä, viivoja ja käyriä sekä niihin liittyviä väritietoja.

Ne voidaan skaalata näytön koon mukaan ilman laadun menetystä. Ne myös renderöidään nopeasti näytölle. VectorDrawable ovat XML-tiedosto.

Voit lisätä uuden Vector Assetin drawable-kansioon komennolla New | Vector Asset.

Siten voimme luoda Material Design -kuvakkeista Vector drawableja. VectorDrawable-koodi näyttää tältä:

Ne asetetaan vector-tagiin. android:viewportWidth ja android:viewportHeight käytetään drawable-rajojen leveyden ja korkeuden asettamisessa. Näiden mittojen puitteissa vektoripiirtokohde piirretään kankaalle.

path on tagi, joka luo piirtokohteen. Polun sisällä luodaan viivoja, käyriä, kaaria ja asetetaan rajaus, taustaväri. Teemme niin polkukomennot pathData.

Vektoripiirtokohteet otettiin käyttöön Android Lollipopista ja uudemmista Android-versioista lähtien, mutta taaksepäin yhteensopivuuden ansiosta ne ovat yhteensopivia myös aiempien versioiden kanssa.

Polun luominen vektoriobjekteille

Polkukomennot koostuvat aakkosista, joita seuraavat koordinaatit. Kuvittele polkujen luominen kuin maalauksen tekeminen. Isot aakkoset edustavat absoluuttista sijaintia. Pienet kirjaimet edustavat suhteellista sijaintia.

M – moveto-komento. Se on tapa sanoa, että siirrä kynäsi annettuun koordinaattiin näkymässä. Esimerkki M 100 100 siirtää kuvitteellisen lyijykynän kankaalla olevaan koordinaattiin 100, 100.
L – line to -komento. Käytetään piirtämään viiva nykyisestä sijainnista annettuun sijaintiin.
Esimerkki : M 100 100, L 120 100 piirtää vaakasuoran viivan.
z – Tätä käytetään polun sulkemiseen. Se piirtää viivan viimeisestä sijainnista ensimmäiseen sijaintiin. Esimerkki M 100 100 L 120 100 L 120 120 L 100 120 Z luo neliön.
C – Tätä käytetään bezier-käyrän luomiseen. Tämän jälkeen on määritettävä kolme koordinaattisarjaa. Ensimmäinen ja toinen olisivat kaksi ohjauspistettä alkupisteen ja loppupisteen välissä.
A – käytetään kaaren piirtämiseen. A:n jälkeen on määritettävä seuraava muoto: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry ja x-akseli ovat kaksi määritettyä sädettä.

Voidaan määritellä vektoriin useampi kuin yksi polku asettamalla polkutunnisteet group-tunnisteen sisälle.

Luotaanpa jokin satunnainen mielenkiintoinen Vektorin piirtoelementti Android-sovellukseemme yllä olevan tiedon avulla.

Android Vector Drawable Esimerkkiprojektin rakenne

Android Vector Drawable Koodi

Koodi activity_main.xml-asettelu on esitetty alla:

Katsotaanpa kutakin Vector Drawable -toteutusta yksi kerrallaan.

ic_rectangle.xml

Yllä olevassa koodissa olemme luoneet kaksi polkua. Kumpikin suorakulmainen kolmio.

Tämän asettaminen LinearLayoutissamme saisi taustan näyttämään seuraavalta:

ic_w.xml

Yllä olevassa koodissa yritämme luoda W-symbolin viivojen avulla.

Huomautus: Erillisten polkujen sijasta voimme sulauttaa kaikki yhteen polkukomennolla. Voit tosin käyttää useita polkuja, jotta saat selkeän käsityksen siitä, mitä kukin polku tekee.

ic_w_filled.xml
Alhaalla olevassa koodissa käytämme z-komentoa sulkeaksemme polut ja täyttäessämme värin niiden sisälle: