ImageBitmap 与 ImageVector

光栅图像和矢量图像是最常见的两种图像格式。

光栅图形格式由一个个像素组成,像素即包含一种颜色(由红、绿、蓝和 Alpha 值组成)的微小方块。将大量像素放在一起就可以形成一张非常细腻的图像,例如照片。光栅图像具有固定的分辨率(固定的像素数)。这意味着,当您增加图像的大小时,图像的细腻程度就会下降,并且可能会发生像素化。光栅图形格式的例子有 JPEG、PNG 和 WEBP。

JPEG 文件示例
图 1:JPEG 文件示例

矢量图像则是以可伸缩的数学表示形式来呈现屏幕上的视觉元素。矢量是一组命令,用于描述如何在屏幕上绘制图像,例如线、点或填充。在屏幕上缩放矢量时不会降低画质,因为数学公式会保持不同命令之间的关系不变。Material 符号就是不错的 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 负责在屏幕上绘制 ImageVectorImageVector 支持一部分 SVG 命令。并非所有图像都能以矢量的形式表示(例如,您用相机拍摄的照片就无法转换为矢量)。

您可以创建自定义 ImageVector,为此,可以导入现有的矢量可绘制对象 XML 文件(使用导入工具导入到 Android Studio 中),也可手动实现该类并发出路径命令。

对于简单的用例,painterResource() 不仅适用于 ImageBitmap 类,也同样适用于 ImageVectors,并返回 VectorPainter 作为结果。painterResource() 会将 VectorDrawables 加载到 VectorPainter,并将 BitmapDrawables 加载到 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)