Android Vector Drawable

V tomto výukovém kurzu se budeme zabývat Android Vector Drawable. Navíc je budeme implementovat v naší aplikaci pro Android.

Android Vector Drawable

Často používáme jako kreslitelné obrázky PNG. Aby obrázky PNG fungovaly pro různé velikosti obrazovky, vytvoříme více prostředků PNG s různými velikostmi a hustotami. Následně obrázky PNG zabírají další místo a vedou k velkým velikostem APK aplikací pro Android.

Tady nám přichází na pomoc Vector Drawable! Jsou vaší náhradou za obrázky PNG.

Vektorový Drawable je vektorová grafika definovaná v souboru XML jako sada bodů, čar a křivek spolu s přidruženými barevnými informacemi.

Mohou být škálovány podle velikosti obrazovky bez ztráty kvality. Jsou také rychle vykreslovány na obrazovku. VectorDrawable jsou soubory XML.

Nové vektorové aktivum můžete přidat do složky drawable pomocí New | Vector Asset.

Takto můžeme vytvořit vektorové drawables ikon Material Designu. Kód pro VectorDrawable vypadá takto:

Nastavují se v tagu vector. Při nastavování šířky a výšky ohraničení drawable se používají značky android:viewportWidth a android:viewportHeight. V rámci těchto rozměrů se vektorový drawable vykreslí na plátno.

path je značka, která vytváří drawable. Uvnitř cesty vytváříme čáry, křivky, oblouky a nastavujeme ohraničení, barvu pozadí. Provádíme tak příkazy cesty v pathData.

Vytvoření cesty pro vektorové objekty

Příkazy cesty se skládají z abecedy následované souřadnicemi. Představte si vytváření cest jako malování. Velké abecedy představují absolutní polohu. Malá písmena představují relativní polohu.

• M – příkaz moveto. Je to způsob, jak říci, abyste přesunuli tužku na danou souřadnici v pohledu. Příklad: M 100 100 přesune pomyslnou tužku na souřadnici 100, 100 na plátně.
• L – příkaz line to. Slouží k nakreslení čáry z aktuální pozice na zadanou pozici.
  Příklad : M 100 100, L 120 100 nakreslí vodorovnou čáru.
• z – slouží k uzavření cesty. Nakreslí čáru z poslední pozice do první pozice. Příklad: M 100 100 L 120 100 L 120 120 L 100 120 Z vytvoří čtverec.
• C – Používá se k vytvoření bezierovy křivky. Poté musíme zadat tři sady souřadnic. První a druhá by byly dva řídicí body mezi počátečním a koncovým bodem.
• A – slouží ke kreslení oblouku. Po a je třeba zadat následující formát: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry a x axis jsou dva zadané poloměry.

Vytvoříme nějaký náhodný zajímavý vektor Drawable v naší aplikaci pro Android pomocí výše uvedených znalostí.

Struktura příkladového projektu vektorového kreslítka pro Android

Kód vektorového kreslítka pro Android

Kód aktivity_main.xml je uveden níže:

Podívejme se postupně na jednotlivé implementace Vector Drawables.

ic_rectangle.xml

V uvedeném kódu jsme vytvořili dvě cesty. Každá z nich je pravoúhlý trojúhelník.

Při jejím nastavení na našem rozvržení LinearLayout by pozadí vypadalo takto:

ic_w.xml

Ve výše uvedeném kódu se snažíme vytvořit symbol W pomocí čar.

Poznámka: Místo samostatné cesty můžeme všechny sloučit do jednoho příkazu cesty. I když můžete použít více cest, abyste jasně pochopili, co která cesta dělá.

ic_w_filled.xml
V následujícím kódu použijeme příkaz z k uzavření cest a vyplnění barvy uvnitř nich:

ic_a.xml
Vytvoříme písmeno A pomocí cest.

ic_c.xml

Vektorové kreslení písmen A a C vypadá takto:

ic_0.xml

Kruh vytvoříme pomocí dvou oblouků, které následně uzavřeme.

Teď naposledy. Vytvoříme ukázkovou ikonu JournalDev JD pomocí vektorového drawable.

Nakonec bude výstup naší aplikace vypadat takto:

Tímto tento tutoriál končí. Finální projekt Android VectorDrawable si můžete stáhnout z níže uvedeného odkazu:

.