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 to .xml lub zdefiniowane w kodzie Kotlina)

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 możesz użyć funkcji painterResource(), która tworzy obiekt ImageBitmap i zwraca obiekt Painter (w tym przypadku obiekt 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 danych VectorDrawablesBitmapDrawables do tabel VectorPainterBitmapPainter. 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)