Dodaj grafikę wektorową o wielu gęstościach

Android Studio zawiera narzędzie o nazwie Vector Asset Studio, które ułatwia dodawanie ikon materiałów oraz importowanie do projektu plików Scalable Vector Graphic (SVG) i Adobe Photoshop Document (PSD) w postaci zasobów rysowalnych w formacie wektorowym. Użycie elementów rysowanych wektorowych zamiast map bitowych zmniejsza rozmiar pliku APK, ponieważ rozmiar tego samego pliku można zmieniać w zależności od gęstości ekranu bez utraty jakości obrazu. Na starszych wersjach Androida, które nie obsługują elementów rysowalnych wektorowych, narzędzie Vector Asset Studio może podczas tworzenia przekształcać obiekty rysowane wektorowe do różnych rozmiarów bitmap dla poszczególnych gęstości ekranu.

Informacje o Vector Asset Studio

Vector Asset Studio dodaje grafikę wektorową do projektu jako plik XML, który opisuje obraz. Utrzymanie jednego pliku XML może być łatwiejsze niż aktualizowanie wielu grafik rastrowych w różnych rozdzielczościach.

Android 4.4 (poziom interfejsu API 20) i starszy nie obsługują elementów rysowalnych w formacie wektorowym. Jeśli minimalny poziom interfejsu API jest ustawiony na jeden z tych poziomów, w narzędziu Vector Asset Studio masz 2 możliwości: wygeneruj pliki PNG (Portable Network Graphics) (domyślnie) lub skorzystaj z Biblioteki pomocy.

Aby zapewnić zgodność wsteczną, Vector Asset Studio generuje obrazy rastrowe elementów rysowanych wektorowo. Elementy rysowane w formacie wektorowym i rastrowym są połączone w pakiet APK. Elementy rysowalne w formacie wektorowym możesz określać jako Drawable w kodzie Java lub @drawable w kodzie XML. Gdy aplikacja jest uruchamiana, odpowiedni obraz wektorowy lub rastrowy wyświetla się automatycznie w zależności od poziomu interfejsu API.

Jeśli chcesz korzystać tylko z obiektów rysowalnych wektorowych, możesz użyć Biblioteki pomocy Androida w wersji 23.2 lub nowszej. Ta metoda wymaga wprowadzenia zmian w pliku build.gradle przed uruchomieniem narzędzia Vector Asset Studio zgodnie z opisem w sekcji Obsługa wstecznej zgodności biblioteki. Klasa VectorDrawableCompat w Bibliotece pomocy umożliwia obsługę VectorDrawable w Androidzie 2.1 (poziom interfejsu API 7) i nowszych.

Obsługiwane typy grafiki wektorowej

Specyfikacja Google Material Design zawiera ikony materiałów, których możesz używać w aplikacjach na Androida. Studio zasobów wektorowych ułatwia wybieranie, importowanie i zmienianie rozmiaru ikon materiałów, a także określanie przezroczystości i ustawienia odbicia lustrzanego od prawej do lewej.

Vector Asset Studio pozwala też importować własne pliki SVG i PSD. SVG to oparty na języku XML otwarty standard organizacji World Wide Web Consortium (W3C). Format pliku PSD obsługuje funkcje Adobe Photoshop. Vector Asset Studio obsługuje podstawowe standardy, ale nie wszystkie funkcje SVG i PSD. Gdy podasz plik SVG lub PSD, narzędzie Vector Asset Studio natychmiast poinformuje Cię, czy kod grafiki jest obsługiwany. Konwertuje plik na plik XML zawierający kod VectorDrawable. Jeśli pojawią się błędy, upewnij się, że obiekt rysowalny wektorowo wyświetla się prawidłowo. Więcej informacji o dozwolonych funkcjach PSD znajdziesz w artykule na temat obsługi i ograniczeń plików PSD.

W przypadku Androida w wersji 5.0 (poziom interfejsu API 21) i nowszych możesz używać klasy AnimatedVectorDrawable do animowania właściwości klasy VectorDrawable. W Bibliotece pomocy możesz używać klasy AnimatedVectorDrawableCompat do animowania klasy VectorDrawable na Androidzie 3.0 (poziom interfejsu API 11) i nowszych. Więcej informacji znajdziesz w artykule na temat elementów rysunkowych w formie animacji wektorowej.

