Растровое и векторное изображения

Существует два основных типа изображений: растровые и векторные.

Растровый графический формат содержит пиксели – крошечные квадраты, в которых хранится цвет (состоящий из красного, зеленого, синего и альфа-значений). Если разместить много пикселей рядом, можно получить очень детализированное изображение, например фотографию. Растровое изображение имеет фиксированное разрешение (фиксированное количество пикселей). Это означает, что при увеличении размера изображения оно теряет детализацию и может стать пикселизированным. Примеры растровых форматов: JPEG, PNG и WEBP.

Фотография золотистого ретривера крупным планом.
Рисунок 1. Пример файла JPEG.

Векторные изображения представляют собой масштабируемые математические описания визуальных элементов на экране. Вектор – это набор команд, описывающих, как нарисовать изображение на экране, например линию, точку или заливку. При масштабировании векторного изображения на экране его качество не ухудшается, поскольку математическая формула сохраняет соотношение между разными командами. Хорошим примером ImageVector являются символы Material, поскольку все они могут быть определены с помощью математических формул.

Простой линейный значок тележки для покупок с ручкой, корзиной и двумя колесами.
Рисунок 2. Пример векторного изображения (расширение файла – XML или код Kotlin).

ImageBitmap

В Compose растровое изображение (часто называемое Bitmap) можно загрузить в экземпляр ImageBitmap, а BitmapPainter отвечает за отрисовку растрового изображения на экране.

В простых случаях с помощью painterResource() можно создать ImageBitmap и вернуть объект Painter (в данном случае – BitmapPainter):

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

Если вам нужны дополнительные настройки (например, реализация собственного отрисовщика) и доступ к самому объекту ImageBitmap, вы можете загрузить его следующим образом:

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

ImageVector

VectorPainter отвечает за отрисовку ImageVector на экране. ImageVector поддерживает подмножество команд Scalable Vector Graphics (SVG). Не все изображения можно представить в виде векторов. Например, фотографии, сделанные на камеру, нельзя преобразовать в векторные изображения.

Вы можете создать собственную иконку ImageVector, импортировав существующий XML-файл векторного изображения (импортированный в Android Studio с помощью инструмента импорта) или реализовав класс и вручную выполнив команды пути.

В простых случаях painterResource() работает для ImageVectors так же, как и для класса ImageBitmap, возвращая в качестве результата VectorPainter. painterResource() обрабатывает загрузку VectorDrawables и BitmapDrawables в VectorPainter и BitmapPainter соответственно. Чтобы загрузить VectorDrawable в изображение, используйте следующий код:

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

Если вам нужны дополнительные настройки и доступ к самому файлу ImageVector, вы можете загрузить его следующим образом:

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