スプラッシュ画面

Android 12 以降では、 SplashScreen API を使用すると、 アニメーションを含む、起動時のアプリ内モーション、表示中のスプラッシュ画面 アプリアイコンの変化、アプリ自体への移行などです。SplashScreenとは Window および したがって Activity

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> 図 1.スプラッシュ画面。

スプラッシュ画面では、すべてのアプリに標準のデザイン要素を使用できます カスタマイズもできるため、独自のブランディングを維持できます。

SplashScreen Platform API を使用するだけでなく、 SplashScreen 互換ライブラリ。SplashScreen API をラップします。

スプラッシュ画面の仕組み

アプリのプロセスが実行されていないときにユーザーがアプリを起動すると(コールド start)、または Activity が 作成(ウォーム スタート)、 次のイベントが発生します。

  1. スプラッシュ画面は、ユーザーが指定したテーマとアニメーションを使用して表示されます。 定義します。

  2. アプリの準備が整うと、スプラッシュ画面は閉じてアプリが表示されます。

スプラッシュ画面が表示されない ホットスタート

スプラッシュ画面の要素とメカニズム

スプラッシュ画面の要素は、 Android マニフェスト ファイル。要素ごとにライトモードとダークモードのバージョンがあります。

スプラッシュ画面のカスタマイズ可能な要素は、アプリアイコン、アイコン背景、ウィンドウ背景で構成されます。

スプラッシュ画面に含まれる要素を示す画像
図 2. スプラッシュのカスタマイズ可能な要素 表示されます。

図 2 に示す次の要素について考えてみましょう。

1 アプリアイコンはベクター型ドローアブルにする必要があります。これは、 静的またはアニメーションを使用できますアニメーションの継続時間に制限はありませんが、1,000 ミリ秒以下にすることをおすすめします。ランチャー アイコンがデフォルトです。

2 アイコンの背景は省略可能で、次のような場合に便利です。 アイコンとウィンドウの背景のコントラストを強める必要があります。 アダプティブ アイコン、 ウィンドウの背景とのコントラストが十分ある場合は、背景が表示されます。

3 アダプティブ アイコンと同様に、ユーザーの 3 分の 1 フォアグラウンドがマスクされます。

4 ウィンドウ背景は、不透明な単色で構成されています。ウィンドウの背景が設定され、無地の色の場合は、それが使用されます。 が使用されます。

スプラッシュ画面のサイズ

スプラッシュ画面のアイコンの仕様は、 アダプティブ アイコン 次のとおりです。

  • ブランド画像: 200×80 dp にする必要があります。
  • 背景がアイコンのアプリアイコン: 240 × 240 dp とし、 直径 160 dp の円。
  • アイコンの背景のないアプリアイコン: 288×288 dp で、そのサイズに収まる必要があります 直径 192 dp の円。

たとえば、画像の合計サイズが 300 x 300 dp の場合、アイコンを直径 200 dp の円内に収める必要があります。円の外側はすべて曲がる 非表示(マスクされます)。

無地の背景と透明な背景のアイコンの寸法の違いを示す画像
図 3. スプラッシュ画面のアイコンのサイズ 背景は無地、透明です。

スプラッシュ画面のアニメーションと起動シーケンス

レイテンシの増加は一般に、コールド スタートでのアプリの起動に関連します。スプラッシュ画面にアニメーション アイコンを追加すると、見た目が良くなり、 よりプレミアムなエクスペリエンスを提供しますユーザー調査によると アニメーションの再生時間が短くなります。

スプラッシュ画面のアニメーションは、次のように起動シーケンス コンポーネント内に埋め込まれます。 図 4 に示します。

