SVG to Vector Drawables: Najlepszy sposób, aby dostosować ikony Android

Garrett Cole
Garrett Cole

Postępuj zgodnie z

21 października 2016 · 2 min czytać

Jednym z najbardziej popularnych sposobów przetwarzania niestandardowych ikon w projekcie tworzenia Android jest wykorzystanie rysunków. Są to pliki XML, które opisują ścieżkę, w której drawable mogą być renderowane w czasie wykonywania wewnątrz aplikacji Android. Aby uzyskać rysowanie wektorowe, możesz przekonwertować plik SVG na ten format. Ostatnio stało się to łatwiejsze dzięki najnowszym aktualizacjom Android Studio. Jednakże, jeśli jesteś jak niektórzy z nas, którzy są przyzwyczajeni do starego potoku, możesz przekonwertować pliki SVG na pliki wektorowe za pomocą tego przydatnego narzędzia.

oczywistą zaletą korzystania z wektorowych rysunków jest rozmiar footprintu twojego APK. Różnica w wielkości aplikacji z wektorami w stosunku do obrazów jest dość znacząca. Zamiast kilku spakowanych obrazów dla każdej rozdzielczości DPI, którą obsługuje aplikacja, masz pojedynczy, umiarkowanie mały plik tekstowy ze ścieżką obrazu jako jego zawartością.

w przypadku korzystania z normalnych obrazów, takich jak pliki png dla ikon, łatwo jest określić natywną rozdzielczość, sprawdzając wymiary obrazu w odniesieniu do jego zasobnika DPI. Jest to jeszcze łatwiejsze w przypadku rysunków wektorowych, ale istnieją dwie różne zadeklarowane wysokości i szerokości w XML. Masz viewportWidth i width. Widokportwidth jest w rzeczywistości wielkością, którą zasób ma być narysowany w obrębie tego widoku. Po narysowaniu ścieżki wewnątrz będzie ograniczać się do rozmiaru tego widoku. Druga „szerokość” to rzeczywista szerokość, którą programista traktowałby jako swój natywny rozmiar DPI po nadmuchaniu do widoku.

<vector android:height="24dp" android:viewportHeight="22.0"android:width="24dp" android:viewportWidth="15.0"

gdy masz swój wektor rysowalny, możesz rozwinąć wariacje jego wyglądu, tworząc inny XML dla każdej wariacji, do której chcesz mieć dostęp w zasobach Androida. Można to zrobić również w przypadku obrazów raw, ale praca z nimi jest nieco łatwiejsza, gdy chcesz użyć maski bitowej lub zmienić stan koloru ikony bez konieczności zastępowania mnóstwa zasobów.

Luminance to świetny zestaw ikon dla tych, którzy chcieliby poeksperymentować z ikonami. Wszystkie ikony są darmowe i dostępne w formacie SVG.

ponownie, aby podsumować ten potok do zabawy:

  1. Pobierz Luminance i wybierz ikonę, której chcesz użyć w formacie SVG.
  2. upuść SVG do Android SVG do VECTORDRAWABLE i przekonwertuj go na XML wektorowy z Androidem.
  3. umieść XML w katalogu res/drawable.
  4. Użyj w swoim ImageView, ImageButtons lub gdziekolwiek indziej, gdzie chcesz użyć rysowalnego zasobu!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.