2016.9.18
2017.5.26

スプラッシュ画面のサイズと設定例

AndroidとiOSで使用するスプラッシュ画面のサイズと設定例についてです。

設定例はCordovaの公式サイトを参考に足りないサイズがあったので、いくつか設定を追加したものになります。

目次

  • プラグイン(cordova-plugin-splashscreen)のインストール
  • スプラッシュ画面の設定例(config.xml)
  • スプラッシュ画面の非表示

プラグイン(cordova-plugin-splashscreen)のインストール

詳しくは以下のサイトを参照。

cordova-plugin-splashscreen - Apache Cordova

スプラッシュ画面の設定例(config.xml)

Androidのスプラッシュ画面のサイズですが、いまいち正解が分かりませんでした。

記事は沢山見つかるのですが掲載されているサイズはバラバラで、どうやら、Androidは端末の大きさやディスプレイの解像度に決まりがないため、ある一定のサイズ(ldpi,mdpi,hdpi,xhpiなど)毎に用意した画像を伸縮させて表示するようです。

そして、画像全体が伸縮するとイメージが崩れるので、「9-patch」という伸縮する箇所を指定した画像を用意するのが正しいやり方のようです。

「9-patch」については以下の記事が参考になるかと思います。

[Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips | Developers.IO

ただ、上記の対応はちょっと面倒な気も。

アスペクト比固定で多少は拡大や縮小をしてもいいのであれば、以下のconfig.xmlように設定で対応した方がいいと思います。

なお、コメントで記載している画像サイズについては、ionicフレームワークのデフォルトで用意されていた画像サイズになります。


<!-- Android -->
<platform name="android">
    <!-- スプラッシュ画面の起動時間(Androidのみ設定、Androidは設定しておかないと画面の切替でタイムラグが発生する。iOSで設定すると早めに準備が整ってスプラッシュ画面を明示的に非表示にしようとしても消えてくれない) -->
    <preference name="SplashScreenDelay" value="10000" />
    <!-- スプラッシュ画面のアスペクト比(trueに設定すると固定、falseにするとイメージが崩れる) -->
    <preference name="SplashMaintainAspectRatio" value="true" />
    <!-- スプラッシュ画面を初回のみ表示するかどうか(trueに設定するとアプリ終了後に再起動してもスプラッシュ画面が表示されない) -->
    <preference name="SplashShowOnlyFirstTime" value="false" />
    
    <!-- you can use any density that exists in the Android project -->
    <!--  横長:320 x 200 -->
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <!--  横長:480 x 320 -->
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <!--  横長:800 x 480 -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <!--  横長:1280 x 720 -->
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
    <!--  横長:1600 x 960 -->
    <splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi"/>
    <!--  横長:1920 x 1280 -->
    <splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-xxxhdpi"/>

    <!--  縦長:200 x 320 -->
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <!--  縦長:320 x 480 -->
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <!--  縦長:480 x 800 -->
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <!--  縦長:720 x 1280 -->
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
    <!--  縦長:960 x 1600 -->
    <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi"/>
    <!--  縦長:1280 x 1920 -->
    <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxxhdpi"/>
</platform>
    
<!-- iOS -->
<platform name="ios">
    <!-- スプラッシュ画面表示中のスピナーの表示有無(お好みで) -->
    <preference name="ShowSplashScreenSpinner" value="false" />
    <!-- スプラッシュ画面を非表示にする際のアニメーションの有無 -->
    <preference name="FadeSplashScreen" value="true"/>
    <!-- スプラッシュ画面を非表示にする際のアニメーションの時間 -->
    <preference name="FadeSplashScreenDuration" value="500"/>

    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>

以下のやりとり(英語ですが)が、参考になるような、ならないような。

android splash screen sizes for ldpi,mdpi, hdpi, xhdpi displays ? - eg : 1024X768 pixels for ldpi - Stack Overflow

スプラッシュ画面の非表示

スプラッシュ画面を明示的に非表示にする場合、以下のコードを埋め込みます。


navigator.splashscreen.hide();

Cordova】関連記事