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 %} ,

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

Формат растровой графики содержит пиксели: крошечные отдельные квадраты, которые содержат цвет (состоящий из красного, зеленого, синего и альфа-значений). При размещении большого количества пикселей вместе можно сформировать очень детализированное изображение, например, фотографию. Растровая графика имеет фиксированное разрешение (фиксированное количество пикселей). Это означает, что при увеличении размера изображения оно теряет детализацию, и может возникнуть пикселизация. Примерами форматов растровой графики являются 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 %}