私はphonegapを使ってAndroidアプリケーションのためのスプラッシュスクリーン(ロード中にスクリーンに合うイメージ)をデザインしなければなりません。私はldpi、mdpi、hdpi、xhdpiのような4種類のスクリーンに合う4つのサイズの画像をデザインしなければなりません。私はそのサイズでデザインすることができますので、誰もが私にこれらのスクリーンのためにピクセルで正確なサイズを言うことができますか?
答えの例:
ldpi - 1024X768 px
mdpi - 111 X 156 px
We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.
<gap:splash src="splash/Android/ldpi.png" gap:platform="Android" gap:density="ldpi" />
<gap:splash src="splash/Android/mdpi.png" gap:platform="Android" gap:density="mdpi" />
<gap:splash src="splash/Android/hdpi.png" gap:platform="Android" gap:density="hdpi" />
<gap:splash src="splash/Android/xhdpi.png" gap:platform="Android" gap:density="xhdpi" />
あなたがグーグルによって提供されるガイドとしてあなたが最小スクリーンサイズを使うことができるように設定された標準サイズを持っていないアンドロイドによるいくつかの異なるスクリーンサイズがあるかもしれません。
グーグルの統計によると、大部分のldpiディスプレイは小さいスクリーンであり、大部分のmdpi、hdpi、xhdpiおよびxxhdpiディスプレイは標準サイズのスクリーンです。
グーグルのダッシュボードで端末の相対的なサイズに関する統計を見ることができます ここで利用可能 。
複数の画面に関するより多くの情報が見つかります ここ 。
最善の解決策は、画像の静的領域に影響を与えずに画面のサイズに合わせて画像の境界が広がるように9パッチの画像を作成することです。
http://developer.Android.com/guide/topics/graphics/2d-graphics.html#nine-patch
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の準備は不要です。一方、縦向きのサイズのみが使用されている場合、アプリのサイズはもっと小さくなる可能性があります。より多くの写真はより多くのスペースが必要であることを意味します。
すべてのデバイスに正確なサイズはないと思います。私はXperia Z 5 "を使用します。クロスプラットフォーム - ウェブビューアプリケーションを開発する場合、あなたは多くのことを考慮する必要があります(スクリーンにソフトキーナビゲーションボタンがあるかどうかなど)。 9パッチスプラッシュスクリーンを準備する (以下のHow to design a new splash screen
見出しを見つけてください)。
それでおしまい!
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>
non - 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パッチのスプラッシュスクリーンを設計する場合は、各辺に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 pxです。;)左側と上部の黒い線はスプラッシュスクリーンの表示領域を定義します。あなたの設計どおり。右と下の線は、追加と削除が可能な領域(自動的に繰り返される領域)を定義します。
ちょうどそれをしてください:draw9patchアプリケーションであなたのイメージの上の端をズームしてください。マウスをクリックしてドラッグして線を引きます。そしてShift +クリックを押しながらマウスをドラッグして行を消します。
クロスプラットフォームアプリ(Cordova/PhoneGapなど)を開発している場合は、ほとんどすべてのmabile OSのスプラッシュスクリーンサイズで次のアドレスを見つけることができます。 Windows Phone 、 WebOS 、 BlackBerry 、 Bada-WAC および Bada スプラッシュをクリックする画面サイズ.
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
あなたがIOS、Androidなどのアプリのアイコンサイズを必要とするなら、あなたはあなたができる こちらをご覧ください 。
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
Androidモバイルデバイス用
LDPI-icon-36 x 36、splash-426 x 320(現在は正しい値)
MDPI-アイコン-48 x 48、スプラッシュ-470 x 320
HDPI-アイコン72×72、スプラッシュ - 640×480
XHDPI-アイコン - 96×96、スプラッシュ - 960×720
XXHDPI-アイコン - 144×144
すべてピクセル単位です。
Androidタブレット端末用
LDPI:
Portrait: 200x320px
Landscape: 320x200px
MDPI:
Portrait: 320x480px
Landscape: 480x320px
HDPI:
Portrait: 480x800px
Landscape: 800x480px
XHDPI:
Portrait: 720px1280px
Landscape: 1280x720px
これを使用して画像を作成し、それらを特定のリソースフォルダーに入れます。
ただこのウェブサイトを使用してください: http://ticons.fokkezb.nl :)
それはあなたにとってそれが容易になり、そして正しいサイズを直接生成します
xlargeスクリーンは少なくとも960dp x 720dpのレイアウト - xlarge 10インチタブレット(720x1280mdpi、800x1280mdpiなど)です。
大画面は、Streak(480 x 800 mdpi)、7 "タブレット(600 x 1024 mdpi)のように少なくとも640dp x 480dpのトゥイナータブレットです。
通常の画面は少なくとも470dp x 320dpのレイアウトの典型的な携帯電話の画面です(480x800 hdpi)
小さい画面は少なくとも426dp x 320dpの典型的な電話スクリーン(240 x 320 ldpi、320 x 480 mdpiなど)です。