バージョン: v8

@capacitor/splash-screen

スプラッシュスクリーンAPIでは、Splash画像の表示/非表示を切り替えることができます。

Install

npm install @capacitor/splash-screen
npx cap sync

Android 12 スプラッシュスクリーンAPI

これは起動時のスプラッシュスクリーンにのみ影響し、プログラムでshow()メソッドを使用する場合には使用されません。

Capacitor 4は**Android 12 スプラッシュスクリーンAPI**とandroidx.core:core-splashscreen互換性ライブラリを使用して、Android 11以下でも動作するようにしています。

互換性ライブラリは、android/app/src/main/res/values/styles.xmlでAppTheme.NoActionBarLaunchの親をTheme.SplashScreenからAppTheme.NoActionBarに変更することで無効にできます。 Android 12 スプラッシュスクリーンAPIはAndroid OSの一部であるため、Android 12以降では無効にできません。

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
</style>

注意: Android 12およびAndroid 12Lデバイスでは、Nova Launcher、MIUI、Realme Launcher、OPPO Launcherなどのサードパーティランチャー、設定アプリのアプリ情報、またはAndroid StudioなどのIDEから起動した場合、スプラッシュスクリーン画像が表示されません。 Google Issue Tracker Google Issue Tracker Googleはこれらの問題をAndroid 13で修正しましたが、Android 12およびAndroid 12Lへの修正のバックポートは行いません。ランチャー関連の問題はランチャーのアップデートで修正される可能性があります。 Android 13でスプラッシュスクリーンに関連する問題が見つかった場合は、Googleに報告してください。

Example

import { SplashScreen } from '@capacitor/splash-screen';

// Hide the splash (you should do this on app launch)
await SplashScreen.hide();

// Show the splash for an indefinite amount of time:
await SplashScreen.show({
  autoHide: false,
});

// Show the splash for two seconds and then automatically hide it:
await SplashScreen.show({
  showDuration: 2000,
  autoHide: true,
});

スプラッシュスクリーンの非表示

デフォルトでは、スプラッシュスクリーンは500ms後に自動的に非表示になるように設定されています。

アプリの準備ができる前にスプラッシュスクリーンが消えないようにしたい場合は、launchAutoHideをfalseに設定します。スプラッシュスクリーンは手動で非表示にするまで表示されたままになります。最高のユーザーエクスペリエンスのために、アプリはできるだけ早くhide()を呼び出すべきです。

代わりに、スプラッシュスクリーンを一定時間表示したい場合は、Capacitor設定ファイルでlaunchShowDurationを設定します。

背景色

特定の条件下、特にスプラッシュスクリーンがデバイス画面を完全にカバーしていない場合、（透明性のため）角の周りにアプリ画面が見えることがあります。透明色を表示する代わりに、backgroundColorを設定してそれらの領域をカバーできます。

backgroundColorの可能な値は#RRGGBBまたは#RRGGBBAAです。

スピナー

スプラッシュスクリーンの上にスピナーを表示したい場合は、Capacitor設定ファイルでshowSpinnerをtrueに設定します。

以下の設定でスピナーの外観をカスタマイズできます。

Androidの場合、androidSpinnerStyleには以下のオプションがあります：

horizontal
small
large（デフォルト）
inverse
smallInverse
largeInverse

iOSの場合、iosSpinnerStyleには以下のオプションがあります：

large（デフォルト）
small

スピナーの色を設定するにはspinnerColorを使用します。値は#RRGGBBまたは#RRGGBBAAです。

設定

以下の設定値が利用可能です：

