スプラッシュスクリーン

[アーティクル]
10/02/2019

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

概要

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

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

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

要件

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

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

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

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

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

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

このサンプルアプリケーションでは、splash_screen.xml というドローアブルを定義します。このドローアブルは、次の XML に示すように、Layer List を使用してスプラッシュスクリーン画像をアプリケーションの中央に配置します。

<?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 ドキュメントを参照してください。

テーマの実装

スプラッシュスクリーンアクティビティのカスタムテーマを作成するには、ファイル values/styles.xml を編集 (または追加) し、スプラッシュスクリーンの新しい style 要素を作成します。 MyTheme.Splash という名前の style を含むサンプルの values/style.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</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 で非同期的に実行されます。これは、スタートアップ作業が遅くなったり、起動画面の表示が遅くなったりしないようにするために必要です。作業が完了すると、SplashActivity によって MainActivity が起動され、ユーザーはアプリとの対話を開始できます。

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

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

横モード

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

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

Resources/drawable フォルダーに、使用するスプラッシュスクリーン画像の横向きバージョンを追加します。この例では、 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 に追加します(これらは、既存の values/colors.xml および values/style.xml ファイルからコピーして変更できます)。

windowBackground にドローアブルの横向きバージョンを使用するように、values-land/style.xml を変更します。この例では、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 つの方法、つまり、起動アクティビティにカスタムテーマを適用する方法を説明しました。

次の方法で共有

スプラッシュスクリーン

概要

要件

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

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

テーマの実装

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

横モード

まとめ

その他のリソース

次の方法で共有

スプラッシュ スクリーン

概要

要件

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

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

テーマの実装

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

横モード

まとめ

関連リンク

その他のリソース

スプラッシュスクリーン

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

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

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