起動シーケンスを連続する 12 フレームで表示している画像。ランチャー アイコンがタップされるところから始まり、拡大するにつれ画面全体に表示される
図 4. 起動シーケンス。
  1. 開始アニメーション: システムビューとスプラッシュ画面で構成されます。これは、 システムによって制御され、カスタマイズできません。

  2. スプラッシュ画面(シーケンスの「待機」部分に表示される): スプラッシュ 画面をカスタマイズして、独自のロゴ アニメーションと ブランディング。要件を満たしている 正しく動作することを確認します。

  3. 終了アニメーション: スプラッシュ画面を非表示にするアニメーションで構成されます。 カスタマイズする場合は、 SplashScreenView とその アイコンをクリックします。その上で変換、変換、実行に関する設定を行い、 不透明度、色を指定できますこの場合、スプラッシュ画面を手動で削除して、 アニメーションが完了します。

アイコンのアニメーションを実行すると、アプリの起動により、アプリの準備が早く整った場合にシーケンスをスキップするためのオプションが表示されます。アプリが onResume() をトリガーする スプラッシュ画面が自動的にタイムアウトするので、 気軽にスキップできますスプラッシュ画面を閉じるには onResume() を使用する必要があります 表示が安定していて、スピナーが 必要ありません。導入するインターフェースが不完全であると、ユーザーに不快感を与え、 予測不能または洗練されていない印象を与えます

スプラッシュ画面のアニメーションの要件

