ImageBitmap a ImageVector

Dwa najpopularniejsze formaty obrazów to obrazy rastrowe i wektorowe.

Format rastrowy zawiera piksele, czyli niewielkie, pojedyncze kwadraty zawierające symbol koloru (złożony z wartości czerwonego, zielonego, niebieskiego i alfa). Gdy umieścisz dużo pikseli, może powstać bardzo szczegółowy obraz, np. fotografia. Grafika rastrowa ma stałą rozdzielczość (niezmienną liczbę pikseli). Oznacza to, że Po zwiększeniu rozmiaru obrazu stracisz szczegóły, a pikselizacja wystąpienia. Przykłady formatów grafiki rastrowej to JPEG, PNG i WEBP.

Rysunek 1. Przykład pliku JPEG

Zdjęcia wektorowe to natomiast skalowalne reprezentacje matematyczne elementu wizualnego na ekranie. Wektor to zestaw poleceń opisujących, jak rysować obrazu na ekranie, np. linii, punktu lub wypełnienia. Skalowanie wektora nie utraci jakości, ponieważ wzór matematyczny zależności między poszczególnymi poleceniami. Dobry przykład ImageVector są symboly materiału, ponieważ każdy z nich można zdefiniować za pomocą wzory matematyczne.

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

ImageBitmap

W funkcji Compose można załadować obraz rastrowy (nazywany często Bitmap) w instancji ImageBitmap, a BitmapPainter odpowiada za przez rysowanie bitmapy na ekran.

W prostych przypadkach można użyć parametru painterResource(), który służy do obsługi: tworząc ImageBitmap i zwraca obiekt Painter (w tym przypadku BitmapPainter):

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

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)
VectorVsBitmapSnippets.kt

ImageVector

Za narysowanie elementu ImageVector na ekranie odpowiada VectorPainter. 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).

Możesz utworzyć niestandardowy ImageVector, importując istniejący wektor plik XML z możliwością rysowania (zaimportowany do Android Studio za pomocą narzędzia do importowania) lub ręcznie zaimplementować klasę i wydać polecenia dotyczące ś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 VectorDrawables i BitmapDrawables w: 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)
)
VectorVsBitmapSnippets.kt

Jeśli potrzebujesz dodatkowego dostosowania i potrzebujesz dostępu do ImageVector może być wczytywany w taki sposób:

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