Android のスプラッシュ画面のサイズ
同時に、Cordova (別名 Phonegap)、React-Native、およびその他すべての開発プラットフォーム用
Format : 9-Patch PNG (recommended)
Dimensions
- LDPI:
- Portrait: 200x320px
- Landscape: 320x200px
- MDPI:
- Portrait: 320x480px
- Landscape: 480x320px
- HDPI:
- Portrait: 480x800px
- Landscape: 800x480px
- XHDPI:
- Portrait: 720px1280px
- Landscape: 1280x720px
- XXHDPI
- Portrait: 960x1600px
- Landscape: 1600x960px
- XXXHDPI
- Portrait: 1280x1920px
- Landscape: 1920x1280px
注: XXXHDPI の準備は必要ありません。また、9 パッチ イメージの繰り返し領域のため、XXHDPI サイズも必要になる場合があります。一方、縦長のサイズのみを使用する場合、アプリのサイズはさらに小さくなる可能性があります。より多くの写真は、より多くのスペースが必要であることを意味します。
注意を払う
すべてのデバイスの正確なサイズはないと思います。私はXperia Z 5"を使用しています。クロスプラットフォームのWebViewアプリを開発する場合、多くのことを考慮する必要があります（画面にソフトキーのナビゲーションボタンがあるかどうかなど）。したがって、適切な解決策は1つだけだと思います。解決策は9 パッチのスプラッシュ スクリーンを準備します(以下のHow to design a new splash screen見出しを見つけてください)。
- 上記の画面サイズのスプラッシュ画面を9-patchとして作成します。ファイルに.9.pngサフィックスを付けて名前を付けます
- 以下の行を config.xml ファイルに追加します
- 必要に応じて、スプラッシュ スクリーン プラグインを追加します。
- プロジェクトを実行します。
それでおしまい！
Cordova 固有のコード
9 パッチのスプラッシュ画面用に config.xml に行を追加する
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
<splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
<splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
<splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
<splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/>
</platform>
-9-patch以外のスプラッシュ画面を使用する場合に config.xml に行を追加する
<platform name="android">
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
新しいスプラッシュ スクリーンを設計する方法
この方法を使用して適切なスプラッシュ スクリーンを作成する簡単な方法を説明します。1280dp x 720dp - xhdpi (特大) 画面を設計しているとします。例のために以下を書きました。
Photoshop の場合: [ファイル] -> [新しいダイアログ ウィンドウで新規作成] で画面を設定します
幅: 720 ピクセル 高さ: 1280 ピクセル
上記のサイズは、解像度が 320 ピクセル/インチであることを意味していると思います。ただし、ダイアログ ウィンドウで解像度の値を 320 に変更できるようにするためです。この場合、ピクセル/インチ = DPI
おめでとうございます... 720dp x 1280dp のスプラッシュ スクリーン テンプレートができました。
9 パッチのスプラッシュ スクリーンを生成する方法
スプラッシュ スクリーンをデザインした後、9 パッチのスプラッシュ スクリーンをデザインする場合は、各辺に 1 ピクセルのギャップを挿入する必要があります。このため、キャンバス サイズの幅と高さを +2 ピクセル大きくする必要があります (現在、画像サイズは 722 x 1282 です)。
以下の指示に従って、すべての側面に空白の 1 ピクセルのギャップを残しました。
Photoshop を使用してキャンバス サイズを変更する:
- Photoshop でスプラッシュ スクリーンの png ファイルを開きます
。以下: - イメージ メニューからキャンバス サイズを変更します (幅: 720 ピクセルから 722 ピクセル、高さ: 1280 ピクセルから 1282 ピクセル)。これで、スプラッシュ スクリーン イメージの両側に 1 ピクセルのギャップが表示されるはずです。
その後、C:\Program Files (x86)\Android\android-studio\sdk\tools\draw9patch.bat を使用して 9 パッチ ファイルを変換できます。そのためには、draw9patch アプリでスプラッシュ スクリーンを開きます。ロゴと拡張可能な領域を定義する必要があります。次のスプラッシュ画面の例の黒い線に注目してください。黒い線の太さはわずか 1 ピクセルです ;) 左側と上部の黒い線は、スプラッシュ スクリーンの必須表示領域を定義します。まさにあなたの設計通り。右と下の線は、追加および削除可能な領域 (自動的に繰り返される領域) を定義します。
draw9patch アプリケーションで画像の上端をズームします。マウスをクリックしてドラッグし、線を引きます。Shift キーを押しながらクリックしてマウスをドラッグすると、線が消去されます。
クロスプラットフォーム アプリ (Cordova/PhoneGap など) を開発する場合は、次のアドレスでほぼすべてのモバイル OS スプラッシュ画面サイズを見つけることができます。Windows Phone、WebOS、BlackBerry、Bada-WACおよびBadaスプラッシュ画面のサイズをクリックします。
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
また、IOS、Android などのアプリ アイコンのサイズが必要な場合は、こちらにアクセスしてください。
IOS
Format : PNG (recommended)
Dimensions
- Tablet (iPad)
- Non-Retina (1x)
- Portrait: 768x1024px
- Landscape: 1024x768px
- Retina (2x)
- Portrait: 1536x2048px
- Landscape: 2048x1536px
- Handheld (iPhone, iPod)
- Non-Retina (1x)
- Portrait: 320x480px
- Landscape: 480x320px
- Retina (2x)
- Portrait: 640x960px
- Landscape: 960x640px
- iPhone 5 Retina (2x)
- Portrait: 640x1136px
- Landscape: 1136x640px
- iPhone 6 (2x)
- Portrait: 750x1334px
- Landscape: 1334x750px
- iPhone 6 Plus (3x)
- Portrait: 1242x2208px
- Landscape: 2208x1242px