ImageBitmap против ImageVector

Два наиболее распространенных вида форматов изображений — растровые и векторные изображения.

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

Пример файла JPEG
Рисунок 1 : Пример файла JPEG

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

Пример вектора (расширения файлов — .xml или определены в коде Kotlin)
Рисунок 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 поддерживает подмножество команд SVG. Не все изображения можно представить в виде векторов (например, фотографии, сделанные камерой, нельзя преобразовать в вектор).

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

В простых случаях, тот же принцип, которым painterResource() работает для класса ImageBitmap , работает и для ImageVectors , возвращая 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)

{% дословно %} {% endverbatim %} {% дословно %} {% endverbatim %}