（Delphiで）Android用のスプラッシュ画面を用意する

#はじめに
Androidアプリのスプラッシュ画面を作成するにあたって自分が躓いたポイント等の備忘録です。
Delphi 10.3 Community Editionで動作確認をしています。

##画像を用意しよう

[Android のアプリケーション オプション スプラッシュ]
(http://docwiki.embarcadero.com/RADStudio/Rio/ja/%EF%BC%BB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%BD%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3#.E3.82.B9.E3.83.97.E3.83.A9.E3.83.83.E3.82.B7.E3.83.A5.E7.94.BB.E5.83.8F)
エンバカデロのドキュメントにある様に、スプラッシュ画面用の画像としては、以下のサイズを用意すれば良いようです。

* 426x320px （小）	
* 470x320px （標準)
* 640x480px （大)
* 960x720px （特大)

複数の解像度に対応する際は、ベクタ画像を作っておくのが便利です。
今回は、[INKSCAPE](https://inkscape.org/ja/)を使った方法を紹介します。
まず予めドキュメントのプロパティにて、キャンバスサイズを640x480、背景色を白以外の色に設定しておきます。

でるお（仮）のデータをお借りして、以下のように絵を作成します（並べただけ）。
![capture_02152020_163654.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/d672a1b5-0439-120d-8d8d-5ec9e4415d3b.png)
※INKSCAPEは標準で背景色が透明のため、白色の四角形を でるお の後ろに配置しています。

そして、「PNG画像にエクスポート」機能にて、

* 領域：ページ
* 画像サイズ：幅640 高さ480
* ファイル名：（プロジェクトで使用するフォルダ）\splash640.png

として、エクスポートを実行します。
　

画像ファイルを確認したら、次は画像サイズを変更して、再度エクスポートします。

* 画像サイズ：幅960 高さ720
* ファイル名：（プロジェクトで使用するフォルダ）\splash960.png

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/eb292fd3-6bae-2826-0f1e-0915b0c7bc71.png)

後は同様に、サイズ・名称を470、426と変えながら出力していくのですが、縦横の比率が一致していない為、ぴったりとしたサイズになりません。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/c3d1f97b-d877-33f2-b7f5-4569bd62b8a9.png)
画像のような設定で出力し、後から画像加工ソフトでトリミングします（詳しい操作は割愛）。
![capture_02152020_164111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/5173e61b-e693-cd6c-99fd-98ea93c6c372.png)
（ペイントでもできます）

画像が用意できたら、一つの場所にまとめておきます。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/1e10b804-6a2e-9fb1-e2b7-add3029f797a.png)

DelphiのIDEにて、プロジェクト→オプション→アプリケーション→アイコンを選択し、ターゲットをAndroidに変え、スプラッシュ画像を設定していきます。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/30e4a6de-e336-dc51-0ace-f08ada42422d.png)


そして実機にてデバッグ実行します。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/2ebf6503-dac8-a696-046b-9898f1c2d190.png)

無事表示されました！が、上下の帯が気になりますね・・。


##黒い帯をなんとかしたい
１つ目の方法として、9-Patchファイルを使用する方法があります。
[Android での 9-patch 画像の使用](http://docwiki.embarcadero.com/RADStudio/Rio/ja/Android_%E3%81%A7%E3%81%AE_9-patch_%E7%94%BB%E5%83%8F%E3%81%AE%E4%BD%BF%E7%94%A8)

でもDraw9Patchで加工するの手間なんじゃ・・。もっと楽な方法は無いんか・・？
ということで、別の方法を紹介します。

先ほどデバッグ実行したことで、プロジェクトフォルダ内にAndroidフォルダができていると思います。
<code>Android/Debug/splash_image_def.xml</code>を、プロジェクトフォルダの直下にコピーします。
テキストエディタで開くと、次のようになっています。

```xml:splash_image_def.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item android:drawable="@android:color/black" />
<item>
<bitmap
android:src="@drawable/splash_image"
android:antialias="true"
android:dither="true"
android:filter="true"
android:gravity="center"
android:tileMode="disabled"/>
</item>
</layer-list>
```

<code>@android:color/black</code> を　<code>@android:color/white</code> に変えたらいけそうですね！変更して上書き保存します。
　
IDEに戻り、プロジェクト→配置を選択し、変更した<code>splash_image_def.xml</code>を追加します。
配置先を<code>res\drawble\\</code>に変更し、自動生成される方のチェックを外しておきます。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/4161e0c1-af08-bd76-4ef6-6fdc6a931358.png)

再度デバッグ実行すると・・うまくいきました！
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/9207f89f-b8a3-ca34-a445-adb701da6ec2.png)

###他の背景色のときはどうするか

<code> item android:drawable="@android:color/black" </code>部分を<code>shape</code>タグに置き換えます。

```xml:splash_image_def.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item>
  <shape android:shape="rectangle" >
    <solid android:color="#FFFFCCCC" />
  </shape>
</item>
<item>
<bitmap
android:src="@drawable/splash_image"
android:antialias="true"
android:dither="true"
android:filter="true"
android:gravity="center"
android:tileMode="disabled"/>
</item>
</layer-list>

```

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/6f7ebfb5-7e91-9431-b7b8-033911418879.png)
できました。
<code>splash_image_def.xml</code> を加工すれば色々できそうなことが見えてきます。が、これより先はAndroidに特化した話になってくるので・・（知識不足）。

以上です！

　　　　＼にじんどるで／
![bokeru.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/68c5ac41-9f0f-f057-2131-938447321fa3.png) 

あれっ・・。

##くっきりさせたい
各解像度の画像を用意した割に、低解像度用の画像が引き延ばし表示されている気がします・・。
何故でしょうか。

配置設定を見てみます。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/812db0a0-a20a-9e61-e011-8891723467fd.png)
アイコン類は<code>drawable-*dpi</code>なのに、スプラッシュは<code>drawable-small</code>などの配置先になっています。
これらは、画面の物理サイズに応じて選択されるようです。過去のAndroid側の仕様が画素の高密度化と合わなくなってきている感じでしょうか・・。
とりあえず、次のように設定を変えてみました。（splash426.png はそのままで、以降をmdpi、hdpi、xhdpiに変更。）
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/900d4a16-78c8-5681-4866-bf8228d98ce4.png)

そうすると、変わった・・？
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/45f2a7fa-a38c-8a7a-46a7-6bc2e9bd874f.png)
　　　　　　＼くっきり／
![kukkiri.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33684/0495ac62-3123-3924-7e75-255a1c3dec23.png) 

やった！　（おしまい）