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

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

Hier ist ein 200% Zoom des gleichen Bildes:

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:

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

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!