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)

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