Xamarin
Xamarin.Forms
スプラッシュ画面

Xamarin.Formsでスプラッシュ画面を設定する

作るもの

シンプルに水平垂直センターにロゴが浮いているスプラッシュ画面です。

アプリ開発経験も、C#もXamarinも経験がそんなになかったので、
毎度調べちゃうからいい加減まとめておきます:page_facing_up::writing_hand:

環境

  • Mac OS High Sierra
  • Visual Studio Community 2017 for Mac 7.6.6
  • Xamarin.Android 9.0.0
  • Xamarin.iOS 12.0.0
  • プロジェクトはShared Project

実装!

ものの10分くらいで実装できます。いざいざ!:laughing::point_up:

iOS

info.plistの起動画像の部分を見ると、以下のようになってます。
スクリーンショット 2018-09-25 22.57.35.png

このLunchScreenがどこかっていうと、アプリ名.iOS/Resources/LaunchScreen.storyboardです。
ほほー、これが俗にいうストーリーボードかぁ
開いて見ると、GUIで操作できそう。 素晴らしく簡単だなぁ
スクリーンショット 2018-09-25 23.16.58.png

Xamarinのデフォルトで水平垂直センターにロゴが設置されたスプラッシュがすでに設定されてるので、
することは

  • 背景色の変更
  • ロゴ画像の変更

だけですね。

1) 背景色を変更

青色の部分をクリックして選択すると、右下プロパティ欄が少し変化すると思います。
下へスクロールすると、Backgroudの項目があると思います。

ここのTintWhiteに変更
Backgroud一度既定にしてからWhiteに変更
スクリーンショット 2018-09-25 23.09.29.png

2) ロゴ画像の変更

(スクショだとなんかズレてますけど)中央に配置されてる画像っぽいアイコンをクリックします。
右下プロパティ欄がまた変化すると思うので、そこのImage View欄をのImageをクリックすると、Finderが起動して画像を選択できます。

画像を選択するとポップアップが出ますが、
コピーなり、移動なりを好きに選んでもらえばと思います。
スクリーンショット 2018-09-25 23.21.05.png

上下中央配置については画像を選択している状態で、
プロパティ上部のLayoutをクリック!
以下の部分を各1回ずつクリックすれば上下左右中央に配置されます
スクリーンショット 2018-09-25 23.25.56.png

はい! これだけ!!
これだけでiOSは思い通り表示されたと思います。

Android

iOSの実装はすぐでしたが、Androidはもうちょっとすることがあります。
実装方法はスプラッシュ用のActivityを作る方法もありますが、
今回はスプラッシュ用テーマを切り替える方法で実装します。

1) ロゴ画像はResources/drawable/配下に配置しておく

拡張子は基本何でもよくて、のちに設定するxmlでは拡張子を指定しないので特に気にしなくて良い。

2) スプラッシュ用テーマを設定するためにResources/values/styles.xml<resources>内に以下を追記

<style name="splashscreen" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

3) レイアウト定義するためにResources/drawable/splash.xmlを作成

背景色を直接指定できなかったっぽい?ので、四角を配置して、それを背景として代用してます。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <shape android:shape="rectangle" >
      <solid android:color="#FFFFFFFF" />
    </shape>
  </item>
  <item>
    <bitmap
        android:gravity="center"
        android:src="@drawable/logo" >
    </bitmap>
  </item>
</layer-list>

4) テーマの切り替えを設定しましょう MainActivity.csを以下のように変更追記。

アプリ起動時はスプラッシュ用テーマを設定するように、
12行目あたりのTheme = "@style/MainTheme"Theme = "@style/splashscreen"に変更

[Activity(Label = "TestApp", Icon = "@mipmap/icon", Theme = "@style/splashscreen", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

アプリ起動後、読み込まれたら通常のテーマに戻るように設定。
OnCreate内に以下を追加

base.Window.RequestFeature(WindowFeatures.ActionBar);
base.SetTheme(Resource.Style.MainTheme);

これで完成!:star2:

参考サイト様

Androidに関してはこちらでやっていること + xml利用しただけです。
http://studio-geek.com/archives/1114

Special Thanks...:bow::bow::bow: