画像形式には主にラスター画像とベクター画像の 2 種類があります。
ラスター グラフィック形式にはピクセルが含まれます。ピクセルとは色を示す小さな正方形で、赤、緑、青、アルファの値で構成されています。多数のピクセルを一緒に配置することで、写真など、非常に詳細な画像を形成できます。ラスター グラフィックは固定解像度(固定ピクセル数)です。つまり、画像のサイズを大きくすると解像度が荒くなり、モザイク状になる可能性があります。ラスター グラフィック形式には、JPEG、PNG、WEBP などがあります。
一方、ベクター画像は、画面上の視覚要素を数式で表したもので、拡大・縮小が可能です。ベクターは、線、点、塗りつぶしなど、画面に画像を描画する方法を記述した一連のコマンドのことです。画面上のベクターを拡大・縮小しても、異なるコマンド間の関係が数式によって維持されるため、品質が劣化しません。ベクター画像に向いているのがマテリアル シンボルです。すべて数式で定義できます。
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()
は、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}