Uwagi dotyczące plików SVG i PSD

W przypadku prostych ikon nadają się do rysowania w formacie wektorowym. Ikony materiałów to dobre przykłady typów obrazów, które działają dobrze jako obrazy wektorowe w aplikacji. Natomiast wiele ikon uruchamiania aplikacji ma wiele szczegółów, więc lepiej działają jako obrazy rastrowe.

Wstępne wczytywanie elementu rysowalnego w formacie wektorowym może kosztować więcej cykli procesora niż odpowiedni obraz rastrowy. Wykorzystanie pamięci i wydajność są w obu przypadkach podobne. Zalecamy ograniczenie obrazu wektorowego do maksymalnie 200 x 200 dp. W przeciwnym razie jego rysowanie może zająć zbyt dużo czasu.

Chociaż obiekty rysowalne wektorowe obsługują co najmniej 1 kolor, w wielu przypadkach warto pokolorować ikony na czarne (android:fillColor="#FF000000"). Korzystając z tego rozwiązania, możesz dodać odcień do elementu rysowalnego w układzie, który znajduje się w układzie, dzięki czemu ikona zmieni kolor na czarny. Jeśli kolor ikony nie jest czarny, może ona stapiać się z kolorem odcienia.

Rozwiązania rysowalne wektorowo w zakresie zgodności wstecznej

W tej tabeli podsumowano 2 metody, których możesz używać do zapewnienia zgodności wstecznej:

Korzystając z elementów rysowalnych w formacie wektorowym, można uzyskać mniejszy plik APK, ale początkowe wczytywanie takich elementów może potrwać dłużej.

PNG

Android 5.0 (poziom interfejsu API 21) i nowsze zapewniają obsługę rysowalnych wektorów. Jeśli Twoja aplikacja ma minimalny poziom interfejsu API niższy niż niższy, narzędzie Vector Asset Studio dodaje do Twojego projektu plik wektorowy, który można rysować. Dodatkowo podczas kompilacji Gradle tworzy obrazy rastrowe PNG w różnych rozdzielczościach. Gradle generuje gęstości PNG określone przez właściwość generatedDensities (język specyficzny dla domeny) w pliku build.gradle.

W przypadku Androida w wersji 5.0 (poziom interfejsu API 21) i nowszych usługa Vector Asset Studio obsługuje wszystkie elementy VectorDrawable. Aby zapewnić zgodność wsteczną z Androidem 4.4 (poziom interfejsu API 20) lub starszym, Vector Asset Studio obsługuje te elementy XML:

Możesz zmienić kod XML wygenerowany przez narzędzie Vector Asset Studio, ale nie jest to sprawdzona metoda. Zmiana wartości w kodzie nie powinna powodować żadnych problemów, o ile są one prawidłowe i statyczne. Jeśli chcesz dodać elementy XML, upewnij się, że są one obsługiwane w zależności od Twojego minimalnego poziomu interfejsu API.

Biblioteka pomocy

Ta metoda wymaga biblioteki pomocy Androida w wersji 23.2 lub nowszej i wtyczki do Androida dla Gradle w wersji 2.0 lub nowszej oraz używa tylko elementów rysowalnych w formacie wektorowym. Klasa VectorDrawableCompat w Bibliotece pomocy umożliwia obsługę VectorDrawable w Androidzie 2.1 (poziom interfejsu API 7) i nowszych.

Przed użyciem narzędzia Vector Asset Studio musisz dodać instrukcję do pliku build.gradle:

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'com.android.support:appcompat-v7:23.2.0'
}

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("com.android.support:appcompat-v7:23.2.0")
}

Musisz też używać technik kodowania, które są zgodne z Biblioteką pomocy, takich jak atrybut app:srcCompat zamiast atrybutu android:src w przypadku elementów rysowalnych wektorowych. Więcej informacji znajdziesz w Bibliotece pomocy Androida 23.2.

Uruchamianie narzędzia Vector Asset Studio

Aby uruchomić narzędzie Vector Asset Studio:

1. W Android Studio otwórz projekt aplikacji na Androida.
2. W oknie Projekt wybierz widok Androida.
3. Kliknij prawym przyciskiem myszy folder res i wybierz Nowy > Zasób wektorowy.

