fc2ブログ

記事一覧

スプラッシュスクリーン(SplashScreen)をAndroidで表示する方法 | Xamarin.Forms


今回は Android でスプラッシュスクリーンを表示する方法をご紹介いたします。Xamarin ホームページにも紹介されていますが、そのままでは正しく動作しないこと、重要な設定等が省略されていましたので、ここに正しい手順を公開いたします。
尚、iOS では 次の記事「iOSのスプラッシュスクリーンを作成する方法 -LaunchScreen.storyboard-」 で実現しています。

2022/10/24追記
Android 12 (S) において、OS が自動でスプラッシュスクリーンを表示するようになりました。当記事に記載されているスプラッシュスクリーンを表示するには追加の対応が必要です。詳しくは次の記事「新しいスプラッシュスクリーンに対応する方法 -Android 12 (S)-」もご確認ください。


xamarin_splashscreen_01.png



前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.4.0.34 (NuGet Xamarin.Forms 2.3.4.247)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.8.0.175



1.画像を用意する

スプラッシュスクリーン用の画像は自作してください。
私は iOS 版で作成済みですので、それを使いまわします。大きさは適当です。
Androidプロジェクト/Resources/drawable フォルダに「splash_logo.png」という名称で配置します。
※ビルドアクションは AndroidResource に設定されていることを確認してください。

ファイルの配置方法
xamarin_splashscreen_02.png



2.設定ファイルを作成する

Androidプロジェクト/Resources/drawable フォルダに、「splash_screen.xml」というファイルを作成します。
splash_screen.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>

※「@drawable/splash_logo」とは drawable フォルダの splash_logo.png ファイルのことを指しています。
※「@color/splash_background」とは、colors.xml の color タグからsplash_background の値を取得します。画面の背景色になります。



3.テーマを設定する

Androidプロジェクト/values/styles.xml に以下の記述(Style タグのブロック)を追加します。スプラッシュスクリーンの起動時の設定を記述しています。
<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <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>

※「@drawable/splash_screen」とは、drawable フォルダの splash_screen ファイルのことを指します。



4.背景色を設定する

Androidプロジェクト/values/colors.xml ファイルに以下のカラー定義を追加します。これはスプラッシュスクリーンの画像の大きさが足りない場合に同じ色で周りを埋めてくれる為に画面の背景色を設定しています。お好みの色に変更してください。
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="splash_background">#FFFFFF</color>
</resources>



5.SplashActivityを作成する

SplashActivity.cs
using System.Threading.Tasks;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Support.V7.App;
using Android.Util;
namespace AppName.Droid
{
    [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.");
            //非同期のスリープが無いとResume時にスプラッシュスクリーンが表示されない。
            await Task.Delay(1000); // Simulate a bit of startup work.
            Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
        }
    }
}

※「@style/MyTheme.Splash」と記述することで手順3で作成したテーマが読み込まれます。また、MainLauncher = true とすることにより最初に起動するActivity を変更します。



6.MainActivityの記述を変更する

MainActivity.cs ファイルに記述されている「MainLauncher = true」という記述を削除します。


以上でスプラッシュスクリーンが立ち上がり、その後にアプリが起動するようになります。

参考URL
https://developer.xamarin.com/guides/android/user_interface/creating_a_splash_screen/




当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。