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

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

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

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

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

画像リソースを登録する

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(ファイル名)で値をセットするだけです。

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

表示例

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時点でこのあたりの公式ドキュメントがありませんので、このあたりはこれからドキュメントが揃うことを期待したいです。

参考記事

• 本記事の動作確認リソース | Compose-Multiplatform-Playground Image
• SVGは未対応でXMLリソースに変換する必要がある話

Katz(Yusuke Katsuragawa)

Androidエンジニア

AndroidエンジニアをやっているKatzです。最近はKotlin Multiplatformを中心にやっています。経歴やお仕事の依頼については、私のプロフィールに詳細を記載していますので、ご確認ください。