W niektórych innych widokach projektu i folderach również znajduje się to polecenie.

Pojawi się narzędzie Vector Asset Studio.



Rysunek 1. Studio zasobów wektorowych.

4. Jeśli zamiast tego pojawi się okno Potrzebujesz nowszej wtyczki Androida do obsługi Gradle, popraw wersję Gradle w ten sposób:
1. Wybierz Plik > Struktura projektu.
2. W oknie Struktura projektu wybierz Projekt.
3. W polu Wersja wtyczki do Androida zmień wersję wtyczki Androida do obsługi Gradle na 1.5.0 lub nowszą i kliknij OK.

Gradle synchronizuje projekt.

4. W widoku Androida w oknie Projekt kliknij prawym przyciskiem myszy folder res i wybierz Nowy > Zasób wektorowy.

Pojawi się narzędzie Vector Asset Studio.

5. Przeczytaj artykuł Importowanie grafiki wektorowej.

Importowanie grafiki wektorowej

Vector Asset Studio pomaga zaimportować plik grafiki wektorowej do projektu aplikacji. Wykonaj jedną z tych procedur:

• Dodawanie ikony Materiał
• Importowanie pliku SVG lub PSD

Dodawanie ikony Material

Po otwarciu Vector Asset Studio możesz dodać ikonę materiału w ten sposób:

1. W Vector Asset Studio wybierz Ikona materiału.
2. Kliknij przycisk w polu Ikona.

3. Pojawi się okno Wybieranie ikony. Aby odfiltrować wyświetlane ikony, wybierz kategorię ikon z listy po lewej stronie lub wpisz tekst w polu wyszukiwania, tak jak to widać na ilustracji 2.

   

   Rysunek 2. Filtrowanie ikon materiałów w Vector Asset Studio.

Wybierz ikonę materiału i kliknij OK. Pojawi się ona w podglądzie rysunkowym wektorowym.

4. Opcjonalnie zmień nazwę zasobu, jego rozmiar, przezroczystość i ustawienie lustrzanego odbicia od prawej do lewej (RTL):
   • Nazwa – jeśli nie chcesz używać nazwy domyślnej, wpisz nową. Vector Asset Studio automatycznie tworzy unikalną nazwę (dodaje na końcu nazwę numer), jeśli nazwa zasobu już istnieje w projekcie. Nazwa może zawierać tylko małe litery, podkreślenia i cyfry.
   • Zastąp – wybierz tę opcję, jeśli chcesz zmienić rozmiar obrazu. Gdy wpiszesz nowy rozmiar, zmiana pojawi się w obszarze podglądu.

   Wartość domyślna to 24 x 24 dp, co jest określone w specyfikacji Material Design. Usuń zaznaczenie pola wyboru, aby powrócić do ustawień domyślnych.

   • Przezroczystość – suwakiem do dostosowania przezroczystości obrazu. Zmiana pojawi się w obszarze podglądu.
   • Włącz automatyczne odbicie lustrzane w układzie od prawej do lewej – wybierz tę opcję, jeśli chcesz, by w układzie od prawej do lewej strony był wyświetlany obraz lustrzany, a nie od lewej do prawej. Na przykład niektóre języki są odczytywane od prawej do lewej. Jeśli masz ikonę strzałki, możesz wyświetlić jej lustrzane odbicie. Jeśli pracujesz ze starszym projektem, konieczne może być też dodanie do pliku manifestu aplikacji android:supportsRtl="true". Automatyczne dublowanie jest obsługiwane na urządzeniach z Androidem 5.0 (poziom interfejsu API 21) i nowszymi oraz z biblioteką pomocy.
5. Kliknij Dalej.
6. Opcjonalnie zmień moduł i katalog zasobów:
• Katalog Res – wybierz zbiór źródeł zasobów, do którego chcesz dodać rysowalny wektorowy zbiór: src/main/res, src/debug/res, src/release/res lub zbiór źródeł zdefiniowany przez użytkownika. Główny zbiór źródłowy ma zastosowanie do wszystkich wariantów kompilacji, w tym do debugowania i tworzenia wersji. Zestawy źródeł debugowania i wersji zastępują główny zbiór źródłowy i dotyczą jednej wersji kompilacji. Zbiór źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowy zbiór źródłowy, wybierz Plik > Struktura projektu > aplikacja > Typy kompilacji. Możesz na przykład zdefiniować zestaw źródeł w wersji beta i utworzyć wersję ikony, która zawiera w prawym dolnym rogu tekst „BETA”. Więcej informacji znajdziesz w artykule o konfigurowaniu wariantów kompilacji.

