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
注: 9パッチイメージの繰り返し領域があるため、XXXHDPIの準備は必要なく、XXHDPIサイズも必要になる場合があります。一方、縦向きのサイズのみを使用した場合、アプリのサイズはさらに小さくなる可能性があります。より多くの写真はより多くのスペースが必要であることを意味します。
注意を払う
すべてのデバイスの正確なサイズはないと思います。私は、のXperia Z 5"を使用しています。あなたはクロスプラットフォーム-のWebViewアプリを開発する場合は、(など、画面にはソフトキーナビゲーションボタンを持っているかどうか)多くのことを考慮しなければならない。そのため、私は唯一の適切な解決策があると思います。解決策があるに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パッチ以外のスプラッシュ画面を使用するときに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(x-large)画面を設計していると仮定します。以下の例のために書きました。
Photoshopの場合:[ファイル]-> [新しいダイアログウィンドウで新規作成]で画面を設定します。
幅:720ピクセル高さ:1280ピクセル
上記のサイズは解像度が320ピクセル/インチであることを意味すると思います。ただし、ダイアログウィンドウで解像度の値を320に変更できるようにするためです。この場合、ピクセル/インチ= DPI
おめでとうございます... 720dp x 1280dpのスプラッシュ画面テンプレートがあります。
9パッチのスプラッシュ画面を生成する方法
スプラッシュスクリーンを設計した後、9パッチのスプラッシュスクリーンを設計する場合は、各辺に1ピクセルのギャップを挿入する必要があります。このため、キャンバスサイズの幅と高さを+2ピクセル増やす必要があります(現在の画像サイズは722 x 1282です)。
以下のように、すべての側に空白の1ピクセルのギャップを残しました。
フォトショップを使って、キャンバスサイズを変更する:
-オープン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