Compose Multiplatform入門：スプラッシュ画面を設定する方法

はじめに

Compose Multiplatformを使ってモバイルアプリ開発を進める中で、公式ドキュメントが少なく、情報収集に苦労しました。
その経験をもとに、学んだことを備忘録として記録し、同じように困っている開発者の参考になればと思い、Qiitaに記事を残していくことにしました。

今回は、AndroidとiOSそれぞれのスプラッシュ画面（起動画面）を設定する方法を解説します。
独自の画面遷移は用意せずに、それぞれOS標準の機能を利用して設定しました。

環境

• Kotlin Multiplatform Wizardからプロジェクトを作成
• 使用するアイコンはAndroidのスプラッシュ画面のルールに従って作成
• IDE:
  • Android Studio 2024.2.1
  • Xcode 16.1

1. Android側の設定

Androidでは、androidx.core:core-splashscreenライブラリを使用して設定します。

1-1. ライブラリの追加

バージョンカタログの設定

libs.versions.toml で core-splashscreen のバージョン管理をします。

libs.versions.toml

core-splashscreen = "1.0.1"

[libraries]
core-splashscreen = { group = "androidx.core", name = "core-splashscreen", version.ref = "core-splashscreen" }

依存関係の追加

バージョンカタログの内容を元に、build.gradle.kts に依存関係を追加します。

build.gradle.kts

androidMain.dependencies {
    implementation(libs.core.splashscreen)
}

1-2. アイコンの追加

composeApp/src/androidMain/res を右クリックし、New -> Vector Asset を選択し、使用するアイコンを追加します。

1-3. スタイル設定 (splash.xml)

composeApp/src/androidMain/res/values/splash.xml を作成し、利用するスタイルを指定します。

splash.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">#33C659</item> <!-- 背景色 -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/sample_splash_icon</item> <!-- アイコン -->
        <item name="postSplashScreenTheme">@android:style/Theme.Material.NoActionBar</item> <!-- SplashScreen表示後のテーマ -->
    </style>
</resources>

1-4. マニフェストの設定 (AndroidManifest.xml)

1-3で作成したスタイルをマニフェストに設定します。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <application
        ...
        android:theme="@style/Theme.App.Starting"> <!-- 追加 -->
        <activity
            ...
            android:theme="@style/Theme.App.Starting"> <!-- 追加 -->
            ...
        </activity>
    </application>

</manifest>

1-5. MainActivity.ktを編集

1-4までの設定でもスプラッシュ画面の表示は切り替わりますが、スタイルの一部が反映されません。
MainActivityに以下のように設定を追加します。

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        installSplashScreen() // 追加

        setContent {
            App()
        }
    }
}

✅ Androidの表示結果

2. iOS側の設定 (Launch Screen)

スプラッシュ画面はiOSではLaunch Screenと呼ばれています。

2-1. プロジェクトをXcodeで開く

iosApp/iosApp.xcodeproj を右クリックし、Open In -> Xcode を選択します。

2-2. Assetsにアイコンと背景色を追加

アイコンの追加

+ -> Image Set を選択し、画像を設定します。名前は SplashScreenIcon を指定しました。

背景色の追加

+ -> Color Set を選択し、Any Appearance と Dark の色を指定します。色はsystemGreenColorwを利用しています。名前は SplashScreenBackground と指定しました。

💡 メモ:
Assetsに指定する名前はプロジェクトや他Assetsに合わせて適宜わかりやすい名前を指定してください。

2-3. Info.plistの設定

iosApp -> Info をクリックし、Launch Screen の設定を追加します。

• Image Name: SplashScreenIcon
• Background Color: SplashScreenBackground

💡 注意点

Launch Screenはキャッシュが効いて変更が反映されない場合があります。その場合は エミュレーターの再起動 を忘れないようにしましょう。
正しく設定しているのに古いものが表示されて永遠に詰まることになります。

✅ iOSの表示結果

おわりに

以上で、AndroidとiOSのスプラッシュ画面の設定が完了です。シンプルな手順で起動画面が表示されるようになります。
公式のドキュメントや動画だけでは上手くいかない部分もあったため、少しでも開発の参考になれば幸いです。何か疑問点や改善点があれば、ぜひコメントしてください！

👉 サンプルコードのGitHubリポジトリはこちら: SplashScreenSample

また、Compose Multiplatformに関する学びをQiitaに共有していきますので、よろしくお願いします。