Dodawanie grafiki wektorowej o różnej gęstości (widoki)

Pojęcia i implementacja w Jetpack Compose

Android Studio zawiera narzędzie o nazwie Vector Asset Studio, które pomaga dodawać ikony w stylu Material Design oraz importować do projektu pliki SVG (Scalable Vector Graphic) i Adobe Photoshop Document (PSD) jako zasoby obiektów rysowalnych wektorowo. Używanie obiektów rysowalnych wektorowo zamiast bitmap zmniejsza rozmiar pliku APK, ponieważ ten sam plik można skalować do różnych gęstości ekranu bez utraty jakości obrazu. W przypadku starszych wersji Androida, które nie obsługują obiektów rysowalnych wektorowo, narzędzie Vector Asset Studio może w czasie kompilacji przekształcić obiekty rysowalne wektorowo w różne rozmiary bitmap dla każdej gęstości ekranu.

Informacje o Vector Asset Studio

Vector Asset Studio dodaje do projektu grafikę wektorową jako plik XML, który opisuje obraz. Prowadzenie 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 starsze wersje nie obsługują rysunków wektorowych. Jeśli minimalny poziom interfejsu API jest ustawiony na jeden z tych poziomów, podczas korzystania z Vector Asset Studio masz 2 opcje: wygenerować pliki PNG (domyślnie) lub użyć techniki zgodności wstecznej w Androidzie X.

Aby zapewnić zgodność wsteczną, narzędzie Vector Asset Studio generuje obrazy rastrowe obiektu rysowalnego wektorowo. Grafiki wektorowe i rastrowe są pakowane razem w pliku APK. Do rysunków wektorowych możesz odwoływać się w kodzie Java jako Drawable lub w kodzie XML jako @drawable. Gdy aplikacja jest uruchomiona, odpowiedni obraz wektorowy lub rastrowy wyświetla się automatycznie w zależności od poziomu interfejsu API.

Zgodność wsteczna w AndroidzieX

Ta technika wymaga Androida X w wersji 1.0 lub nowszej oraz wtyczki Androida do Gradle w wersji 3.2 lub nowszej i korzysta tylko z rysunków wektorowych. Klasa VectorDrawableCompat w AndroidX umożliwia obsługę VectorDrawable na Androidzie 2.1 (poziom interfejsu API 7) i nowszych wersjach.

Zanim zaczniesz korzystać z Vector Asset Studio, musisz dodać do pliku build.gradle to oświadczenie:

Dynamiczny

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

Musisz też używać technik kodowania AndroidX, aby zapewnić wsteczną zgodność, np. używać atrybutu app:srcCompat zamiast atrybutu android:src w przypadku rysunków wektorowych. Więcej informacji znajdziesz w sekcji AndroidX.

Dodawanie obiektu rysowalnego wektorowo do układu

W pliku układu możesz ustawić dowolny widżet związany z ikonami, np. ImageButton, ImageView itp., tak aby wskazywał obiekt rysowalny wektorowo. Na przykład poniższy układ pokazuje obiekt rysowalny wektorowo wyświetlany na przycisku:

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

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

  1. Otwórz projekt i zaimportuj rysunek wektorowy.

    W tym przykładzie użyto projektu na telefony i tablety wygenerowanego za pomocą kreatora nowego projektu.

  2. W widoku Androida okna Project (Projekt) kliknij dwukrotnie plik XML układu, np. 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ładu.

  5. W oknie Zasoby w panelu po lewej stronie wybierz Drawable, a następnie wybierz zaimportowany obiekt rysowalny wektorowo. Kliknij OK.

    Obiekt rysowalny wektorowo pojawi się w ImageButton w układzie.

  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 dialogowym Zasoby w panelu po lewej stronie kliknij Kolor, a następnie wybierz colorAccent. Kliknij OK.

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

Jeśli projekt korzysta z AndroidX, kod ImageButton powinien wyglądać podobnie 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 AndroidaX, kod obiektu rysowalnego wektorowo będzie wyglądać tak: android:src="@drawable/ic_build_black_24dp".

Odwoływanie się do obiektu rysowalnego wektorowo w kodzie

Zwykle możesz odwoływać się do obiektu rysowalnego wektorowo w ogólny sposób w kodzie, a gdy aplikacja jest uruchomiona, odpowiedni obraz wektorowy lub rastrowy wyświetla się automatycznie w zależności od poziomu interfejsu API:

  • W większości przypadków do rysunków wektorowych możesz odwoływać się w kodzie XML jako @drawable lub w kodzie Java jako Drawable.

    Na przykład ten kod XML układu stosuje obraz do widoku:

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

    Poniższy kod 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 ma zastosowanie do obiektów interfejsu, takich jak aktywności, fragmenty, układy, widoki itp.

  • Jeśli Twoja aplikacja korzysta z AndroidX (nawet jeśli w pliku nie masz instrukcji vectorDrawables.useSupportLibrary = true), możesz też odwoływać się do rysunku wektorowego za pomocą instrukcji app:srcCompat.build.gradle Przykład:

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

  • Czasami może być konieczne rzutowanie obiektu rysowalnego na jego dokładną klasę, np. gdy chcesz użyć określonych funkcji klasy VectorDrawable. Możesz to zrobić za pomocą kodu takiego jak ten:

    Kotlin

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

    Java

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

Do zasobów obiektów rysowalnych wektorowo możesz uzyskać dostęp tylko z głównego wątku.

Na Androidzie 5.0 (poziom interfejsu API 21) i nowszych możesz używać klasy AnimatedVectorDrawable do animowania właściwości klasy VectorDrawable. W AndroidzieX 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 Animowanie grafiki rysowanej.