W obszarze Katalogi wyjściowe wyświetla się obiekt rysowalny wektorowo oraz katalog, w którym się pojawi.

7. Kliknij Zakończ.

Studio zasobów wektorowych dodaje plik XML określający obiekt rysowalny wektorowo do projektu w folderze app/src/main/res/drawable/. W widoku Androida w oknie Projekt możesz wyświetlić wygenerowany plik wektorowy XML w folderze drawable.

8. Skompilujesz projekt.

Jeśli minimalny poziom interfejsu API to Android 4.4 (poziom API 20) lub niższy i nie masz włączonej metody Biblioteki pomocy, narzędzie Vector Asset Studio generuje pliki PNG. W widoku plików projektu w oknie projektu możesz wyświetlić wygenerowane pliki PNG i XML w folderze app/build/generated/res/pngs/debug/.

Nie należy edytować tych wygenerowanych plików rastrowych. Zamiast tego pracować z plikiem XML wektorów. System kompilacji automatycznie ponownie generuje pliki rastrowe w razie potrzeby, więc nie musisz ich przechowywać.

Importowanie pliku SVG lub PSD

Po otwarciu narzędzia Vector Asset Studio możesz zaimportować plik SVG lub PSD w ten sposób:

1. W narzędziu Vector Asset Studio wybierz Plik lokalny.

Plik musi być na dysku lokalnym. Jeśli na przykład znajduje się w sieci, musisz najpierw pobrać go na dysk lokalny.

2. Określ plik obrazu, klikając ....

Obraz pojawi się w podglądzie rysunkowym wektorowym.

Jeśli plik SVG lub PSD zawiera nieobsługiwane funkcje, w dolnej części narzędzia Vector Asset Studio pojawi się błąd, tak jak na ilustracji 3.



Rysunek 3. Vector Asset Studio wyświetla błędy.

Jeśli zauważysz błędy, musisz upewnić się, że importowany plik wektorowy jest renderowany prawidłowo. Przewiń listę, aby wyświetlić błędy.

Listę obsługiwanych elementów znajdziesz w artykule o rozwiązaniach wstecznej zgodności wektorowym. Więcej informacji na temat dozwolonych plików PSD znajdziesz w artykule Pomoc i ograniczenia dotyczące plików PSD.

3. Opcjonalnie zmień nazwę zasobu, jego rozmiar, przezroczystość oraz ustawienie lustrzanego odbicia od prawej do lewej (RTL):
• Nazwa – wpisz nową nazwę, jeśli nie chcesz używać nazwy domyślnej. Vector Asset Studio automatycznie tworzy unikalną nazwę (dodaje na końcu nazwy numer), jeśli nazwa zasobu już istnieje w projekcie. Nazwa może zawierać tylko małe litery, podkreślenia i cyfry.
• Zastąp – wybierz tę opcję, jeśli chcesz zmienić rozmiar obrazu. Gdy go wybierzesz, zmieni się rozmiar samego obrazu. Po każdej zmianie rozmiaru zmiana będzie widoczna w obszarze podglądu. Wartość domyślna to 24 x 24 dp, co jest określone w specyfikacji Material Design.
• Przezroczystość – suwakiem do dostosowania przezroczystości obrazu. Zmiana pojawi się w obszarze podglądu.
• Włącz automatyczne odbicie lustrzane w układzie od prawej do lewej – wybierz tę opcję, jeśli chcesz, by w układzie od prawej do lewej strony był wyświetlany obraz lustrzany, a nie od lewej do prawej. Na przykład niektóre języki są odczytywane od prawej do lewej. Jeśli masz ikonę strzałki, możesz wyświetlić jej lustrzane odbicie. Jeśli pracujesz ze starszym projektem, konieczne może być dodanie do pliku manifestu aplikacji android:supportsRtl="true". Automatyczne dublowanie jest obsługiwane na urządzeniach z Androidem 5.0 (poziom interfejsu API 21) i nowszym, a także na bibliotece pomocy.
4. Kliknij Dalej.
5. Opcjonalnie zmień katalog zasobów:
• Katalog Res – wybierz zbiór źródeł zasobów, do którego chcesz dodać rysowalny wektorowy zbiór: src/main/res, src/debug/res, src/release/res lub zbiór źródeł zdefiniowany przez użytkownika. Główny zbiór źródłowy ma zastosowanie do wszystkich wariantów kompilacji, w tym do debugowania i tworzenia wersji. Zestawy źródeł debugowania i wersji zastępują główny zbiór źródłowy i dotyczą jednej wersji kompilacji. Zbiór źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowy zbiór źródłowy, wybierz Plik > Struktura projektu > aplikacja > Typy kompilacji. Możesz na przykład zdefiniować zestaw źródeł w wersji beta i utworzyć wersję ikony, która zawiera w prawym dolnym rogu tekst „BETA”. Więcej informacji znajdziesz w artykule o konfigurowaniu wariantów kompilacji.

