毎回毎回サイズが分からなくなるのでまとめ。
今回はスプラッシュスクリーン画像のサイズについてです。
なお、アイコンのサイズについては、以前まとめましたので、よろしければこちらもご参照ください。
タイトルに Android と書いてありますが、iOS のサイズも載せてあります。
プラグインは、以前にも紹介した cordova-plugin-splashscreen を使います。
下記コマンドでインストールしてください。
cordova plugin add cordova-plugin-splashscreen
インストールが完了したら、スプラッシュスクリーン画像を用意します。
Androidは下記のサイズです。
- ldpi – 200 x 320
- mdpi – 360 x 640
- hdpi – 480 x 800
- xhdpi – 720 x 1280
- xxhdpi – 1080 x 1920
- xxxhdpi – 1440 x 2560
ちなみに、横幅 × 高さなのでご注意ください。
画像が用意出来たら、res/screen/android ディレクトリを作成し、そこに保存します。
で、config.xml に下記を記述してください。
なお、ファイル名は変更してもOKです。
<platform name="android">
<preference name="SplashMaintainAspectRatio" value="true" />
<splash density="hdpi" src="res/screen/android/android-hdpi.png" />
<splash density="ldpi" src="res/screen/android/android-ldpi.png" />
<splash density="mdpi" src="res/screen/android/android-mdpi.png" />
<splash density="xhdpi" src="res/screen/android/android-xhdpi.png" />
<splash density="xxhdpi" src="res/screen/android/android-xxhdpi.png" />
<splash density="xxxhdpi" src="res/screen/android/android-xxxhdpi.png" />
</platform>
ちなみに、2行目の SplashMaintainAspectRatio プロパティは、画面サイズに合わせて画像を引き延ばすか、もしくは縦横比はそのままで拡大/縮小するかを指定できます。
上記のように true を指定すると、縦横比そのままの拡大/縮小になります。
次に、iOSの設定です。
iOS は、config.xml に記載する設定にもファイルサイズも記載されているので、その通りのサイズでご用意ください。 画像は、res/screen/ios に保存します。
<platform name="ios">
<splash height="480" src="res/screen/ios/Default.png" width="320" />
<splash height="960" src="res/screen/ios/Default@2x.png" width="640" />
<splash height="1136" src="res/screen/ios/Default-568h@2x.png" width="640" />
<splash height="1334" src="res/screen/ios/Default-667h@2x.png" width="750" />
<splash height="2208" src="res/screen/ios/Default-736h@3x.png" width="1242" />
<splash height="1024" src="res/screen/ios/Default-Portrait.png" width="768" />
<splash height="2048" src="res/screen/ios/Default-Portrait@2x.png" width="1536" />
</platform>
あとは、アプリをビルド・実行すればOKです。
パスやファイル名などが間違っていなければ、問題なく表示されるはずです。
以上、Cordovaアプリにスプラッシュページを追加する方法と、その画像サイズでした。
