光柵圖片與向量圖片是兩種最常見的圖片格式。
光柵圖形格式的圖片含有像素,每個像素都是一個有特定顏色的小正方形 (由紅色、綠色、藍色和 Alpha 值組成)。將很多像素放在一起時,可構成非常詳細的圖片,例如一張相片。光柵圖片具有固定的解析度 (固定的像素數量)。這表示當您將圖片放大時,細節會遺失,而且可能會出現像素化現象。光柵圖形格式的範例包括 JPEG、PNG 和 WEBP。
向量圖片則是以可擴充的數學方式來呈現螢幕上的視覺元素。向量是一組指令,說明如何在螢幕上繪製圖像 (例如線條、點或填滿)。在螢幕上調整向量時,品質不會下降,因為數學公式會維持不同指令之間的關係。實質關聯符號就是 ImageVector 很好的例子,因為這些符號都能用數學公式來定義。
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)
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 自訂繪圖工具 {:#custom-painter}
- Compose 中的資源
- 載入圖片 {:#loading-images}