次の方法で共有


スプラッシュ スクリーン

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

概要

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

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

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

  2. ドローアブル リソースを表示する新しいテーマを定義する。

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

Xamarin ロゴのスプラッシュ スクリーンに続きアプリ画面が表示される例

要件

このガイドでは、アプリケーションが Android API レベル 21 以上を対象としていることを前提としています。 また、アプリケーションには、Xamarin.Android.Support.v4Xamarin.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
}

横モード

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

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

  1. Resources/drawable フォルダーに、使用するスプラッシュ スクリーン画像の横向きバージョンを追加します。 この例では、 splash_logo_land.png は上記の例で使用したロゴの横向きバージョンです (青の代わりに白の文字が使用されています)。

  2. Resources/drawable フォルダーに、前に定義した layer-list ドローアブル (splash_screen_land.xml など) の横向きバージョンを作成します。 このファイルで、スプラッシュ スクリーン画像の横向きバージョンへのビットマップ パスを設定します。 次の例では、splash_screen_land.xmlsplash_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>
    
  3. Resources/values-land フォルダーがまだ存在しない場合は作成します。

  4. ファイル colors.xml および style.xmlvalues-land に追加します(これらは、既存の values/colors.xml および values/style.xml ファイルからコピーして変更できます)。

  5. 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>
    
  6. 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>
    
  7. もう一度アプリをビルドし、実行します。 スプラッシュ スクリーンが表示されたまま、デバイスを横モードに回転させます。 スプラッシュ スクリーンが横向きバージョンに変わります。

    横向きモードへのスプラッシュ スクリーンの回転

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

まとめ

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