224

スプラッシュに表示したいフルスクリーンのPNGがあります。ldpiエラーは 1 つだけで、すべての描画可能フォルダー ( 、mdpi、hdpi、および)に入れるサイズがわかりませんxhdpi。私のアプリケーションは、すべての携帯電話とタブレットで適切かつ美しく動作するはずです。スプラッシュがすべての画面で適切に表示されるようにするには、どのサイズ (ピクセル単位) を作成する必要がありますか?

4

11 に答える 11

406

免責事項

この回答は2013年のもので、かなり古くなっています。Android 3.2 の時点で、画面密度には 6 つのグループがあります。この回答は、できるだけ早く更新されますが、ETA はありません。現時点でのすべての密度については、公式ドキュメントを参照してください(ただし、特定のピクセル サイズに関する情報は常に見つけにくいものです)。

これがtl / drバージョンです

  • 画面密度ごとに 1 つずつ、合計 4 つの画像を作成します。

    • 特大 (xhdpi): 640x960
    • 大 (hdpi): 480x800
    • 中 (mdpi): 320x480
    • 小 (ldpi): 240x320

  • Android デベロッパー ガイドの 9 パッチ イメージの紹介を読む

  • 最終結果を損なうことなく、安全に引き延ばすことができる領域を持つ画像を設計する

これにより、Android はデバイスの画像密度に適したファイルを選択し、9 パッチ標準に従って画像を引き伸ばします。

tl;drの終わり。完全な投稿を先に

質問のデザイン関連の側面に関して回答しています。私は開発者ではないので、提供されているソリューションの多くを実装するためのコードを提供することはできません。残念ながら、私の意図は、最初の Android アプリの開発を手伝ったときと同じように迷っているデザイナーを助けることです。

すべてのサイズに対応

Android を使用すると、企業は、ほぼすべての解像度で、ほぼすべてのサイズの携帯電話とテーブルを開発できます。そのため、固定された画面解像度がないため、スプラッシュ スクリーンに「適切な画像サイズ」というものはありません。これは、スプラッシュ スクリーンを実装したい人にとっては問題となります。

ユーザーは本当にスプラッシュ スクリーンを見たいと思っていますか?

(ちなみに、ユーザビリティ担当者の間では、スプラッシュ スクリーンはやや推奨されていません。ユーザーは自分がタップしたアプリを既に知っていると主張されており、スプラッシュ スクリーンで画像をブランディングする必要はありません。ただし、ゲームなどを含む、初期化時にかなりの負荷を必要とするアプリケーション (5 秒以上) で使用する必要があります。これにより、ユーザーはアプリがクラッシュしたかどうか疑問に思って立ち往生することがなくなります)。

画面密度; 4クラス

そのため、市場に出回っている携帯電話には非常に多くの異なる画面解像度があるため、Google はいくつかの代替案と役立つ解決策を実装しました。最初に知っておくべきことは、Android はすべての画面を 4 つの異なる画面密度に分割することです。

  1. 低密度 (ldpi ~ 120dpi)
  2. 中密度 (mdpi ~ 160dpi)
  3. 高密度 (hdpi ~ 240dpi)
  4. 超高密度 (xhdpi ~ 320dpi) (特注デバイスの dpi 値はさまざまであるため、これらの dpi 値は概算値です)

このことから (デザイナーの場合) 知っておく必要があるのは、Android は基本的に、デバイスに応じて 4 つの画像から表示するものを選択するということです。したがって、基本的には 4 つの異なる画像をデザインする必要があります (ただし、ワイドスクリーン、ポートレート/ランドスケープ モードなど、さまざまなフォーマット用にさらに多くの画像を開発できます)。

Android で使用される解像度ごとに画面を設計しない限り、画像は画面サイズに合わせて伸縮します。また、画像が基本的にグラデーションまたはぼかしである場合を除き、ストレッチによって望ましくない歪みが発生します。したがって、基本的に 2 つのオプションがあります。画面サイズと密度の組み合わせごとに画像を作成するか、4 つの 9 パッチ画像を作成します。

最も難しい解決策は、解像度ごとに異なるスプラッシュ スクリーンを設計することです。このページの最後にある表の解像度に従うことから始めることができます(他にもあります。例: 960 x 720 はそこにリストされていません)。また、画像に小さなテキストなどの小さなディテールがあると仮定すると、解像度ごとに複数の画面を設計する必要があります。たとえば、中程度の画面に表示される 480x800 の画像は問題ないように見えますが、小さい画面 (密度/dpi が高い) では、ロゴが小さすぎたり、一部のテキストが判読不能になったりする可能性があります。

9パッチ画像

もう 1 つの解決策は、9 パッチ イメージを作成することです。これは基本的に、画像を囲む 1 ピクセルの透明な境界線であり、この境界線の上部と左側の領域に黒いピクセルを描画することで、画像のどの部分を伸ばすことができるかを定義できます。9 パッチ画像がどのように機能するかについては詳しく説明しませんが、要するに、上部と左側の領域のマーキングに一致するピクセルは、画像を引き伸ばすために繰り返されるピクセルです。