W obszarze Katalogi wyjściowe wyświetla się obiekt rysowalny wektorowo oraz katalog, w którym się pojawi.

6. Kliknij Zakończ.

Studio zasobów wektorowych dodaje plik XML określający obiekt rysowalny wektorowo do projektu w folderze app/src/main/res/drawable/. W widoku Androida w oknie Projekt możesz wyświetlić wygenerowany plik wektorowy XML w folderze drawable.

7. Skompilujesz projekt.

Jeśli minimalny poziom interfejsu API to Android 4.4 (poziom API 20) lub niższy i nie masz włączonej metody Biblioteki pomocy, narzędzie Vector Asset Studio generuje pliki PNG. W widoku plików projektu w oknie projektu możesz wyświetlić wygenerowane pliki PNG i XML w folderze app/build/generated/res/pngs/debug/.

Nie należy edytować tych wygenerowanych plików rastrowych. Zamiast tego pracować z plikiem XML wektorów. System kompilacji automatycznie ponownie generuje pliki rastrowe w razie potrzeby, więc nie musisz ich przechowywać.

Dodawanie do układu elementu rysowalnego wektorowego

W pliku układu możesz ustawić dowolny widżet związany z ikonami, np. ImageButton, ImageView itp., aby wskazać obiekt, który można rysować wektorowo. Na przykład ten układ przedstawia na przycisku rysowany wektorowo:

Rysunek 4. Obiekt rysowalny wektorowo wyświetlany na przycisku w układzie.

Aby wyświetlić obiekt rysowalny wektorowo w widżecie, tak jak to pokazano na ilustracji:

1. Otwórz projekt i zaimportuj obiekt rysowalny wektorowy.

W tym przykładzie korzystamy z projektu na telefonie/tablecie wygenerowanego za pomocą Kreatora nowego projektu.

2. W widoku Androida w oknie Projekt kliknij dwukrotnie plik XML układu, na przykład content_main.xml.
3. Kliknij kartę Projekt, aby wyświetlić Edytor układu.
4. Przeciągnij widżet ImageButton z okna Paleta do Edytora układów.
5. W oknie Zasoby w panelu po lewej stronie wybierz Drawable, a następnie wybierz zaimportowany plik wektorowy. Kliknij OK.

Element rysowalny w formacie wektorowym pojawia się w układzie w elemencie ImageButton.

6. Aby zmienić kolor obrazu na kolor uzupełniający zdefiniowany w motywie, w oknie Właściwości znajdź właściwość odcień i kliknij ...
7. W oknie Resources (Zasoby) w panelu po lewej stronie wybierz Kolor, a następnie colorAccent. Kliknij OK.

Kolor obrazu zmieni się na kolor uzupełniający w układzie.

Jeśli projekt korzysta z Biblioteki pomocy, kod ImageButton powinien być podobny do tego:

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

Jeśli projekt nie korzysta z Biblioteki pomocy, kod rysowalny w formacie wektorowym ma postać android:src="@drawable/ic_build_black_24dp".

Odniesienie do elementu rysowalnego w formacie wektorowym w kodzie

Zwykle w kodzie do zasobów rysowalnych wektorowo możesz się odwoływać w ogólny sposób, a po uruchomieniu aplikacji odpowiedni obraz wektorowy lub rastrowy wyświetla się automatycznie, w zależności od poziomu interfejsu API:

• W większości przypadków elementy rysowalne wektorowe możesz określać jako @drawable w kodzie XML lub Drawable w kodzie Java.

Na przykład ten kod XML układu powoduje zastosowanie obrazu do widoku:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

Ten kod w Javie pobiera obraz jako Drawable:

Kotlin

val drawable = resources.getDrawable(R.drawable.myimage, theme)

Java

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

Metoda getResources() znajduje się w klasie Context, która dotyczy obiektów interfejsu, takich jak działania, fragmenty, układy, widoki itd.

• Jeśli Twoja aplikacja w ogóle korzysta z Biblioteki pomocy (nawet wtedy, gdy w pliku build.gradle nie ma instrukcji vectorDrawables.useSupportLibrary = true), możesz też odwołać się do elementu rysowalnego w formacie wektorowym za pomocą instrukcji app:srcCompat. Na przykład:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

• Czasami zajdzie potrzeba użycia rysowalnego zasobu do jego dokładnej klasy, na przykład wtedy, gdy trzeba użyć określonych funkcji klasy VectorDrawable. W tym celu możesz użyć kodu Java, takiego jak poniżej:

Kotlin

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val vectorDrawable = drawable as VectorDrawable
} else {
    val bitmapDrawable = drawable as BitmapDrawable
}

Java

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
   BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

Dostęp do zasobów rysowalnych w formacie wektorowym możesz uzyskać tylko z wątku głównego.

W przypadku metody biblioteki pomocy musisz używać technik kodowania zgodnych z tą biblioteką. Więcej informacji znajdziesz w Bibliotece pomocy Androida 23.2.

Modyfikowanie kodu XML wygenerowanego przez Vector Asset Studio

Możesz modyfikować rysowalny wektorowo kod XML, ale nie pliki PNG ani odpowiadający im kod XML generowany podczas kompilacji. Jednak nie zalecamy tego.

Gdy korzystasz z metody generowania plików PNG, Vector Asset Studio dba o to, aby pliki rysowalne w formacie wektorowym były zgodne z plikami PNG, a plik manifestu zawiera właściwy kod. Jeśli dodasz kod, który nie jest obsługiwany na Androidzie 4.4 (poziom interfejsu API 20) i starszych, obrazy wektorowe i PNG mogą się różnić. Musisz też się upewnić, że plik manifestu zawiera kod obsługujący zmiany.

Aby zmodyfikować plik XML wektorów, gdy nie korzystasz z biblioteki pomocy:

1. W oknie Projekt kliknij dwukrotnie wygenerowany plik XML z wektorami w folderze drawable.

Plik XML pojawi się w oknach edytora i podglądu.



Rysunek 5. Plik XML wektorowy wyświetlany w edytorze kodu i oknie podglądu.

2. Zmodyfikuj kod XML w zależności od tego, co jest obsługiwane przez minimalny poziom interfejsu API:
• Android 5.0 (poziom interfejsu API 21) i nowszy – Vector Asset Studio obsługuje wszystkie elementy Drawable i VectorDrawable. Możesz dodawać elementy XML i zmieniać wartości.
• Android 4.4 (poziom interfejsu API 20) i starszy – Vector Asset Studio obsługuje wszystkie elementy Drawable i podzbiór elementów VectorDrawable. Listę tych rozwiązań znajdziesz w sekcji Rozwiązania do rysowania wstecznego w trybie wektorowym. Możesz zmieniać wartości w wygenerowanym kodzie i dodawać obsługiwane elementy XML.
3. Utwórz projekt i sprawdź, czy rysowalne wektorowe obrazy rastrowe i odpowiadające im obrazy rastrowe wyglądają tak samo.

Pamiętaj, że wygenerowane pliki PNG mogą wyświetlać się w oknie podglądu inaczej niż w aplikacji ze względu na różne mechanizmy renderowania i wszelkie zmiany w rysowalnym wektorze wprowadzone przed kompilacją. Jeśli dodasz kod do pliku XML wektorowego utworzonego przez Vector Asset Studio, funkcje nieobsługiwane w Androidzie 4.4 (poziom interfejsu API 20) i niższym nie pojawią się w wygenerowanych plikach PNG. Dlatego podczas dodawania kodu należy zawsze sprawdzić, czy wygenerowane pliki PNG są zgodne z obiektami rysowalnymi wektorowo. Aby to zrobić, możesz dwukrotnie kliknąć plik PNG w widoku Pliki projektu w oknie Projektu. Gdy kod odnosi się do elementu rysowalnego, na lewym marginesie edytora kodu również zostanie wyświetlony obraz PNG, jak widać na ilustracji 6.



