ldpi、mdpi、hdpi、xhdpiディスプレイのAndroidスプラッシュ画面サイズ?-例:ldpiの場合は1024X768ピクセル


103

私は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" />

3
これはあなたを助けます
Mohammed Azharuddin Shaikh '21

回答:


98

Androidには標準サイズが設定されていないため、さまざまな画面サイズがいくつもあります。そのため、ガイドとして、Googleが提供する最小画面サイズを使用できます。

Googleの統計によると、ldpiディスプレイの大部分は小さな画面であり、mdpi、hdpi、xhdpi、xxhdpiディスプレイの大部分は通常のサイズの画面です。

  • xlarge画面は少なくとも960dp x 720dp
  • 大画面は少なくとも640dp x 480dp
  • 通常の画面は少なくとも470dp x 320dp
  • 小さな画面は少なくとも426dp x 320dp

こちら入手できる Googleのダッシュボードで、デバイスの相対的なサイズに関する統計を表示できます

複数の画面の詳細については、こちらをご覧ください

9パッチ画像

最良の解決策は、9パッチ画像を作成して、画像の静的領域に影響を与えずに画像の境界線を画面のサイズに合わせて拡大できるようにすることです。

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch


xxhdpiも含めることができますか?(存在する場合)
アドニスK.カクリディス2013年

Googleはxxhdpiを〜480 DPIと定義しています。彼らは私が見ることができるものからこれのための最小画面サイズを提供していません。
Alex Wiese 2013年

8
なぜこれは非常に多くの賛成票を持っているのですか?xlarge != xhdpi、2つのまったく異なるものを測定しています。これらのdpサイズは、密度ではなくサイズバケットに対してリストされます。
Geobits 2013年

@geobitsは質問を見てください。彼は、スプラッシュスクリーンのサイズを、サポートする密度ごとにどのようにすべきかを尋ねています。Androidには標準のサイズが設定されていないため、さまざまなサイズが存在する可能性があるため、Googleが提供できる最も近い正解は最小画面サイズです。回答のリンクをたどれば、これについてもっと読むことができます。
Alex Wiese 2013年

2
あなたの言っていることがわかりますが、それはあなたの答えが言うことではありません。もしそうなら、私もコメントしなかったでしょう。彼はサイズリストを求めました、そしてあなたは単に説明なしで何か他のものに基づいたリストを与えるだけです。ドキュメントにリンクするかどうかに関係なく、編集する必要があります。
Geobits 2013年

134

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以下の見出しを見つけます)。

  1. 上記の画面サイズのスプラッシュ画面を9-patchとして作成します。.9.pngサフィックスを使用してファイルに名前を付けます
  2. 以下の行をconfig.xmlファイルに追加します
  3. 必要に応じて、スプラッシュスクリーンプラグインを追加します。
  4. プロジェクトを実行します。

それでおしまい!

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キーを押しながらクリックし、マウスをドラッグして線を消去します。

9パッチ設計のサンプル

(Cordova / PhoneGapのような)クロスプラットフォームアプリを開発する場合、ほとんどすべてのモバイルOSのスプラッシュ画面サイズで次のアドレスを見つけることができます。Windows PhoneWebOSBlackBerryBada-WACBadaスプラッシュ画面のサイズについては、ここをクリックしてください。

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

105

Androidモバイルデバイスの場合

LDPI- icon-36x36、splash-426x320(現在は正しい値)


MDPI-アイコン-48x48、スプラッシュ-470x320


HDPI-アイコン72x72、スプラッシュ-640x480


XHDPI-アイコン-96x96、スプラッシュ-960x720


XXHDPI-アイコン-144x144

すべてピクセル単位。

Androidタブレットデバイスの場合

LDPI:
    Portrait: 200x320px
    Landscape: 320x200px
MDPI:
    Portrait: 320x480px
    Landscape: 480x320px
HDPI:
    Portrait: 480x800px
    Landscape: 800x480px
XHDPI:
    Portrait: 720px1280px
    Landscape: 1280x720px

@Geobits:どちらもピクセル単位です。それは異なる解像度のためです。そこに混乱は見られません。おかしい!!
Nijil Nair 2013

1
あなたが与えるサイズは、これに従ってdp でldpi/mdpi/hdpi/xhdpi対応します。彼らはまた、もしあるピクセルサイズ、彼らは規模のものでなければなりません。私が見ないこれらのサイズのソースはありますか?small/normal/large/xlarge0.75/1/1.5/2
Geobits 2013年

@NijilNair:タブレットの画像の解像度が携帯電話よりも小さいのはなぜですか?それは逆ではありませんか?たとえば、 "携帯電話ldpi:426x320"に驚いた後、 "Tablet ldpi:320 x 200" ...はまったく論理的に見えません。回答ありがとうございます!
Phalanx、2014年

@Phalanx:このリンクを確認してください。developer.android.com/guide/practices/…
Nijil Nair、2014

1
LDPIアイコンが36x36でないことを確認してください。
Vladius 2014

32
  • LDPI:縦:200 X 320ピクセル。横:320 X 200ピクセル。
  • MDPI:ポートレート:320 X 480ピクセル。横:480 X 320ピクセル。
  • HDPI:縦:480 X 800ピクセル。横:800 X 480ピクセル。
  • XHDPI:ポートレート:720 X 1280px。横:1280 X 720ピクセル。
  • XXHDPI:ポートレート:960 X 1600ピクセル。横:1600 X 960ピクセル。
  • XXXHDPI:ポートレート:1280 X 1920px。横:1920 X 1280ピクセル。

2
私が読んだところはどこでもxhdpiはmdpiの2倍なので、xhdpiは640 x 960になるはずですが、720x1280と書きました。720x1280とはどのようなものですか?どの式を使用しましたか?
Rahul Sharma

10
  • Xlarge画面は少なくとも960dp x 720dp
  • リストアイテムの大画面は640dp x 480dp以上
  • リストアイテムの通常の画面は少なくとも470dp x 320dp
  • リストアイテムの小さい画面は少なくとも426dp x 320dp

これを使用して画像を作成し、特定のリソースフォルダーに配置します。



2

xlarge画面は少なくとも960dp x 720dpレイアウト-xlarge 10インチタブレット(720x1280 mdpi、800x1280 mdpiなど)

大画面は、Streak(480x800 mdpi)、7インチタブレット(600x1024 mdpi)など、少なくとも640dp x 480dpのトゥイナータブレットです。

通常の画面は、少なくとも470dp x 320dpのレイアウトの典型的な電話画面(480x800 hdpi)

小さな画面は少なくとも426dp x 320dpの電話画面(240x320 ldpi、320x480 mdpiなど)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.