cordovaでスプラッシュ画面を表示（android）

起動時に意味不明なスプラッシュ画面を表示するサンプル

※一瞬なのでわかりにくいが起動時に１〜２秒指定した画像を表示する

画像を準備する

適当な画像を作成するか用意する

画像サイズ

• 426☓320

drawable-ldpi

• 470☓320

drawable-mdpi

• 640☓480

drawable-hdpi

• 960☓720

drawable-xhdpi

まあこんな感じ、最初はわかりにくいので一番大きいもので試したほうが良いと思います。

androidのsdkツールでdraw9patchを起動し「Draw 9-patch」に変換する

「Draw 9-patch」？

なんか
[Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips ｜ Developers.IO
によるとスケールする画像らしい、まあ詳しくは知らないけどまあ大丈夫でしょう

プラグインを取り込む

コマンド

$ cordova plugin add org.apache.cordova.splashscreen

config.xmlを編集

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.sample1" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Sampleapp1</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="splashscreen" value="splash" />
    <preference name="SplashScreenDelay" value="10000" />
</widget>

※直下にあるconfig.xmlを編集する。platform配下のものは上記のものを取り込むので編集する必要はない。

設定

    <preference name="splashscreen" value="splash" />
    <preference name="SplashScreenDelay" value="10000" />

※splashscreenは画像の名前
※SplashScreenDelayは時間（ミリ秒）

ファイル設定

変換した「Draw 9-patch」のファイルを設定する

あとビルドすればでるはず

所感

スプラッシュ画面を出すアプリはよく見ていたけど、実際に出す方法がちょっとわからなかったのでやってみました。最初になんか裏で処理を実行できることがある場合は便利な感じがします。

参考

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)