ImageBitmap a ImageVector

Do najpopularniejszych formatów obrazów należą rastrowe i wektorowe.

Format grafiki rastrowej zawiera piksele: małe kwadraty zawierające kolor (oparty na wartościach czerwonej, zielonej i niebieskiej oraz wartości alfa). Połączenie wielu pikseli może stworzyć bardzo szczegółowy obraz, np. zdjęcie. Grafika rastrowa ma stałą rozdzielczość (niezmienną liczbę pikseli). Oznacza to, że po zwiększeniu rozmiaru obrazu utraci on szczegóły, a obraz może się spłynąć. Przykłady formatów grafiki rastrowej to JPEG, PNG i WEBP.

Przykład pliku JPEG
Rysunek 1. Przykład pliku JPEG

Zdjęcia wektorowe to natomiast skalowalne reprezentacje matematyczne elementu wizualnego na ekranie. Wektor to zbiór poleceń opisujących sposób rysowania obrazu na ekranie, na przykład linii, punktu lub wypełnienia. Podczas skalowania wektora na ekranie nie straci on jakości, ponieważ formuła matematyczna zachowa relacje między różnymi poleceniami. Dobrym przykładem obiektu ImageVector są symbole w Material Design, ponieważ można je zdefiniować za pomocą wzorów matematycznych.

Przykład wektora (rozszerzenia plików to .xml lub zdefiniowane w kodzie Kotlina)
Rysunek 2. Przykład wektora (rozszerzenia plików w formacie .xml lub zdefiniowane w kodzie Kotlin)

ImageBitmap

W sekcji „Tworzenie” można załadować obraz rastrowy (często nazywany Bitmap) do instancji ImageBitmap, a element BitmapPainter odpowiada za wyświetlanie bitmapy na ekranie.

W prostych przypadkach użycia można użyć obiektu painterResource(), który tworzy ImageBitmap i zwraca obiekt Painter (w tym przypadku jest to BitmapPainter):

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

Jeśli potrzebujesz dalszego dostosowywania (np. niestandardowej implementacji funkcji malowania) i chcesz uzyskać dostęp do samego ImageBitmap, możesz go załadować w ten sposób:

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)

ImageVector

VectorPainter odpowiada za wyświetlanie ImageVector na ekranie. ImageVector obsługuje podzbiór poleceń SVG. Nie wszystkie obrazy można przedstawić jako wektorów (np. zdjęć zrobionych aparatem nie można przekształcić w wektory).

Niestandardową ImageVector możesz utworzyć, importując istniejący wektorowy plik XML drawable (zaimportowany do Android Studio za pomocą narzędzia do importowania) lub ręcznie implementując klasę i wydając polecenia ścieżki.

W przypadku prostych zastosowań, w których painterResource() działa w klasie ImageBitmap, działa też w klasie ImageVectors, zwracając jako wynik wartość VectorPainter. painterResource() obsługuje wczytywanie poleceń VectorDrawables i BitmapDrawables odpowiednio do VectorPainter i BitmapPainter. Aby załadować VectorDrawable do obrazu, użyj:

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)

Jeśli chcesz dostosować ImageVector, możesz go załadować w ten sposób:

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)