Rysunek 6. Obraz PNG wyświetlany na lewym marginesie Edytora kodu.

Usuwanie z projektu elementu rysowalnego wektorowego

Aby usunąć z projektu obiekt rysowany wektorem:

1. W oknie Projekt usuń wygenerowany plik XML wektorów. W tym celu wybierz plik i naciśnij klawisz Delete (lub kliknij Edytuj > Usuń).

Pojawi się okno Bezpieczne usuwanie.

2. Opcjonalnie wybierz opcje, aby sprawdzić, gdzie w projekcie jest używany plik, i kliknij OK.

Android Studio usunie plik z projektu i dysku. Jeśli jednak wyszukasz w projekcie miejsca, w których plik jest używany, i zostaną znalezione niektóre przypadki użycia, możesz je wyświetlić i zdecydować, czy usunąć plik.

3. Wybierz Build > czysty projekt.

Wszystkie automatycznie wygenerowane pliki PNG i XML odpowiadające usuniętym elementom rysowalnym wektorowym są usuwane z projektu i z dysku.

Przesyłanie aplikacji zawierającej obiekty rysowalne wektorowe

Jeśli została przez Ciebie użyta metoda Biblioteka pomocy lub minimalny poziom interfejsu API to Android 5.0 (poziom interfejsu API 21) lub wyższy, pakiet APK będzie zawierał elementy rysowalne wektorowe dodane za pomocą narzędzia Vector Asset Studio. Pliki APK będą mniejsze niż w przypadku konwersji obrazów wektorowych na pliki PNG.

Jeśli minimalny poziom interfejsu API to Android 4.4 (poziom interfejsu API 20) lub niższy, a w projekcie masz odpowiednie elementy rysowalne wektorowe i obrazy rastrowe, masz 2 możliwości dostarczenia plików APK na 2 sposoby:

• Utwórz jeden plik APK, który zawiera zarówno elementy rysowalne w formacie, jak i odpowiadające im reprezentacje rastrowe. To rozwiązanie jest najprostsze do wdrożenia.
• Twórz osobne pliki APK dla różnych poziomów interfejsu API. Jeśli nie dodasz odpowiednich obrazów rastrowych w pakiecie APK na Androida 5.0 (poziom interfejsu API 21) lub nowszego, plik APK może być znacznie mniejszy. Więcej informacji znajdziesz w artykule Obsługa wielu plików APK.

Obsługa i ograniczenia dotyczące plików PSD

Vector Asset Studio nie obsługuje wszystkich funkcji plików PSD. Poniższa lista zawiera podsumowanie obsługiwanych i nieobsługiwanych cech PSD oraz niektóre szczegóły konwersji.

Dokument

Obsługiwane:

• Tryb kolorów PSD w postaci bitmapy, skali szarości, zindeksowanej, RGB, laboratorium lub CMYK.
• Głębia kolorów: 8, 16 lub 32 bity.

Szczegóły konwersji:

• Wymiary dokumentu PSD stają się wymiarami rysowalnymi wektorowymi i wymiarami widocznego obszaru.

Nieobsługiwane:

• Tryb kolorów PSD duotone lub wielokanałowy.

Kształty

Obsługiwane:

• Maski przycinania, jeśli podstawą przycinania jest inny kształt.
• Operacje związane z kształtami, w tym scalanie, dodawanie, przecinanie, odejmowanie i wykluczanie.

Nieobsługiwane:

• Reguła wypełnienia parzystych nieparzystych używana przez kształty z Photoshopa. W Androidzie 6.0 (poziom interfejsu API 23) i starszych obiekty rysowalne w formacie wektorowym obsługują tylko regułę wypełnienia o wartości niezerowej. W przypadku samodzielnie przecinających się kształtów to ograniczenie może prowadzić do różnic w renderowaniu między obiektem PSD a wynikowym rysowaniem wektorów. Aby rozwiązać ten problem, dodaj android:fillType="evenOdd" do kształtu w elemencie rysowalnym w formacie wektorowym. Przykład:

  <vector xmlns:android="https://schemas.android.com/apk/res/android"
      android:viewportHeight="168"
      android:height="24dp"
      android:viewportWidth="209"
      android:width="24dp">
  
      <path
          android:fillAlpha="1.0"
          android:fillColor="#000000"
          android:fillType="evenOdd"
          android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
  </vector>
  

Pociągnięcia i wypełnienia

Obsługiwane:

• Pociągnięcia, w tym kolor, przezroczystość, szerokość, złączenie, ograniczenie, łączniki i wyrównanie.
• Wypełnienia i kreski w jednolitym kolorem.
• Kolory konturu i wypełnienia określone jako RGB, Lab lub CMYK.

Szczegóły konwersji:

• Jeśli kreska jest przerywana, przycinana za pomocą podstawy przycinania albo jeśli wyrównanie jest inne niż środek, narzędzie Vector Asset Studio przekształca je w kształt wypełnienia w elemencie rysowalnym wektorowym.

Nieobsługiwane:

• Kolory wypełniają i kreski inne niż ciągłe, np. gradienty.

Przezroczystość

Obsługiwane:

• Warstwy kształtów o przezroczystości 0.

Szczegóły konwersji:

• Studio zasobów wektorowych mnoży przezroczystość wypełnienia przez nieprzezroczystość warstwy, aby obliczyć współczynnik alfa wypełnienia.
• Aby obliczyć ostateczną wartość wypełnienia alfa, narzędzie mnoży przezroczystość podstawy przycinania (jeśli istnieje element przycinający) przez wypełnienie alfa.
• Aby obliczyć wartość kreski alfa, narzędzie mnoży przezroczystość kreski przez jej przezroczystość.
• Narzędzie mnoży przezroczystość podstawy przycinania (jeśli istnieje podstawa przycinania) przez kreskę alfa, aby obliczyć ostateczną kreskę alfa.

Warstwy

Obsługiwane:

• Każda widoczna warstwa kształtu.

Szczegóły konwersji:

• Vector Asset Studio zachowuje nazwy warstw w pliku rysowalnym w formacie wektorowym.

Nieobsługiwane:

• Efekty warstw.
• Dostosowywanie i warstwy tekstowe.
• Tryby mieszania (ignorowane).

Obsługa i ograniczenia plików SVG

Vector Asset Studio nie obsługuje wszystkich funkcji plików SVG. W tej sekcji znajdziesz podsumowanie obsługiwanych i nieobsługiwanych funkcji związanych z konwertowaniem pliku SVG na VectorDrawable wraz z dodatkowymi szczegółami konwersji.

Obsługiwane funkcje

VectorDrawable obsługuje wszystkie funkcje z Tiny SVG 1.2 z wyjątkiem tekstu.

Kształty

VectorDrawable obsługuje ścieżki SVG.

Narzędzie przekształca podstawowe kształty, takie jak okręgi, kwadraty i wielokąty, w ścieżki.

Transformacje

Narzędzie obsługuje macierze przekształceń i stosuje je bezpośrednio do ścieżek podrzędnych.

Grupy

Narzędzie obsługuje grupowanie elementów na potrzeby przesunięcia, skalowania i obrotu. Grupy nie obsługują właściwości nieprzezroczystości.

Narzędzie stosuje też do ścieżek podrzędnych dowolny styl lub przezroczystość grupy.

Wypełnienia i kreski

Ścieżki można wypełniać i kreślić przy użyciu jednolitych kolorów lub gradientów (liniowych, promieniowych lub kanciastych). Obsługiwane są tylko kreski wyśrodkowane. Tryby mieszania nie są obsługiwane. Przerywane ścieżki nie są obsługiwane.

Maski

Narzędzie obsługuje jedną maskę przycinania na grupę.

Funkcje nieobsługiwane przez importer SVG

Funkcje, których nie ma na liście w sekcji Obsługiwane funkcje powyżej, nie są obsługiwane. Do najważniejszych nieobsługiwanych funkcji należą:

• Efekty filtrów: efekty takie jak cienie, rozmycia i matryca kolorów nie są obsługiwane.
• Tekst: zalecamy konwersję tekstu na kształty przy użyciu innych narzędzi.
• Wypełnienie wzoru