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

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

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

# 環境
- [Kotlin Multiplatform Wizard](https://kmp.jetbrains.com/)からプロジェクトを作成
- 使用するアイコンは[Androidのスプラッシュ画面](https://developer.android.com/develop/ui/views/launch/splash-screen?hl=ja)のルールに従って作成
- 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** を選択し、使用するアイコンを追加します。
![スクリーンショット 2024-12-10 1.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/424353c3-4318-38b7-6352-2fa2780bedcc.png)

### **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の表示結果**

![Screen_recording_20241210_010846.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/6f44dfd4-c7bd-86fd-3af4-961a52b1dd17.gif)

# **2. iOS側の設定 (Launch Screen)**  
スプラッシュ画面はiOSではLaunch Screenと呼ばれています。

### **2-1. プロジェクトをXcodeで開く**  
`iosApp/iosApp.xcodeproj` を右クリックし、**Open In -> Xcode** を選択します。

### **2-2. Assetsにアイコンと背景色を追加**  
#### アイコンの追加
`+ -> Image Set` を選択し、画像を設定します。名前は `SplashScreenIcon` を指定しました。

![スクリーンショット 2024-12-09 23.24.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/bf3e7bfb-8d01-11eb-31f0-8e00668cecef.png)

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

![スクリーンショット 2024-12-10 0.24.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/c954932b-76ff-7e02-4e15-0c10287696a0.png)

![スクリーンショット 2024-12-09 23.44.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/e5c2f2e9-b231-591b-7947-1a50656e90b6.png)


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

### **2-3. Info.plistの設定**  
`iosApp -> Info` をクリックし、`Launch Screen` の設定を追加します。
- **Image Name:** `SplashScreenIcon`
- **Background Color:** `SplashScreenBackground`

![スクリーンショット 2024-12-09 23.29.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/1c0ef19d-1687-5c99-09ce-d83dbddcdc61.png)

![スクリーンショット 2024-12-10 0.16.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/016650cc-c9f7-e2f2-fb54-b5ee28e7cc77.png)

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

### **✅ iOSの表示結果**
![Simulator Screen Recording - iPhone 16 - 2024-12-10 at 01.07.07_low.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268830/e7f0d0aa-450c-e656-e62d-40fffd614c68.gif)

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

👉 サンプルコードのGitHubリポジトリはこちら: [SplashScreenSample](https://github.com/mabo-matsu/SplashScreenSample)

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