スプラッシュ画面は、次の仕様を満たす必要があります。

  • ウィンドウ背景を単色で透明度なしに設定します。デイアンドナイト モードがサポートされています。 SplashScreen 互換ライブラリ

  • アニメーション アイコンが次の仕様を遵守していることを確認します。

    • 形式: アイコンは AnimatedVectorDrawable(AVD) XML。
    • サイズ: AVD アイコンのサイズは、アダプティブ バナーのサイズの 4 倍 次のように指定します。 <ph type="x-smartling-placeholder">
        </ph>
      • アイコン領域は 432 dp( マスクされていないアダプティブ アイコンの 108 dp の領域。
      • 画像の内側の 3 分の 2 がランチャー アイコンに表示されます。 288 dp(実際の 72 dp の 4 倍)にする必要がある は、アダプティブ アイコンの内側のマスク領域を構成します。
    • 継続時間: スマートフォンでは 1,000 ミリ秒を超えないようにすることをおすすめします。次を使用: 166 ミリ秒以下にする必要があります。アプリが 1,000 ms を超える場合は、ループ アニメーションを検討してください。
  • スプラッシュ画面を閉じる適切なタイミングを設定します。このタイミングで、アプリは最初のフレームを表示します。これについては、次の説明に沿ってさらにカスタマイズできます。 詳細を スプラッシュ画面を長時間画面に表示する

スプラッシュ画面のリソース

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> 図 5.AVD の例。

ダウンロード: スターター キットの例 アニメーションを作成、フォーマット、AVD にエクスポートする方法を例示します。 次のツールが含まれています。

  • アニメーションの Adobe After Effects プロジェクト ファイル。
  • 最終的にエクスポートされた AVD XML ファイル。
  • アニメーションの GIF の例。

上記のファイルをダウンロードすると、Google 利用規約に同意したことになります。

このサービスでのデータの取り扱いについては、Google プライバシー ポリシーに記載されています。

アプリのスプラッシュ画面をカスタマイズする

デフォルトでは、次の場合に SplashScreen はテーマの windowBackground を使用します。 windowBackground は単色です。スプラッシュ画面をカスタマイズするには、 属性をアプリテーマに追加します。

アプリのスプラッシュ画面は、次のいずれかの方法でカスタマイズできます。

  • 外観を変更するにはテーマ属性を設定します。

  • 長時間画面に表示したままにします。

  • スプラッシュ画面を閉じるためのアニメーションをカスタマイズします。

始める

コアの SplashScreen ライブラリにより、Android 12 のスプラッシュ画面がすべてのユーザーに API 23 以降のデバイスと同期できますプロジェクトに追加するには、次のスニペットを build.gradle ファイルを次のように変更します。

Groovy

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

スプラッシュ画面のテーマを設定して外観を変更する

Activity テーマで次の属性を指定してカスタマイズできます。 スプラッシュ画面を作成します以前のスプラッシュ画面がすでにある場合 android:windowBackground などの属性を使用する実装では、 Android 12 以降では代替リソース ファイルが提供されます。

  1. 背景を特定の単色で塗りつぶすには、windowSplashScreenBackground を使用します。

    <item name="android:windowSplashScreenBackground">@color/...</item>
    
  2. 使用 windowSplashScreenAnimatedIcon 開始ウィンドウの中央にあるアイコンを置き換えます。

    Android 12(API レベル 32)のみをターゲットとするアプリの場合は、次の操作を行います。

    オブジェクトがアニメーション化可能で AnimationDrawableAnimatedVectorDrawablewindowSplashScreenAnimationDuration を 開始ウィンドウが表示されている間にアニメーションが再生されます。必須ではない Android 13 では、 AnimatedVectorDrawable

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
    
  3. スプラッシュ画面のアイコン アニメーションの継続時間を指定するには、windowSplashScreenAnimationDuration を使用します。これを設定すると スプラッシュ画面が表示される実際の時間には スプラッシュ画面の終了をカスタマイズするときに取得できます。 アニメーションを SplashScreenView.getIconAnimationDuration。 詳しくは、 スプラッシュ画面を長時間画面に表示する をご覧ください。

    <item name="android:windowSplashScreenAnimationDuration">1000</item>
    
  4. windowSplashScreenIconBackgroundColor を使用する スプラッシュ画面のアイコンの背景を設定します。これは、 ウィンドウの背景とアイコンのコントラストが不十分です。

    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
    
  5. 次を使用: windowSplashScreenBrandingImage スプラッシュ画面の下部に表示される画像を設定します。ただし、 デザイン ガイドラインで、ブランド画像の使用は推奨されていません。

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
    
  6. 次を使用: windowSplashScreenBehavior スプラッシュ画面にアイコンを常に表示するかどうかを、 Android 13 以降。デフォルト値は 0 です。この場合、アイコンが画面上に表示されます。 起動アクティビティによって splashScreenStyle が以下に設定されている場合は、スプラッシュ画面 SPLASH_SCREEN_STYLE_ICON, または、起動アクティビティに値が指定されていない場合は、システムの動作に従います。 。空のスプラッシュ画面を表示せず、常に表示したい 表示するアニメーション アイコンを値 icon_preferred に設定します。

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>
    

スプラッシュ画面を長時間表示する

スプラッシュ画面は、アプリが最初のフレームを描画するとすぐに閉じます。もし 少量のデータをロードする必要がある場合(たとえば、 非同期でローカル ディスクを使用する場合は、 ViewTreeObserver.OnPreDrawListener アプリを一時停止して最初のフレームを描画します。

開始アクティビティが描画前に終了した場合(例: not コンテンツ ビューを設定し、onResume(事前描画)の前に終了する 使用する必要はありません。

Kotlin

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

Java

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

スプラッシュ画面を閉じるためのアニメーションをカスタマイズする

Activity.getSplashScreen() を使用すると、スプラッシュ画面のアニメーションをさらにカスタマイズできます。

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.doOnEnd { splashScreenView.remove() }

        // Run your animation.
        slideUp.start()
    }
}

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

        // Run your animation.
        slideUp.start();
    });
}

このコールバックの開始までに、 アニメーション ベクター型ドローアブル スプラッシュ画面のタイマーが開始されますアプリの起動にかかる時間によっては、ドローアブルがアニメーションの中ほどにある場合があります。SplashScreenView.getIconAnimationStart を使用して、アニメーションがいつ開始されたのかを把握します。アイコン アニメーションの残りの時間は次のように計算できます。

Kotlin

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

Java

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

参考情報