ImageBitmap と ImageVector

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

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

JPEG ファイルの例
図 1: JPEG ファイルの例

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

ベクター画像の例(ファイル拡張子は .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 は、ImageVector を画面に描画する役割を担います。 ImageVector は SVG コマンドのサブセットをサポートしています。すべての画像をベクターで表現できるわけではありません(たとえば、カメラで撮影した写真をベクターに変換することはできません)。

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

単純なユースケースでは、painterResource()ImageBitmap クラスで機能するように、ImageVectors でも同様に VectorPainter を返します。painterResource() は、VectorDrawablesBitmapDrawables をそれぞれ VectorPainterBitmapPainter に読み込ませる処理をします。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)