光栅图像和矢量图像是最常见的两种图像格式。
光栅图形格式由一个个像素组成,像素即包含一种颜色(由红、绿、蓝和 Alpha 值组成)的微小方块。将大量像素放在一起就可以形成一张非常细腻的图像,例如照片。光栅图像具有固定的分辨率(固定的像素数)。这意味着,当您增加图像的大小时,图像的细腻程度就会下降,并且可能会发生像素化。光栅图形格式的例子有 JPEG、PNG 和 WEBP。
矢量图像则是以可伸缩的数学表示形式来呈现屏幕上的视觉元素。矢量是一组命令,用于描述如何在屏幕上绘制图像,例如线、点或填充。在屏幕上缩放矢量时不会降低画质,因为数学公式会保持不同命令之间的关系不变。ImageVector 的好例子是 Material 符号,因为它们都可以使用数学公式进行定义。
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 加载到 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)
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- 自定义 painter {:#custom-painter}
- Compose 中的资源
- 加载图片 {:#loading-images}