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`の起動画像の部分を見ると、以下のようになってます。
<img width="557" alt="スクリーンショット 2018-09-25 22.57.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/84532/d3d802c4-0dd3-f1ac-da2e-de1cfc05edbc.png">

このLunchScreenがどこかっていうと、`アプリ名.iOS/Resources/LaunchScreen.storyboard`です。
ほほー、これが俗にいうストーリーボードかぁ
開いて見ると、GUIで操作できそう。　素晴らしく簡単だなぁ
<img width="1438" alt="スクリーンショット 2018-09-25 23.16.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/84532/28a03236-9bcb-2a6a-86ac-241abd98aeb5.png">


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

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

だけですね。

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

ここの`Tint`を`White`に変更
`Backgroud`を**一度既定にしてから**`White`に変更
<img width="420" alt="スクリーンショット 2018-09-25 23.09.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/84532/707cf7a8-620d-080c-bf72-3bed10744b3b.png">

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

画像を選択するとポップアップが出ますが、
コピーなり、移動なりを好きに選んでもらえばと思います。
<img width="533" alt="スクリーンショット 2018-09-25 23.21.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/84532/db3750a3-2ce5-b0d5-378b-6e88a804936b.png">

上下中央配置については画像を選択している状態で、
プロパティ上部の`Layout`をクリック！
以下の部分を各１回ずつクリックすれば上下左右中央に配置されます
<img width="407" alt="スクリーンショット 2018-09-25 23.25.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/84532/c705664e-9d3c-4ff7-ec78-9bd23c0f8ef9.png">


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



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

### 1) ロゴ画像は`Resources/drawable/配下`に配置しておく
拡張子は基本何でもよくて、のちに設定するxmlでは拡張子を指定しないので特に気にしなくて良い。

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

```xml
<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`を作成

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

```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"`に変更

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

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

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

これで完成！:star2:




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

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