Compose Multiplatformでリソースに登録した画像を表示する

Compose Multiplatformではアプリのリソースに画像を登録して、アプリの画面内に表示することができるようになっています。今回はCompose Multiplatformではどのような画像を表示できるのか、画像をリソースとしてどのように登録するのか、リソースとして登録した画像をどのように表示するのか、調べたのでまとめていきたいと思います。

目次

サポートしている画像タイプ

Compose Multiplatformでは下表に記載する画像タイプを表示できるようになっています。

※公式ドキュメントに記載がないので不明点が多いのですが、少なくとも以下の画像ファイル形式を対応していると思います。

種別 補足
PNG
JPG
WEBP
XML(SVG) Android XMLリソースで記述されたベクター型の画像
https://developer.android.com/develop/ui/views/graphics/vector-drawable-resources

画像リソースを登録する

PNG・JPG・WEBP画像を登録する

登録方法

Compose MultiplatformではPNG・JPG・WEBP画像はresourcesディレクトリに保存すると、アプリのリソースとして登録されアプリの画面内に画像を表示できるようになります。

  1. プロジェクトのcommonMainモジュールにresourcesディレクトリを作成する
  2. resourcesディレクトリにサポートしているタイプの画像を保存する

登録例

.
├── JPG.jpg
├── PNG.png
└── WEBP.webp

SVG画像を登録する

登録方法

SVG画像に関してはAndroid XMLリソースに変換してresourcesディクレトリに保存すると、アプリのリソースとして登録されアプリの画面内に画像を表示できるようになります。

  1. IDEでAndroidプロジェクトを選択し、resourcesを右クリックし、「New」⇨「Vector Assets」を選択する
  2. 「Local File」を選択し、「Name」・「Path」・「Size」を入力し、「Next」を選択し、「Finish」で完了する
  3. するとAndroidのresディレクトリにXMLリソースが保存されるのでresourcesに移動する

登録例

.
└── SVG.xml

登録した画像リソースを表示する

表示方法

PNG・JPG・WEBP・XML画像を表示する方法は共通でImageのpainterにpainterResource(ファイル名)で値をセットするだけです。

Kotlin
Image(
    painter  = painterResource("ファイル名"),
    contentDescription = null,
)

表示例

Kotlin
Row (
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    Image(
        painter  = painterResource("PNG.png"),
        contentDescription = null,
        modifier = Modifier.size(100.dp)
    )

    Image(
        painter = painterResource("JPG.jpg"),
        contentDescription = null,
        modifier = Modifier.size(100.dp)
    )

    Image(
        painter = painterResource("WEBP.webp"),
        contentDescription = null,
        modifier = Modifier.size(100.dp)
    )

    Image(
        painter = painterResource("SVG.xml"),
        contentDescription = null,
        modifier = Modifier.size(100.dp)
    )
}

おわりに

Compose Multiplatformの公式に表示できる画像のタイプなどの記載がないのですが、調べた見た感じPNG・JPG・WEBP・SVG(XML)画像がサポートされており、開発には困らないかなと思います。2023/11時点でこのあたりの公式ドキュメントがありませんので、このあたりはこれからドキュメントが揃うことを期待したいです。

参考記事