ImageBitmap a ImageVector

Dwa najpopularniejsze rodzaje formatów obrazów to obrazy rastrowe i wektorowe.

Format grafiki rastrowej zawiera piksele, czyli małe kwadraty, które mają kolor (składający się z wartości czerwonej, zielonej, niebieskiej i alfa). Gdy umieścisz obok siebie wiele pikseli, możesz utworzyć bardzo szczegółowy obraz, np. zdjęcie. Grafika rastrowa ma stałą rozdzielczość (stałą liczbę pikseli). Oznacza to, że gdy zwiększysz rozmiar obrazu, straci on szczegóły i może wystąpić pikselizacja. Przykłady formatów grafiki rastrowej to JPEG, PNG i WEBP.

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

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

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

ImageBitmap

W Compose obraz rastrowy (często nazywany Bitmap) można wczytać do instancji ImageBitmap, a BitmapPainter odpowiada za rysowanie mapy bitowej na ekranie.

W prostszych przypadkach możesz użyć funkcji painterResource(), która tworzy obiekt ImageBitmap i zwraca obiekt Painter (w tym przypadku BitmapPainter):

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

Jeśli potrzebujesz większych możliwości dostosowywania (np. niestandardowego malowania) i chcesz mieć dostęp do samego elementu ImageBitmap, możesz go wczytać w ten sposób:

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

ImageVector

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

Niestandardowy ImageVector możesz utworzyć, importując istniejący plik XML z wektorowym obrazem do rysowania (zaimportowany do Androida Studio za pomocą narzędzia do importowania) lub implementując klasę i ręcznie wydając polecenia ścieżki.

W przypadku prostych zastosowań działa tak samo jak w przypadku klasy painterResource(), ale zwraca VectorPainter jako wynik.ImageBitmapImageVectors painterResource() obsługuje wczytywanie VectorDrawablesBitmapDrawables do VectorPainterBitmapPainter odpowiednio. Aby wczytać VectorDrawable do obrazu, użyj tego polecenia:

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

Jeśli potrzebujesz dodatkowych dostosowań i chcesz uzyskać dostęp do samego ImageVector, możesz go wczytać w ten sposób:

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