光栅图像和矢量图像是最常见的两种图像格式。
光栅图形格式由一个个像素组成,像素即包含一种颜色(由红、绿、蓝和 Alpha 值组成)的微小方块。将大量像素放在一起就可以形成一张非常细腻的图像,例如照片。光栅图像具有固定的分辨率(固定的像素数)。这意味着,当您增加图像的大小时,图像的细腻程度就会下降,并且可能会发生像素化。光栅图形格式的例子有 JPEG、PNG 和 WEBP。
![JPEG 文件示例](https://developer.android.google.cn/static/develop/ui/compose/images/graphics-sourceimage.jpg?authuser=0000&hl=hr)
矢量图像则是以可伸缩的数学表示形式来呈现屏幕上的视觉元素。矢量是一组命令,用于描述如何在屏幕上绘制图像,例如线、点或填充。在屏幕上缩放矢量时不会降低画质,因为数学公式会保持不同命令之间的关系不变。Material 符号就是不错的 ImageVector 例子,因为它们都可以使用数学公式进行定义。
![矢量示例(文件扩展名为 .xml 或通过 Kotlin 代码定义)](https://developer.android.google.cn/static/develop/ui/compose/images/graphics-shopping.png?authuser=0000&hl=hr)
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}