Prop	Type	Description	Default	Since
`launchShowDuration`	`number`	How long to show the launch splash screen when autoHide is enabled (in ms)	`500`	1.0.0
`launchAutoHide`	`boolean`	Whether to auto hide the splash after launchShowDuration.	`true`	1.0.0
`launchFadeOutDuration`	`number`	Duration for the fade out animation of the launch splash screen (in ms) Only available for Android, when using the Android 12 Splash Screen API.	`200`	4.2.0
`backgroundColor`	`string`	Color of the background of the Splash Screen in hex format, #RRGGBB or #RRGGBBAA. Doesn't work if `useDialog` is true or on launch when using the Android 12 API.		1.0.0
`androidSplashResourceName`	`string`	Name of the resource to be used as Splash Screen. Doesn't work on launch when using the Android 12 API. Only available on Android.	`splash`	1.0.0
`androidScaleType`	`'CENTER' \| 'CENTER_CROP' \| 'CENTER_INSIDE' \| 'FIT_CENTER' \| 'FIT_END' \| 'FIT_START' \| 'FIT_XY' \| 'MATRIX'`	The ImageView.ScaleType used to scale the Splash Screen image. Doesn't work if `useDialog` is true or on launch when using the Android 12 API. Only available on Android.	`FIT_XY`	1.0.0
`showSpinner`	`boolean`	Show a loading spinner on the Splash Screen. Doesn't work if `useDialog` is true or on launch when using the Android 12 API.		1.0.0
`androidSpinnerStyle`	`'horizontal' \| 'small' \| 'large' \| 'inverse' \| 'smallInverse' \| 'largeInverse'`	Style of the Android spinner. Doesn't work if `useDialog` is true or on launch when using the Android 12 API.	`large`	1.0.0
`iosSpinnerStyle`	`'small' \| 'large'`	Style of the iOS spinner. Doesn't work if `useDialog` is true. Only available on iOS.	`large`	1.0.0
`spinnerColor`	`string`	Color of the spinner in hex format, #RRGGBB or #RRGGBBAA. Doesn't work if `useDialog` is true or on launch when using the Android 12 API.		1.0.0
`splashFullScreen`	`boolean`	Hide the status bar on the Splash Screen. Doesn't work on launch when using the Android 12 API. Only available on Android.		1.0.0
`splashImmersive`	`boolean`	Hide the status bar and the software navigation buttons on the Splash Screen. Doesn't work on launch when using the Android 12 API. Only available on Android.		1.0.0
`layoutName`	`string`	If `useDialog` is set to true, configure the Dialog layout. If `useDialog` is not set or false, use a layout instead of the ImageView. Doesn't work on launch when using the Android 12 API. Only available on Android.		1.1.0
`useDialog`	`boolean`	Use a Dialog instead of an ImageView. If `layoutName` is not configured, it will use a layout that uses the splash image as background. Doesn't work on launch when using the Android 12 API. Only available on Android.		1.1.0

設定例

capacitor.config.jsonでの設定：

{
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "launchAutoHide": true,
      "launchFadeOutDuration": 3000,
      "backgroundColor": "#ffffffff",
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "showSpinner": true,
      "androidSpinnerStyle": "large",
      "iosSpinnerStyle": "small",
      "spinnerColor": "#999999",
      "splashFullScreen": true,
      "splashImmersive": true,
      "layoutName": "launch_screen",
      "useDialog": true
    }
  }
}

capacitor.config.tsでの設定：

/// <reference types="@capacitor/splash-screen" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: true,
      launchFadeOutDuration: 3000,
      backgroundColor: "#ffffffff",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: true,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999",
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
      useDialog: true,
    },
  },
};

export default config;

Android

splash.png以外の名前のスプラッシュスクリーン画像を使用するには、androidSplashResourceNameを新しいリソース名に設定します。さらに、android/app/src/main/res/values/styles.xmlで、以下のブロック内のリソース名を変更します：

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/NAME</item>
</style>

Variables

このプラグインは以下のプロジェクト変数（アプリの variables.gradle ファイルで定義）を使用します：

coreSplashScreenVersion: androidx.core:core-splashscreen のバージョン（デフォルト: 1.2.0）

ガイド例

独自のアイコンとスプラッシュスクリーン画像の追加 ›

Capacitor用の動的/適応可能なスプラッシュスクリーンの作成（Android） ›

show(...)

show(options?: ShowOptions | undefined) => Promise<void>

Show the splash screen

Param	Type
`options`	`ShowOptions`

Since: 1.0.0

hide(...)

hide(options?: HideOptions | undefined) => Promise<void>

Hide the splash screen

Param	Type
`options`	`HideOptions`

Since: 1.0.0

Interfaces

ShowOptions

Prop	Type	Description	Default	Since
`autoHide`	`boolean`	Whether to auto hide the splash after showDuration		1.0.0
`fadeInDuration`	`number`	How long (in ms) to fade in.	`200`	1.0.0
`fadeOutDuration`	`number`	How long (in ms) to fade out.	`200`	1.0.0
`showDuration`	`number`	How long to show the splash screen when autoHide is enabled (in ms)	`3000`	1.0.0

HideOptions

Prop	Type	Description	Default	Since
`fadeOutDuration`	`number`	How long (in ms) to fade out. On Android, if using the Android 12 Splash Screen API, it's not being used. Use launchFadeOutDuration configuration option instead.	`200`	1.0.0

Install​

Android 12 スプラッシュスクリーンAPI​

Example​

スプラッシュスクリーンの非表示​

背景色​

スピナー​

設定​

設定例​

Android​

Variables​

ガイド例​

API​

show(...)​

hide(...)​

Interfaces​

ShowOptions​

HideOptions​

Contents