【Cordova】Android・iOSのスプラッシュ画像のサイズと指定方法

村上 著者:村上

【Cordova】Android・iOSのスプラッシュ画像のサイズと指定方法

毎回毎回サイズが分からなくなるのでまとめ。
今回はスプラッシュスクリーン画像のサイズについてです。

なお、アイコンのサイズについては、以前まとめましたので、よろしければこちらもご参照ください。

【Cordova】アプリのアイコンの設定方法とAndroidのアイコンサイズまとめ

タイトルに 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アプリにスプラッシュページを追加する方法と、その画像サイズでした。

  • この記事いいね! (0)

著者について

村上

村上 administrator