Android Vector Drawable

W tym tutorialu, będziemy omawiać Android Vector Drawable. Ponadto, będziemy je implementować w naszej aplikacji na Androida.

Android Vector Drawable

Często używamy PNG jako naszych obrazów drawable. Aby obrazy PNG działały dla różnych rozmiarów ekranu, tworzymy wiele zasobów PNG o różnych rozmiarach i gęstościach. W konsekwencji, obrazy PNG zajmują dodatkowe miejsce i prowadzą do dużych rozmiarów APK aplikacji na Androida.

To właśnie tutaj Vector Drawable przychodzi nam na ratunek! Są one Twoim zamiennikiem dla obrazów PNG.

WectorDrawable to grafika wektorowa zdefiniowana w pliku XML jako zbiór punktów, linii i krzywych wraz z powiązanymi informacjami o kolorze.

Mogą być skalowane zgodnie z rozmiarem ekranu bez utraty jakości. Są one również szybko renderowane na ekranie. VectorDrawable to plik XML.

Możesz dodać nowy Vector Asset w folderze drawable używając New | Vector Asset.

W ten sposób możemy stworzyć Vector drawables ikon Material Design. Kod dla VectorDrawable wygląda następująco:

Ustawiamy je w znaczniku vector. android:viewportWidth i android:viewportHeight są używane przy ustawianiu szerokości i wysokości granic drawable. W tych wymiarach rysowana jest wektorowa ścieżka na płótnie.

pathjest znacznikiem, który tworzy ścieżkę rysunkową. Wewnątrz ścieżki tworzymy linie, krzywe, łuki oraz ustawiamy obramowanie, kolor tła. Robimy to komendami path w pathData.

Creating Path for Vector Assets

Komendy path składają się z alfabetu, po którym następują współrzędne. Wyobraź sobie tworzenie ścieżek jako malowanie obrazu. Duże litery reprezentują pozycję bezwzględną. Małe litery reprezentują pozycję względną.

• M – polecenie moveto. Jest to sposób na powiedzenie, aby przesunąć swój ołówek do podanej współrzędnej na widoku. Przykład M 100 100 przesuwa wyimaginowany ołówek do współrzędnej 100, 100 na płótnie.
• L – polecenie line to. Służy do rysowania linii od bieżącej pozycji do podanej pozycji.
  Przykład : M 100 100, L 120 100 rysuje linię poziomą.
• z – Służy do zamknięcia ścieżki. Rysuje linię od ostatniej pozycji do pierwszej pozycji. Przykład M 100 100 L 120 100 L 120 120 L 100 120 Z tworzy kwadrat.
• C – Służy do tworzenia krzywej beziera. Po tym musimy określić trzy zestawy współrzędnych. Pierwszy i drugi to dwa punkty kontrolne pomiędzy punktem początkowym a końcowym.
• A – służy do rysowania łuku. Po a należy podać następujący format: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry i x axis to dwa promienie określone.

Utwórzmy jakiś losowy interesujący Vector Drawable w naszej Aplikacji Android przy użyciu powyższej wiedzy.

Android Vector Drawable Przykładowa struktura projektu

Android Vector Drawable Kod

Kod dla activity_main.xml jest podany poniżej:

Przyjrzyjrzyjmy się po kolei każdej z implementacji Vector Drawables.

ic_rectangle.xml

W powyższym kodzie utworzyliśmy dwie ścieżki. Każda z nich to trójkąt prostokątny.

Ustawienie tego na naszym LinearLayout sprawiłoby, że tło wyglądałoby tak:

ic_w.xml

W powyższym kodzie próbujemy utworzyć symbol W przy użyciu linii.

Uwaga: Zamiast osobnej ścieżki, możemy połączyć wszystkie w jednym poleceniu ścieżki. Można jednak użyć wielu ścieżek, aby lepiej zrozumieć, co każda z nich robi.

ic_w_filled.xml
W poniższym kodzie użyjemy polecenia z do zamknięcia ścieżek i wypełnienia kolorem ich wnętrza:

ic_a.xml
Utwórzmy literę A za pomocą ścieżek.

ic_c.xml

Listy A i C rysowane wektorowo wyglądają następująco:

ic_0.xml

Krąg tworzymy za pomocą dwóch łuków, które następnie zamykamy.

Teraz na koniec. Utwórzmy przykładową ikonę JournalDev JD używając wektorowego drawable.

W końcu, wyjście naszej aplikacji wygląda tak:

To kończy ten tutorial. Możesz pobrać końcowy projekt Android VectorDrawable z poniższego linku:

.