wake-up-neo.com

Android Begrüßungsbildschirmgröße für alle Geräte

Ich habe eine Vollbild-PNG, die ich bei Splash anzeigen möchte. Es gibt nur einen Fehler, und ich habe keine Ahnung, welche Größe in den einzelnen Zeichenordnern abgelegt werden soll (ldpi, mdpi, hdpi und xhdpi). Meine Anwendung soll auf allen Handys und Tablets gut und schön laufen. Welche Größen (in Pixeln) sollte ich erstellen, damit der Splash auf allen Bildschirmen schön angezeigt wird?

206
arielschon12

Haftungsausschluss

Diese Antwort stammt aus dem Jahr 2013 und ist stark veraltet. Ab Android 3.2 gibt es jetzt 6 Gruppen mit Bildschirmdichte. Diese Antwort wird aktualisiert, sobald ich in der Lage bin, aber ohne ETA. Siehe offizielle Dokumentation = für alle Dichten im Moment (obwohl Informationen zu bestimmten Pixelgrößen wie immer schwer zu finden sind).

Hier ist die TL/DR-Version

  • Erstellen Sie 4 Bilder, eines für jede Bildschirmdichte:

    • xlarge (xhdpi): 640 x 960
    • groß (hdpi): 480 x 800
    • mittel (mdpi): 320 x 480
    • klein (ldpi): 240 x 320
  • Lesen Sie Einführung in 9-Patch-Images in Android Developer Guide

  • Entwerfen Sie Bilder mit Bereichen, die sicher gedehnt werden können, ohne das Endergebnis zu beeinträchtigen

Mit diesem Befehl wählt Android die entsprechende Datei für die Bilddichte des Geräts aus und streckt das Bild dann gemäß dem 9-Patch-Standard.

ende von tl; dr. Voller Beitrag voraus

Ich beantworte den gestalterischen Aspekt der Frage. Ich bin kein Entwickler und kann daher keinen Code für die Implementierung vieler der bereitgestellten Lösungen bereitstellen. Leider ist es meine Absicht, Designern zu helfen, die genauso verloren sind wie ich, als ich an der Entwicklung meiner ersten Android App mitgearbeitet habe.

Passend für alle Größen

Mit Android können Unternehmen ihre Mobiltelefone und Tische in nahezu jeder Größe und mit nahezu jeder gewünschten Auflösung entwickeln. Aus diesem Grund gibt es keine "richtige Bildgröße" für einen Begrüßungsbildschirm, da es keine festen Bildschirmauflösungen gibt. Dies ist ein Problem für Personen, die einen Begrüßungsbildschirm implementieren möchten.

Möchten Ihre Benutzer wirklich einen Begrüßungsbildschirm sehen?

(Nebenbei bemerkt, Splash-Screens sind unter den Bedienern etwas entmutigt. Es wird argumentiert, dass der Benutzer bereits weiß, auf welche App er getippt hat, und dass das Branding Ihres Bildes mit einem Splash-Screen nicht erforderlich ist, da dies nur die Benutzererfahrung unterbricht Eine "Anzeige". Sie sollte jedoch in Anwendungen verwendet werden, die beim Initialisieren eine erhebliche Belastung erfordern (5s +), einschließlich Spielen und dergleichen, damit der Benutzer sich nicht wundert, ob die App abgestürzt ist oder nicht.

Bildschirmdichte; 4 Klassen

Angesichts der vielen unterschiedlichen Bildschirmauflösungen auf den Handys auf dem Markt hat Google daher einige Alternativen und raffinierte Lösungen implementiert, die Abhilfe schaffen können. Das Erste, was Sie wissen müssen, ist, dass Android trennt [~ # ~] alle [~ # ~] Bildschirme in 4 verschiedene Bildschirmdichten:

  1. Niedrige Dichte (ldpi ~ 120dpi)
  2. Mittlere Dichte (mdpi ~ 160dpi)
  3. Hohe Dichte (hdpi ~ 240 dpi)
  4. Extra hohe Dichte (xhdpi ~ 320dpi) (Diese dpi-Werte sind Näherungswerte, da benutzerdefinierte Geräte unterschiedliche dpi-Werte aufweisen)

Was Sie (wenn Sie ein Designer sind) wissen müssen, ist, dass Android) je nach Gerät aus 4 Bildern zur Anzeige auswählt. Sie müssen also im Grunde 4 verschiedene Bilder entwerfen ( Es können jedoch weitere Formate für verschiedene Formate wie Breitbild, Hoch-/Querformat usw. entwickelt werden.

Beachten Sie Folgendes: Wenn Sie nicht für jede in Android verwendete Auflösung einen Bildschirm entwerfen, wird das Bild auf die Bildschirmgröße gedehnt. Und es sei denn, Ihr Bild ist im Grunde genommen ein Farbverlauf oder eine Unschärfe, kommt es beim Strecken zu unerwünschten Verzerrungen. Sie haben also grundsätzlich zwei Möglichkeiten: Erstellen Sie ein Bild für jede Kombination aus Bildschirmgröße und -dichte oder erstellen Sie vier 9-Patch-Bilder.

Die schwierigste Lösung besteht darin, für jede einzelne Auflösung einen anderen Begrüßungsbildschirm zu entwerfen. Sie können beginnen, indem Sie die Auflösungen in der Tabelle am Ende von diese Seite befolgen (es gibt noch weitere. Beispiel: 960 x 720 ist dort nicht aufgeführt). Und vorausgesetzt, Sie haben einige kleine Details im Bild, wie z. B. kleinen Text, müssen Sie für jede Auflösung mehr als einen Bildschirm entwerfen. Ein 480x800-Bild, das auf einem mittleren Bildschirm angezeigt wird, sieht möglicherweise in Ordnung aus, aber auf einem kleineren Bildschirm (mit höherer Dichte/dpi) wird das Logo möglicherweise zu klein oder Text wird nicht mehr lesbar.

Bild mit 9 Feldern

Die andere Lösung ist ein 9-Patch-Image erstellen . Grundsätzlich handelt es sich um einen 1-Pixel-transparenten Rand um Ihr Bild. Indem Sie im oberen und linken Bereich dieses Randes schwarze Pixel zeichnen, können Sie festlegen, welche Bereiche Ihres Bildes gestreckt werden dürfen. Ich werde nicht näher auf die Funktionsweise von 9-Patch-Bildern eingehen, aber die Pixel, die an den Markierungen im oberen und linken Bereich ausgerichtet sind, werden wiederholt, um das Bild zu strecken.

Ein paar Grundregeln

  1. Sie können diese Bilder in Photoshop (oder einer beliebigen Bildbearbeitungssoftware, die präzise transparente PNGs erstellen kann) erstellen.
  2. Der 1-Pixel-Rand muss VOLL TRANSPARENT sein.
  3. Der transparente Rand von 1 Pixel muss um Ihr Bild herum und nicht nur oben und links sein.
  4. in diesem Bereich können nur schwarze (# 000000) Pixel gezeichnet werden.
  5. Der obere und der linke Rand (die die Bildstreckung definieren) können nur einen Punkt (1 x 1 x 1), zwei Punkte (beide 1 x 1 x 1) oder eine durchgehende Linie (Breite x 1 x oder 1 x Höhe) enthalten.
  6. Wenn Sie 2 Punkte verwenden, wird das Bild proportional vergrößert (so dass jeder Punkt abwechselnd vergrößert wird, bis die endgültige Breite/Höhe erreicht ist).
  7. Der 1px-Rand muss zusätzlich zu den beabsichtigten Abmessungen der Basisdatei angegeben werden. Ein 100x100 9-Patch-Image muss also tatsächlich 102x102 (100x100 + 1px oben, unten, links und rechts) haben.
  8. 9-Patch-Images müssen mit * .9.png enden

Sie können also 1 Punkt auf jeder Seite Ihres Logos (am oberen Rand) und 1 Punkt darüber und darunter (am linken Rand) platzieren. Diese markierten Zeilen und Spalten sind die einzigen Pixel, die gestreckt werden müssen.

Beispiel

Hier ist ein 9-Patch-Image mit einer Auflösung von 102 x 102 Pixel (endgültige Größe 100 x 100 für App-Zwecke):

9-patch image, 102x102px

Hier ist ein 200% Zoom des gleichen Bildes:

the same image, magnified 2x for clarity

Beachten Sie die 1px-Markierungen oben und links, die angeben, welche Zeilen/Spalten erweitert werden.

So würde dieses Bild in der App in 100x100 aussehen:

rendered into 100x100

Und so würde es aussehen, wenn es auf 460x140 erweitert würde:

rendered into 460x140

Eine letzte Sache zu beachten. Diese Bilder sehen auf Ihrem Monitorbildschirm und auf den meisten Mobiltelefonen gut aus, aber wenn das Gerät eine sehr hohe Bilddichte (dpi) aufweist, sieht das Bild zu klein aus. Wahrscheinlich noch lesbar, aber auf einem Tablet mit einer Auflösung von 1920 x 1200 würde das Bild als sehr kleines Quadrat in der Mitte erscheinen. Also, was ist die Lösung? Entwerfen Sie 4 verschiedene 9-Patch-Launcher-Images, jeweils für einen anderen Dichtesatz. Um sicherzustellen, dass keine Schrumpfung auftritt, sollten Sie für jede Dichtekategorie mit der niedrigsten gemeinsamen Auflösung entwerfen. Das Verkleinern ist hier unerwünscht, da 9-Patch nur das Strecken berücksichtigt, sodass bei einem Verkleinerungsprozess kleiner Text und andere Elemente die Lesbarkeit verlieren können.

Hier ist eine Liste der kleinsten und häufigsten Auflösungen für jede Dichtekategorie:

  • xlarge (xhdpi): 640 x 960
  • groß (hdpi): 480 x 800
  • mittel (mdpi): 320 x 480
  • klein (ldpi): 240 x 320

Entwerfen Sie also vier Begrüßungsbildschirme in den oben genannten Auflösungen, erweitern Sie die Bilder, setzen Sie einen transparenten Rahmen von 1 Pixel um die Leinwand und markieren Sie, welche Zeilen/Spalten dehnbar sein sollen. Denken Sie daran, dass diese Bilder für [~ # ~] jedes [~ # ~] Gerät in der Dichtekategorie verwendet werden, sodass Ihr ldpi-Bild (240 x 320) möglicherweise auf 1024 x 600 erweitert wird ein extra großes Tablett mit geringer Bilddichte (~ 120 dpi). Daher ist 9-Patch die beste Lösung für das Strecken, solange Sie kein Foto oder keine komplizierten Grafiken für einen Begrüßungsbildschirm benötigen (beachten Sie diese Einschränkungen, wenn Sie das Design erstellen).

Die einzige Möglichkeit, dass diese Dehnung nicht auftritt, besteht darin, einen Bildschirm für jede Auflösung zu entwerfen (oder einen für jede Auflösungsdichte-Kombination, wenn Sie verhindern möchten, dass Bilder auf Geräten mit hoher/niedriger Dichte zu klein/groß werden) oder zu erkennen Das Bild, das nicht gedehnt werden soll und eine Hintergrundfarbe haben soll, wird überall dort angezeigt, wo gedehnt werden soll (denken Sie auch daran, dass eine bestimmte Farbe, die von der Android) - Engine gerendert wird, wahrscheinlich anders aussieht als dieselbe bestimmte Farbe, die von Photoshop gerendert wird, weil von Farbprofilen).

Ich hoffe, das ergab keinen Sinn. Viel Glück!

390
Lucas Cerro

PORTRAITMODUS

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

Der LDPI beträgt 0,75 × MDPI = 240 × 360 Pixel

HDPI ist 1,5 x MDPI = 480 x 720 Pixel

XHDPI ist 2 x MDPI = 640 x 960 Pixel

XXHDPI ist 3 x MDPI = 960 x 1440 Pixel

XXXHDPI ist 4 x MDPI = 1280x1920px

LANDSCHAFTSMODUS

MDPI ist 480 x 320 dp = 480 x 320 px (1x)

Der LDPI beträgt 0,75 × MDPI = 360 × 240 Pixel

HDPI ist 1,5 x MDPI = 720x480px

XHDPI ist 2 x MDPI = 960 x 640 Pixel

XXHDPI ist 3 × MDPI = 1440 × 960 Pixel

XXXHDPI ist 4 x MDPI = 1920x1280px

BEARBEITEN:

Ich würde vorschlagen, Lottie für den Begrüßungsbildschirm zu verwenden, wenn Sie dies 2019 lesen

113
Ajmal Salim

PORTRÄT

LDPI: 200 x 320 Pixel

MDPI: 320 x 480 Pixel

HDPI: 480 x 800 Pixel

XHDPI: 720px1280px

LANDSCHAFT

LDPI: 320 x 200 Pixel

MDPI: 480 x 320 Pixel

HDPI: 800 x 480 Pixel

XHDPI: 1280 x 720 Pixel

28
JRE.exe

Ich habe die beste und einfachste Antwort gesucht, um ein 9-Patch-Image zu erstellen. Nun ist es die einfachste Aufgabe, das 9-Patch-Image zu erstellen.

Von https: //romannurik.github.io/AndroidAssetStudio/index.html Mit nur einem Klick können Sie ein 9-Patch-Image für alle Auflösungen erstellen - XHDPI, HDPI, MDPI, LDPI.

16
Owidat

Die Verwendung von PNG ist keine so gute Idee. Tatsächlich ist es in Bezug auf die Leistung kostspielig. Sie können zeichnende XML-Dateien verwenden, z. B. Facebook-Hintergrund .

Dies wird Ihnen helfen, Ihre Leistung zu verbessern und zu beschleunigen. Für das Logo werden .9-Patch-Images verwendet.

11
Nishant Shah
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
9
Zero

Vor einiger Zeit habe ich eine Excel-Datei mit unterstützten Dimensionen erstellt
Hoffe, dass dies für jemanden hilfreich sein wird

Um ehrlich zu sein, ich habe die Idee verloren, aber es bezieht sich auf eine andere Bildschirmfunktion als Größe (nicht nur Dichte)
https://developer.Android.com/guide/practices/screens_support.html
Bitte informieren Sie mich, wenn es Fehler gibt

Link1: dimensions.xlsx

Link2: dimensions.xlsx

3
V. Kalyuzhnyu

In meinem Fall habe ich eine Liste verwendet, die in style.xml gezeichnet werden kann. Wenn die Ebenenliste gezeichnet werden kann, benötigen Sie nur eine PNG für alle Bildschirmgrößen.

<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>

und flash_screen.xml im Zeichenordner.

<?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>

"background_noizi" ist ein PNG-Ordner. Ich hoffe es hilft

3
user3295573

** Wenn Sie nach Bildschirmdetails für alle wichtigen Geräte suchen **

gehe zu material.io

2