スプラッシュスクリーン

[アーティクル]
07/13/2023

Android アプリの起動には時間がかかります。特に、アプリがデバイスで最初に起動されたとき。スプラッシュ画面には、ユーザーに対する起動の進行状況が表示されたり、ブランド化を示したりする場合があります。

概要

Android アプリの起動には時間がかかります。特に、アプリがデバイスで初めて実行されるとき (コールド スタートと呼ばれることもあります)。スプラッシュ画面には、起動の進行状況がユーザーに表示される場合や、アプリケーションを識別して昇格するためのブランド化情報が表示される場合があります。

このガイドでは、Android アプリケーションにスプラッシュスクリーンを実装する 1 つの手法について説明します。次の手順について説明しています。

スプラッシュスクリーンの描画可能なリソースを作成する。
描画可能なリソースを表示する新しいテーマを定義する。
前の手順で作成したテーマによって定義されたスプラッシュスクリーンとして使用される新しいアクティビティをアプリケーションに追加します。

必要条件

このガイドでは、アプリケーションが Android API レベル 21 以上を対象としていることを前提としています。アプリケーションには、 Xamarin.Android.Support.v4 パッケージと Xamarin.Android.Support.v7.AppCompat NuGet パッケージもプロジェクトに追加されている必要があります。

このガイドのすべてのコードと XML は、このガイドの SplashScreen サンプルプロジェクトにあります。

スプラッシュスクリーンの実装

スプラッシュスクリーンをレンダリングして表示する最も簡単な方法は、カスタムテーマを作成し、スプラッシュスクリーンを表示するアクティビティに適用することです。アクティビティがレンダリングされると、テーマが読み込まれて、描画可能なリソース (テーマによって参照) がアクティビティの背景に適用されます。この方法では、レイアウトファイルを作成する必要がなくなります。

スプラッシュスクリーンは、ブランド化された描画可能な描画可能なを表示し、初期化を実行し、タスクを開始するアクティビティとして実装されます。アプリがブートストラップされると、スプラッシュスクリーンアクティビティはメインアクティビティを開始し、アプリケーションのバックスタックから自身を削除します。

スプラッシュスクリーン用のドローアブルの作成

スプラッシュスクリーンには、スプラッシュスクリーンアクティビティの背景に描画可能なXMLが表示されます。イメージを表示するには、ビットマップイメージ (PNG や JPG など) を使用する必要があります。

サンプルアプリケーションでは、 splash_screen.xmlと呼ばれる描画可能なを定義します。この描画可能なレイヤーリストを使用して、次の xml に示すように、アプリケーションのスプラッシュスクリーンイメージを中央に配置します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

これにより layer-list 、リソースによって指定された背景色にスプラッシュイメージが中央に @color/splash_background 表示されます。サンプルアプリケーションでは、 Resources/values/colors.xml ファイルでこの色を定義します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="splash_background">#FFFFFF</color>
</resources>

オブジェクトの詳細 Drawable については、 Android Drawable の Google ドキュメントを参照してください。

テーマの実装

スプラッシュスクリーンアクティビティのカスタムテーマを作成するには、ファイル 値/styles.xml を編集(または追加)し、スプラッシュスクリーンの新 style しい要素を作成します。 MyTheme.Splash という名前のサンプル値/style.xml ファイルをstyle次に示します。

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

MyTheme.Splash は非常にスパルタンです。ウィンドウの背景を宣言し、ウィンドウからタイトルバーを明示的に削除し、全画面表示であることを宣言します。アクティビティが最初のレイアウトを拡張する前にアプリの UI をエミュレートするスプラッシュスクリーンを作成する場合は、スタイル定義ではなく windowBackground を使用windowContentOverlayできます。この場合は、UI のエミュレーションを表示するように 、描画 可能なsplash_screen.xmlも変更する必要があります。

スプラッシュアクティビティを作成する

次に、スプラッシュイメージを含み、スタートアップタスクを実行する新しい Android 用アクティビティを起動する必要があります。次のコードは、スプラッシュスクリーンの完全な実装の例です。

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
    static readonly string TAG = "X:" + typeof(SplashActivity).Name;

    public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
    {
        base.OnCreate(savedInstanceState, persistentState);
        Log.Debug(TAG, "SplashActivity.OnCreate");
    }

    // Launches the startup task
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }

    // Simulates background work that happens behind the splash screen
    async void SimulateStartup ()
    {
        Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
        await Task.Delay (8000); // Simulate a bit of startup work.
        Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
        StartActivity(new Intent(Application.Context, typeof (MainActivity)));
    }
}

SplashActivity では、前のセクションで作成したテーマが明示的に使用され、アプリケーションの既定のテーマがオーバーライドされます。テーマが描画可能を背景として宣言するため、に OnCreate レイアウトを読み込む必要はありません。

アクティビティがバックスタックから削除されるように属性を設定 NoHistory=true することが重要です。 [戻る] ボタンでスタートアッププロセスが取り消されないようにするには、オーバーライド OnBackPressed して何も行わないようにすることもできます。

public override void OnBackPressed() { }

スタートアップ作業は、で OnResume非同期的に実行されます。起動作業が遅くなったり、起動画面の表示が遅くなったりしないように、これは必要です。作業が完了すると、が起動MainActivityし、SplashActivityユーザーがアプリとの対話を開始できます。

この新しい SplashActivity は、属性trueをに設定することで、アプリケーションの起動アクティビティとして設定MainLauncherされます。はランチャーアクティビティであるためSplashActivity、を編集MainActivity.csし、から MainActivity属性を削除するMainLauncher必要があります。

[Activity(Label = "@string/ApplicationName")]
public class MainActivity : AppCompatActivity
{
    // Code omitted for brevity
}

横モード

前の手順で実装したスプラッシュスクリーンは、縦モードと横モードの両方で正しく表示されます。ただし、場合によっては、縦モードと横モード用に個別のスプラッシュ画面を用意する必要があります (スプラッシュイメージが全画面表示の場合など)。

横モードのスプラッシュスクリーンを追加するには、次の手順に従います。

[リソース/描画可能] フォルダーに、使用するスプラッシュスクリーンイメージの横向きバージョンを追加します。この例では、 splash_logo_land.png は、上記の例で使用したロゴの横向きバージョンです (青ではなく白い文字を使用します)。
Resources/drawable フォルダーで、前に定義した描画可能の横向きバージョンlayer-listを作成します ( 例:splash_screen_land.xml)。このファイルで、ビットマップパスをスプラッシュスクリーンイメージの横向きバージョンに設定します。次の例では、 splash_screen_land.xml では splash_logo_land.pngを使用しています。
```
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo_land"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>
```
Resources/values-land フォルダーがまだ存在しない場合は作成します。
colors.xmlファイルとstyle.xmlを values-land に追加します (これらは、既存の値/colors.xmlおよび値/style.xmlファイルからコピーおよび変更できます)。

values-land/style.xml を変更して、の描画可能な横向きバージョンを使用するようにしますwindowBackground。この例では、 splash_screen_land.xml を使用します。

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>
    <style name="MyTheme" parent="MyTheme.Base">
  </style>
  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen_land</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

values-land/colors.xml を変更して、スプラッシュスクリーンの横向きバージョンに使用する色を構成します。この例では、横モードの場合、スプラッシュの背景色が青に変更されています。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="primary">#2196F3</color>
  <color name="primaryDark">#1976D2</color>
  <color name="accent">#FFC107</color>
  <color name="window_background">#F5F5F5</color>
  <color name="splash_background">#3498DB</color>
</resources>

もう一度アプリをビルドし、実行します。スプラッシュスクリーンが表示されている間に、デバイスを横モードに回転します。スプラッシュスクリーンが横向きのバージョンに変わります。

横モードのスプラッシュスクリーンを使用すると、常にシームレスなエクスペリエンスが提供されるわけではないことに注意してください。既定では、Android は縦モードでアプリを起動し、デバイスが既に横モードになっている場合でも横モードに切り替えます。その結果、デバイスが横向きモードの間にアプリが起動した場合、デバイスは一時的に縦向きのスプラッシュスクリーンを表示し、縦から横向きのスプラッシュスクリーンへの回転をアニメーション化します。残念ながら、この最初の縦から横への切り替えは、スプラッシュアクティビティのフラグでが指定されている場合 ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape でも行われます。この制限を回避する最善の方法は、縦モードと横モードの両方で正しくレンダリングされる 1 つのスプラッシュスクリーンイメージを作成することです。

まとめ

このガイドでは、Xamarin.Android アプリケーションにスプラッシュスクリーンを実装する方法の 1 つについて説明しました。つまり、起動アクティビティにカスタムテーマを適用します。

スプラッシュ スクリーン

概要

必要条件

スプラッシュ スクリーンの実装

スプラッシュ スクリーン用のドローアブルの作成

テーマの実装

スプラッシュ アクティビティを作成する

横モード

まとめ

関連リンク

その他のリソース

スプラッシュスクリーン

スプラッシュスクリーンの実装

スプラッシュスクリーン用のドローアブルの作成

スプラッシュアクティビティを作成する