Bitmapa a obraz wektorowy

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

Format grafiki rastrowej zawiera piksele: małe pojedyncze kwadraty, które zawierają kolor (składający się z wartości czerwieni, zieleni, niebieskiego i alfa). Gdy umieścimy obok siebie wiele pikseli, możemy utworzyć bardzo szczegółowy obraz, na przykład 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.

Rysunek 1. Przykładowy plik JPEG.

Z kolei obrazy wektorowe to skalowalne matematyczne reprezentacje elementu wizualnego na ekranie. Wektor to zestaw poleceń opisujących, jak narysować obraz na ekranie, np. linię, punkt lub wypełnienie. Podczas skalowania wektora na ekranie nie traci on na jakości, ponieważ formuła matematyczna zachowuje relacje między różnymi poleceniami. Dobrym przykładem ImageVector są symbole Material, ponieważ wszystkie można zdefiniować za pomocą wzorów matematycznych.

Rysunek 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 bitmapy na ekranie.

W podstawowych przypadkach użycia można użyć painterResource() do utworzenia ImageBitmap, co 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 rysowania) i dostępu do samego elementu ImageBitmap, możesz go wczytać w ten sposób:

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

ImageVector

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

Niestandardowy ImageVector możesz utworzyć, importując istniejący plik XML z obiektem rysowalnym wektorowo (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ń painterResource() działa tak samo jak w przypadku klasy ImageVectors, ale zwraca VectorPainter jako wynikImageBitmap. painterResource() obsługuje wczytywanie VectorDrawables i BitmapDrawables do VectorPainter i BitmapPainter. 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)
)
VectorVsBitmapSnippets.kt

Jeśli potrzebujesz dodatkowych opcji dostosowywania i musisz uzyskać dostęp do samego obiektu ImageVector, możesz go wczytać w ten sposób:

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