Ebben a bemutatóban az Android Vector Drawable-t fogjuk tárgyalni. Továbbá implementálni fogjuk őket az Android alkalmazásunkban.
Android Vector Drawable
Gyakran használunk PNG-t rajzolható képként. Annak érdekében, hogy a PNG képek különböző képernyőméreteknél működjenek, több különböző méretű és sűrűségű PNG eszközt hozunk létre. Ezt követően a PNG képek extra helyet foglalnak és az Android alkalmazások nagy APK méreteihez vezetnek.
Ez az a pont, ahol a Vector Drawable a segítségünkre siet! Ezek helyettesítik a PNG-képeket.
A VectorDrawable egy XML-fájlban pontok, vonalak és görbék halmazaként definiált vektorgrafika a hozzá tartozó színinformációkkal együtt.
A képernyő méretének megfelelően méretezhetőek minőségromlás nélkül. Gyorsan renderelhetőek a képernyőre is. A VectorDrawable egy XML-fájl.
A New | Vector Asset segítségével új Vector Asset-et adhat hozzá a drawable mappához.
Így létrehozhatjuk a Material Design ikonok Vector Drawable-jét. A VectorDrawable kódja így néz ki:
Azokat a vector tagben állítjuk be. A android:viewportWidth és android:viewportHeight a drawable határainak szélességének és magasságának beállítására szolgál. Ezeken a méreteken belül rajzolódik a vektoros rajzelem a vászonra.
path a rajzelemet létrehozó tag. Az útvonalon belül vonalakat, görbéket, íveket hozunk létre, és beállítjuk a keretet, háttérszínt. Ezt az pathDataben lévő path parancsokkal tesszük.
Creating Path for Vector Assets
A path parancsok egy ábécéből, majd koordinátákból állnak. Képzelje el az útvonalak létrehozását úgy, mintha festményt készítene. A nagybetűs ábécék abszolút pozíciót jelentenek. A kisbetűk relatív pozíciót jelentenek.
- M – moveto parancs. Ez egy módja annak, hogy azt mondjuk, mozgasd a ceruzádat a nézet adott koordinátájára. Példa M 100 100 egy képzeletbeli ceruzát mozgat a vászon 100, 100 koordinátájára.
- L – line to parancs. Egy vonal húzására szolgál az aktuális pozíciótól a megadott pozícióig.
Példa :M 100 100, L 120 100egy vízszintes vonalat rajzol. -
z– Az útvonal lezárására szolgál. Egy vonalat rajzol az utolsó pozíciótól az első pozícióig. Példa:M 100 100 L 120 100 L 120 120 L 100 120 Zegy négyzetet hoz létre. -
C– Ezt egy bezier görbe létrehozására használja. Ezután három koordinátakészletet kell megadnunk. Az első és a második lenne a két vezérlőpont a kezdőpont és a végpont között. -
A– egy ív rajzolására szolgál. A után a következő formátumot kell megadni: (rx ry x-tengely-rotáció nagy ív-jelző sweep-jelző x y). rx ry és x tengely a két megadott sugár.
group címkén belül állítjuk be.Hozzunk létre néhány véletlenszerű érdekes Vector Drawable-t az Android alkalmazásunkban a fenti ismeretek felhasználásával.
Android Vector Drawable példa projekt felépítése
Android Vector Drawable kód
A kód az activity_main.xml elrendezése az alábbiakban látható:
Nézzük meg egyesével a Vector Drawable implementációját.
ic_rectangle.xml
A fenti kódban két útvonalat hoztunk létre. Mindegyik egy-egy derékszögű háromszög.
A LinearLayout-unkon ezt beállítva a háttér így nézne ki:
ic_w.xml
A fenti kódban egy W szimbólumot próbálunk létrehozni vonalak segítségével.
Megjegyezzük: Külön pálya helyett egyetlen pálya parancsban egyesíthetjük az összeset. Bár használhatunk több útvonalat is, hogy tisztán lássuk, mit csinálnak az egyes útvonalak.
ic_w_filled.xml
Az alábbi kódban a z parancsot fogjuk használni az útvonalak lezárására és a bennük lévő szín kitöltésére:
ic_a.xml
Hozzuk létre az A betűt útvonalak segítségével.
ic_c.xml
Az A és C betű vektoros rajzolhatósága így néz ki:
ic_0.xml
Egy kört készítünk két ív segítségével, amelyeket aztán lezárunk.
Most az utolsó. Készítsünk egy JournalDev JD minta ikont a vektoros rajzolhatóság segítségével.
Az alkalmazásunk kimenete végül így néz ki:
Ezzel a bemutató végére értünk. A végleges Android VectorDrawable projektet letöltheti az alábbi linkről: