Edited at

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: