為您的 Android 應用新增啟動頁 (Splash Screen)
瞭解如何為您的 Android 應用新增啟動頁。
概述
#啟動頁(也稱為載入頁)可以在 Android 應用載入時提供一個簡單的初始體驗。它為您的應用程式搭建了框架,同時為應用引擎的載入和應用初始化預留了時間。
您可以透過以下幾種方式來實現啟動頁:
-
您可以使用 pub.dev 上提供的軟體包。
-
您可以手動實現,如 splash screen 示例應用所示。本頁剩餘內容將基於手動實現的方式進行說明。
初始化應用
#每個 Android 應用在作業系統建立應用程序時都需要初始化時間。Android 提供了啟動頁 (launch screen) 的概念,以便在應用初始化時顯示 Drawable。
Drawable 是一種 Android 圖形資源。要了解如何在 Android Studio 中將 Drawable 新增到您的 Flutter 專案,請參閱 Android 開發者文件中的 將 Drawable 匯入到專案中。
預設的 Flutter 專案模板包含了啟動主題和啟動背景的定義。您可以透過編輯 styles.xml 來自定義此設定,在該檔案中,您可以定義一個主題,並將 windowBackground 設定為應顯示為啟動頁的 Drawable。
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
此外,styles.xml 還定義了一個*普通主題*,用於在啟動頁消失後應用於 FlutterActivity。普通主題背景僅在啟動頁消失後的極短時間內,以及在螢幕旋轉和 Activity 恢復期間顯示。因此,建議普通主題使用與 Flutter UI 主要背景顏色相似的純背景色。
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/normal_background</item>
</style>
在 AndroidManifest.xml 中設定 FlutterActivity
#在 AndroidManifest.xml 中,將 FlutterActivity 的 theme 設定為啟動主題。然後,向對應的 FlutterActivity 新增元資料元素,以指示 Flutter 在合適的時間從啟動主題切換到普通主題。
<activity
android:name=".MyActivity"
android:theme="@style/LaunchTheme"
// ...
>
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
現在,Android 應用會在初始化時顯示您設定的啟動頁。
SplashScreen API
#Android 12 引入了 SplashScreen API。請在您的 styles.xml 檔案中使用 SplashScreen API。例如:
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowSplashScreenBackground">@color/bgColor</item>
<item name="android:windowSplashScreenAnimatedIcon">@drawable/launch_background</item>
</style>
某些應用可能希望在 Flutter 中繼續顯示 Android 啟動頁的最後一幀。例如,這可以在 Dart 中進行額外載入時,保持單幀過渡的視覺效果。要實現這一點,以下 Android API 可能會有所幫助:
import android.os.Build
import android.os.Bundle
import androidx.core.view.WindowCompat
import io.flutter.embedding.android.FlutterActivity
class MainActivity : FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// Aligns the Flutter view vertically with the window.
WindowCompat.setDecorFitsSystemWindows(getWindow(), false)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
// Disable the Android splash screen fade out animation to avoid
// a flicker before the similar frame is drawn in Flutter.
splashScreen.setOnExitAnimationListener { splashScreenView -> splashScreenView.remove() }
}
super.onCreate(savedInstanceState)
}
}
import android.os.Build;
import android.os.Bundle;
import android.window.SplashScreenView;
import androidx.core.view.WindowCompat;
import io.flutter.embedding.android.FlutterActivity;
public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// Aligns the Flutter view vertically with the window.
WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
// Disable the Android splash screen fade out animation to avoid
// a flicker before the similar frame is drawn in Flutter.
getSplashScreen()
.setOnExitAnimationListener(
(SplashScreenView splashScreenView) -> {
splashScreenView.remove();
});
}
super.onCreate(savedInstanceState);
}
}
然後,您可以在 Flutter 中重新實現第一幀,將 Android 啟動頁的元素顯示在螢幕的相同位置。有關示例,請檢視 splash screen 示例應用。