KMP+LandscapistImageでWebの画像取得ロジックを共通化するシンプルなチュートリアル

概要

KMP（Kotlin Multiplatform）で、Webの画像を表示する手順です。
各プラットフォームの共通UIで実装するために、LandscapistImageを使います。
AndroidとiOS向けでサンプルアプリを作成します。

KMPの詳細はこちらの記事もご覧ください。

LandscapistImageの特徴

公式サイト
https://github.com/skydoves/landscapist

landscapist-imageライブラリで使える関数です。
Coilが基盤のlandscapist-coil3ライブラリで使える、CoilImage関数もあります。

どちらもKMPをサポートしているため、各プラットフォームごとに画像取得ロジックを分ける必要がありません。
公式サイトによると、LandscapistImageはCoilImageよりもパフォーマンスが良いです。

Web API経由で取得したリンクを利用して画像を表示する時などに使います。

手順

1. Kotlin Multiplatform Wizardから雛形プロジェクトを取得する
2. landscapist-imageをインポートする
3. 共通UIで実装されているImageを、LandscapistImageに書き換える
4. 各プラットフォームで画像表示を確認する

１．Kotlin Multiplatform Wizardから雛形プロジェクトを取得する

以下のサイトにアクセスします。
https://kmp.jetbrains.com/?android=true&ios=true&iosui=compose&includeTests=false

AndroidとiOSにチェックを入れて、DOWNLOADボタンを押します。

２．landscapist-imageをインポートする

ダウンロードしたプロジェクトを解凍して、AndroidStudioで開きます。
commonMain.dependenciesにlandscapist-imageを追加します。
最新のバージョンは公式ドキュメントから確認できます。

commonMain.dependencies {
    
    // ....
    
    implementation("com.github.skydoves:landscapist-image:2.8.2")
}

３．共通UIで実装されているImageを、LandscapistImageに書き換える

composeApp/src/commonMain/kotlin/org/example/project/App.ktを変更します。

App.kt変更前

Image(painterResource(Res.drawable.compose_multiplatform), null)

App.kt変更後

Lorem Picsumの画像を使用しました。

LandscapistImage(
    imageModel = { "https://picsum.photos/id/237/900/900" },
)

４．各プラットフォームで画像表示を確認する

Androidの実行結果

iOSの実行結果

Tweet

Check