ImageBitmap と ImageVector

画像形式には主にラスター画像とベクター画像の 2 種類があります。

ラスター グラフィック形式にはピクセルが含まれます。ピクセルとは色を示す小さな正方形で、赤、緑、青、アルファの値で構成されています。多数のピクセルを一緒に配置することで、写真など、非常に詳細な画像を形成できます。ラスター グラフィックは固定解像度（固定ピクセル数）です。つまり、画像のサイズを大きくすると解像度が荒くなり、モザイク状になる可能性があります。ラスター グラフィック形式には、JPEG、PNG、WEBP などがあります。

図 1: JPEG ファイルの例

一方、ベクター画像は、画面上の視覚要素を数式で表したもので、拡大・縮小が可能です。ベクターは、線、点、塗りつぶしなど、画面に画像を描画する方法を記述した一連のコマンドのことです。画面上のベクターを拡大・縮小しても、異なるコマンド間の関係が数式によって維持されるため、品質が劣化しません。ベクター画像に向いているのがマテリアル シンボルです。すべて数式で定義できます。

図 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)
)
VectorVsBitmapSnippets.kt

さらにカスタマイズして（カスタム ペインターの実装など）、ImageBitmap 自体にアクセスする必要がある場合は、次の方法で読み込めます。

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

VectorPainter は、ImageVector を画面に描画する役割を担います。 ImageVector は SVG コマンドのサブセットをサポートしています。すべての画像をベクターで表現できるわけではありません（たとえば、カメラで撮影した写真をベクターに変換することはできません）。

カスタム ImageVector を作成するには、既存のベクター型ドローアブル XML ファイルをインポートするか（インポート ツールを使用して Android Studio にインポート）、クラスを実装して path コマンドを手動で実行します。

単純なユースケースでは、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)
)
VectorVsBitmapSnippets.kt

さらにカスタマイズし、ImageVector 自体にアクセスする必要がある場合は、次の方法で読み込めます。

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt