1. ホーム
  2. アンドロイド

[解決済み】Androidのスプラッシュスクリーンの画像サイズをすべてのデバイスに適合させる。

2022-04-07 15:02:17

質問

スプラッシュで表示したい全画面PNGがあるのですが、どうすればいいですか?1つだけエラーがあります。 各drawableフォルダにどのようなサイズを入れるか( ldpi , mdpi , hdpi および xhdpi ). 私のアプリケーションは、すべての携帯電話やタブレットで美しく動作することが前提となっています。どのようなサイズ(ピクセル単位)で作成すれば、すべての画面でスプラッシュがきれいに表示されるでしょうか?

解決方法は?

免責事項

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

以下はtl/dr版です。

  • 画面密度ごとに4枚の画像を作成します。

    • xlarge (xhdpi): 640x960
    • ラージ (hdpi): 480x800
    • 中位 (mdpi): 320x480
    • 小 (ldpi): 240x320
  • 読む 9-パッチ画像紹介 Android Developer Guideに掲載されています。

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

これにより、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で使われているすべての解像度に対応した画面をデザインしないと、画面サイズに合わせて画像が伸びてしまうのです。また、画像が基本的にグラデーションやぼかしでない限り、引き伸ばしに伴って好ましくない歪みが発生します。つまり、画面サイズと密度の組み合わせごとに画像を作成するか、9パッチの画像を4つ作成するかの2択になります。

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

9パッチイメージ

もう一つの解決策は 9-patch画像を作成する . これは基本的に、画像の周囲に1ピクセルの透明な枠を作るもので、この枠の上部と左側に黒いピクセルを描くことで、画像のどの部分を伸縮させるかを定義することができます。9-patch 画像がどのように機能するかの詳細については説明しませんが、要するに、上部と左側の領域にあるマークと一致するピクセルが、画像を伸ばすために繰り返されるピクセルとなります。

いくつかの基本ルール

  1. フォトショップ(または透過PNGを正確に作成できる画像編集ソフト)で作成してください。
  2. 1ピクセルの境界線は完全な透明でなければなりません。
  3. 1ピクセルの透明なボーダーは、画像の上部と左側だけでなく、全周に渡っている必要があります。
  4. この領域には、黒(#000000)ピクセルしか描画できません。
  5. 上と左の境界線(画像の伸縮を定義する)は、1つのドット(1px×1px)、2つのドット(両方とも1px×1px)、1本の連続線(幅×1pxまたは1px×高さ)のみが可能です。
  6. 2つのドットを使用する場合、画像は比例して拡大します(つまり、最終的な幅/高さが達成されるまで、各ドットが交互に拡大します)。
  7. 1pxのボーダーは、意図した基本ファイルの寸法に加えて使用する必要があります。つまり、100x100 の 9-patch イメージは、実際には 102x102 (100x100 +上下左右の 1px) である必要があります。
  8. 9-パッチ画像の末尾は*.9.pngでなければなりません。

つまり、ロゴの左右(上枠)に1ドット、上下(左枠)に1ドットを配置すれば、このマークされた行と列だけがストレッチされるピクセルになるのです。

使用例

これは、102x102pxの9パッチ画像です(アプリの都合上、最終サイズは100x100)。

同じ画像を200%拡大したものがこちらです。

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

この画像をアプリ内で100x100にするとこんな感じです。

そして、460x140に拡大するとこんな感じです。

最後にもう一つ、考えておきたいことがあります。これらの画像は、あなたのモニター画面やほとんどの携帯電話では問題なく見えるかもしれませんが、デバイスの画像密度(dpi)が非常に高い場合、画像は小さすぎるように見えるでしょう。おそらくまだ読めますが、1920x1200の解像度を持つタブレットでは、画像は真ん中にとても小さな四角があるように見えるでしょう。では、どうすればいいのでしょうか?4種類の9パッチランチャー画像を、それぞれ異なる密度セット用にデザインします。縮小が起こらないようにするため、各密度のカテゴリーで最も一般的な解像度でデザインする必要があります。9-patchは伸縮性しか考慮しないので、縮小すると小さなテキストやその他の要素が読みにくくなる可能性があるため、縮小は好ましくありません。

各密度のカテゴリーで最も小さい、一般的な解像度のリストです。

  • xlarge (xhdpi): 640x960
  • ラージ (hdpi): 480x800
  • 中位 (mdpi): 320x480
  • 小 (ldpi): 240x320

そこで、上記の解像度で4つのスプラッシュ画面をデザインし、画像を展開して、キャンバスの周りに1pxの透明なボーダーを置き、どの行/列を伸縮可能にするかマークします。これらの画像は、以下の用途に使用されることを念頭に置いてください。 ANY そのため、ldpi の画像 (240 x 320) は、画像密度が小さい (~120 dpi) 特大タブレットでは 1024 x 600 に引き伸ばされるかもしれません。ですから、スプラッシュスクリーンに写真や複雑なグラフィックを使用しない限り、9-patchはストレッチのための最適なソリューションです(デザインを作成する際には、これらの制限を念頭に置いてください)。

繰り返しになりますが、この伸縮が起こらないようにする唯一の方法は、解像度ごとに1画面をデザインするか(高密度/低密度のデバイスで画像が小さく/大きくなりすぎるのを避けたい場合は、解像度と密度の組み合わせごとに1画面)、画像が伸びないように指示して、伸びが発生する場所に背景色を表示することです(カラープロファイルのため、Androidエンジンがレンダリングする特定の色とフォトショップでレンダリングする同じ特定の色は、おそらく異なって見えることも覚えておいてください)。

少しでも意味があれば幸いです。がんばってください。