いくつかの基本ルール

  1. これらの画像はフォトショップ (または透明な png を正確に作成できる任意の画像編集ソフトウェア) で作成できます。
  2. 1 ピクセルの境界線は完全に透明である必要があります。
  3. 1 ピクセルの透明な境界線は、画像の上下だけでなく、画像全体を囲む必要があります。
  4. この領域には黒 (#000000) ピクセルのみを描画できます。
  5. 上と左の境界 (画像の拡大を定義する) には、1 つのドット (1px x 1px)、2 つのドット (両方とも 1px x 1px)、または 1 つの連続した線 (幅 x 1px または 1px x 高さ) のみを含めることができます。
  6. 2 つのドットを使用することを選択した場合、画像は比例して拡大されます (最終的な幅/高さが達成されるまで、各ドットが順番に拡大されます)。
  7. 1px の境界線は、意図したベース ファイルのサイズに追加する必要があります。したがって、100x100 の 9 パッチ画像には、実際には 102x102 (100x100 + 上下左右に 1 ピクセル) が必要です。
  8. 9 パッチ画像は *.9.png で終わる必要があります

したがって、ロゴの両側 (上の境界線) に 1 つのドットを配置し、その上下 (左の境界線) に 1 つのドットを配置すると、これらのマークされた行と列のみが引き伸ばされるピクセルになります。

例

102x102px (アプリ用の最終サイズは 100x100) の 9 パッチ画像は次のとおりです。

9パッチ画像、102x102px

以下は、同じ画像を 200% ズームしたものです。

わかりやすくするために 2 倍に拡大した同じ画像

上部と左側の 1px マークが、どの行/列が展開されるかを示していることに注意してください。

この画像は、アプリ内で 100x100 でどのように表示されるかを次に示します。

100x100 にレンダリング

460x140 に拡張すると、次のようになります。

460x140 にレンダリング

最後に考慮すべきことが 1 つあります。これらの画像は、モニター画面やほとんどの携帯電話ではきれいに見えるかもしれませんが、デバイスの画像密度 (dpi) が非常に高い場合、画像が小さすぎます。おそらくまだ判読可能ですが、解像度が 1920x1200 のタブレットでは、画像が中央に非常に小さな正方形として表示されます。それで、解決策は何ですか？それぞれ異なる密度セット用に、4 つの異なる 9 パッチ ランチャー イメージを設計します。縮小が発生しないようにするには、密度カテゴリごとに最も低い解像度で設計する必要があります。9-patch は伸縮のみを考慮するため、縮小は望ましくありません。縮小プロセスでは、小さなテキストやその他の要素が読みにくくなる可能性があります。

各密度カテゴリの最小で最も一般的な解像度のリストを次に示します。

  • 特大 (xhdpi): 640x960
  • 大 (hdpi): 480x800
  • 中 (mdpi): 320x480
  • 小 (ldpi): 240x320

したがって、上記の解像度で 4 つのスプラッシュ スクリーンを設計し、画像を拡大して、キャンバスの周囲に 1 ピクセルの透明な境界線を配置し、どの行/列が伸縮可能になるかをマークします。これらの画像は密度カテゴリのすべてのデバイスに使用されるため、 ldpi画像 (240 x 320) は、画像密度が小さい (~120 dpi) 特大タブレットでは 1024x600 に引き伸ばされる可能性があることに注意してください。そのため、スプラッシュ スクリーンに写真や複雑なグラフィックを使用しない限り、ストレッチには 9 パッチが最適なソリューションです (デザインを作成するときは、これらの制限に注意してください)。

繰り返しになりますが、この引き延ばしを防ぐ唯一の方法は、解像度ごとに 1 つの画面を設計することです (または、高密度/低密度のデバイスで画像が小さく/大きくなりすぎないようにしたい場合は、解像度と密度の組み合わせごとに 1 つの画面を設計するか)、または次のように伝えます。画像は引き伸ばされず、引き伸ばされる場所には必ず背景色が表示されます (また、Android エンジンによってレンダリングされる特定の色は、カラー プロファイルのために、Photoshop によってレンダリングされる同じ特定の色とはおそらく異なって見えることにも注意してください)。

これが意味を成したことを願っています。幸運を！

于 2013-04-01T13:27:39.093 に答える
125

ポートレートモード

MDPI は 320x480 dp = 320x480px (1x)

LDPI は 0.75 x MDPI = 240x360px です

HDPI は 1.5 x MDPI = 480x720px です。

XHDPI は 2 x MDPI = 640x960px です

XXHDPI は 3 x MDPI = 960x1440px です。

XXXHDPI は 4 x MDPI = 1280x1920px です。

横長モード

MDPI は 480x320 dp = 480x320px (1x)

LDPI は 0.75 x MDPI = 360x240px です

HDPI は 1.5 x MDPI = 720x480px です

XHDPI は 2 x MDPI = 960x640px です

XXHDPI は 3 x MDPI = 1440x960px です

XXXHDPI は 4 x MDPI = 1920x1280px です。

編集：

2019 年以降にこれを読んでいる場合は、スプラッシュ スクリーンにLottieを使用することをお勧めします。

于 2016-01-11T16:18:50.263 に答える
17

9パッチ画像を作成するための最良かつ最も簡単な答えを検索しました。9 パッチ イメージを作成するのが最も簡単な作業です。

https://romannurik.github.io/AndroidAssetStudio/index.htmlから、すべての解像度 (XHDPI、HDPI、MDPI、LDPI) の 9 パッチ イメージをワンクリックで作成できます。

于 2014-01-20T10:34:14.517 に答える
12

PNG を使用するのはあまり良い考えではありません。実際、パフォーマンスに関する限り、コストがかかります。Facebook の backgroundなど、描画可能な XML ファイルを使用できます。

これは、パフォーマンスをスムーズにして高速化するのに役立ち、ロゴには .9 パッチ イメージを使用します。

于 2013-12-05T06:56:56.253 に答える
10 
Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi
于 2015-09-03T15:59:07.540 に答える
6

私の場合、style.xml で list drawable を使用しました。レイヤー リスト ドローアブルを使用すると、すべての画面サイズに対して 1 つの png だけが必要になります。

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

drawable フォルダー内の flash_screen.xml 。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

「background_noizi」は、drawable フォルダー内の png ファイルです。これが役立つことを願っています。

于 2015-10-27T10:51:54.380 に答える