Ich habe ein Vollbild-PNG, das ich beim Splash anzeigen möchte. Nur ein Fehler da, und ich habe keine Ahnung , welche Größe in jedem ziehbar Ordner abzulegen ( ldpi
, mdpi
, hdpi
und xhdpi
). Meine Anwendung soll auf allen Handys und Tablets gut und schön laufen. Welche Größen (in Pixel) sollte ich erstellen, damit der Splash auf allen Bildschirmen gut angezeigt wird?
214
Antworten:
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 dazu in der Lage bin, jedoch ohne ETA. Informationen zu allen Dichten finden Sie derzeit in der offiziellen Dokumentation (Informationen zu bestimmten Pixelgrößen sind jedoch wie immer schwer zu finden).
Hier ist die tl / dr-Version
Erstellen Sie 4 Bilder, eines für jede Bildschirmdichte:
Lesen Sie die Einführung zu 9-Patch-Bildern im Android Developer Guide
Damit wählt Android die entsprechende Datei für die Bilddichte des Geräts aus und streckt das Bild gemäß dem 9-Patch-Standard.
Ende von tl; dr. Voller Beitrag voraus
Ich antworte in Bezug auf den designbezogenen Aspekt der Frage. Ich bin kein Entwickler, daher kann ich keinen Code für die Implementierung vieler der bereitgestellten Lösungen bereitstellen. Leider möchte ich Designern helfen, die genauso verloren sind wie ich, als ich bei der Entwicklung meiner ersten Android-App mitgeholfen 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, Begrüßungsbildschirme werden von den Usability-Leuten etwas entmutigt. Es wird argumentiert, dass der Benutzer bereits weiß, auf welche App er getippt hat, und dass das Branding Ihres Bildes mit einem Begrüßungsbildschirm nicht erforderlich ist, da dies nur die Benutzererfahrung unterbricht eine "Anzeige". Sie sollte jedoch in Anwendungen verwendet werden, die beim Initialisieren (5s +) ein beträchtliches Laden erfordern, einschließlich Spielen und dergleichen, damit der Benutzer sich nicht fragt, ob die App abgestürzt ist oder nicht.
Bildschirmdichte; 4 Klassen
Angesichts der vielen verschiedenen Bildschirmauflösungen auf den Handys auf dem Markt hat Google einige Alternativen und raffinierte Lösungen implementiert, die helfen können. Das erste, was Sie wissen müssen, ist, dass Android ALLE Bildschirme in 4 verschiedene Bildschirmdichten unterteilt:
Was Sie (wenn Sie Designer sind) wissen müssen, ist, dass Android je nach Gerät grundsätzlich aus 4 Bildern zur Anzeige auswählt. Sie müssen also grundsätzlich 4 verschiedene Bilder entwerfen (obwohl mehr für verschiedene Formate wie Breitbild, Hoch- / Querformat usw. entwickelt werden können).
Beachten Sie Folgendes: Wenn Sie nicht für jede einzelne Auflösung, die in Android verwendet wird, einen Bildschirm entwerfen, wird Ihr Bild an die Bildschirmgröße angepasst. Und wenn Ihr Bild im Grunde kein Farbverlauf oder eine Unschärfe ist, 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 den Auflösungen in der Tabelle am Ende dieser Seite folgen (es gibt weitere. Beispiel: 960 x 720 ist dort nicht aufgeführt). Angenommen, das Bild enthält einige kleine Details, z. B. kleinen Text, müssen Sie für jede Auflösung mehr als einen Bildschirm entwerfen. Beispielsweise kann ein 480 x 800-Bild, das auf einem mittleren Bildschirm angezeigt wird, in Ordnung aussehen, aber auf einem kleineren Bildschirm (mit höherer Dichte / dpi) wird das Logo möglicherweise zu klein oder Text wird möglicherweise nicht mehr lesbar.
9-Patch-Bild
Die andere Lösung besteht darin , ein 9-Patch-Image zu erstellen . Es handelt sich im Grunde genommen um einen 1-Pixel-transparenten Rand um Ihr Bild. Durch Zeichnen schwarzer Pixel im oberen und linken Bereich dieses Rahmens können Sie festlegen, welche Teile Ihres Bildes gedehnt werden dürfen. Ich werde nicht näher auf die Funktionsweise von 9-Patch-Bildern eingehen, aber kurz gesagt, die Pixel, die an den Markierungen im oberen und linken Bereich ausgerichtet sind, sind die Pixel, die wiederholt werden, um das Bild zu dehnen.
Ein paar Grundregeln
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 gedehnt werden müssen.
Beispiel
Hier ist ein 9-Patch-Bild mit 102 x 102 Pixel (100 x 100 Endgröße 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 100x100 in der App aussehen:
Und hier ist, was es möchte, wenn es auf 460x140 erweitert wird:
Eine letzte Sache zu beachten. Diese Bilder sehen auf Ihrem Bildschirm und auf den meisten Mobiltelefonen möglicherweise gut aus. Wenn das Gerät jedoch 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 erscheint das Bild als sehr kleines Quadrat in der Mitte. Was ist die Lösung? Entwerfen Sie 4 verschiedene 9-Patch-Launcher-Bilder für jeweils unterschiedliche Dichte. Um sicherzustellen, dass kein Schrumpfen auftritt, sollten Sie für jede Dichtekategorie die niedrigste gemeinsame Auflösung verwenden. Das Verkleinern ist hier unerwünscht, da 9-Patch nur das Dehnen 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:
Entwerfen Sie also vier Begrüßungsbildschirme in den obigen Auflösungen, erweitern Sie die Bilder, legen Sie einen transparenten Rand von 1 Pixel um die Leinwand und markieren Sie, welche Zeilen / Spalten dehnbar sind. Beachten Sie, dass diese Bilder für JEDES Gerät in der Dichtekategorie verwendet werden, sodass Ihr ldpi-Bild (240 x 320) auf einem besonders großen Tablet mit geringer Bilddichte (~ 120 dpi) möglicherweise auf 1024 x 600 gedehnt wird. 9-Patch ist daher die beste Lösung für das Dehnen, solange Sie kein Foto oder komplizierte Grafiken für einen Begrüßungsbildschirm benötigen (beachten Sie diese Einschränkungen beim Erstellen des Designs).
Die einzige Möglichkeit, dass diese Dehnung nicht auftritt, besteht darin, einen Bildschirm pro Auflösung zu entwerfen (oder einen für jede Kombination aus Auflösung und Dichte, wenn Sie vermeiden möchten, dass Bilder auf Geräten mit hoher / niedriger Dichte zu klein / groß werden) oder zu erkennen Das Bild darf nicht gedehnt werden und es wird überall dort eine Hintergrundfarbe angezeigt (denken Sie auch daran, dass eine bestimmte Farbe, die von der Android-Engine gerendert wird, aufgrund von Farbprofilen wahrscheinlich anders aussieht als dieselbe bestimmte Farbe, die von Photoshop gerendert wird).
Ich hoffe das hat Sinn gemacht. Viel Glück!
quelle
PORTRAITMODUS
MDPI ist 320x480 dp = 320x480px (1x)
Der LDPI beträgt 0,75 x MDPI = 240 x 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 = 1280 x 1920 Pixel
LANDSCHAFTSMODUS
MDPI ist 480 x 320 dp = 480 x 320 Pixel (1x)
Der LDPI beträgt 0,75 x MDPI = 360 x 240 Pixel
HDPI ist 1,5 x MDPI = 720 x 480 Pixel
XHDPI ist 2 x MDPI = 960 x 640 Pixel
XXHDPI ist 3 x MDPI = 1440 x 960 Pixel
XXXHDPI ist 4 x MDPI = 1920 x 1280 Pixel
BEARBEITEN:
Ich würde vorschlagen, Lottie als Begrüßungsbildschirm zu verwenden, wenn Sie dies ab 2019 lesen
quelle
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
quelle
Ich habe nach der besten und einfachsten Antwort gesucht, um ein 9-Patch-Bild zu erstellen. Jetzt ist es am einfachsten, das 9-Patch-Image zu erstellen.
Unter https://romannurik.github.io/AndroidAssetStudio/index.html können Sie mit nur einem Klick ein 9-Patch-Image für alle Auflösungen erstellen - XHDPI, HDPI, MDPI, LDPI.
quelle
Die Verwendung von PNG ist keine so gute Idee. Eigentlich ist es teuer, was die Leistung betrifft. Sie können zeichnbare XML-Dateien verwenden, z. B. den Hintergrund von Facebook .
Dies hilft Ihnen dabei, Ihre Leistung zu glätten und zu beschleunigen und für das Logo .9 Patch-Bilder zu verwenden.
quelle
quelle
Vor einiger Zeit habe ich eine Excel-Datei mit unterstützten Dimensionen erstellt. Ich
hoffe, dies ist für jemanden hilfreich
Um ehrlich zu sein, habe ich die Idee verloren, aber sie bezeichnet eine andere Bildschirmfunktion als Größe (nicht nur Dichte).
https://developer.android.com/guide/practices/screens_support.html
Bitte informieren Sie mich, wenn Fehler vorliegen
Link1: dimensions.xlsx
Link2: dimensions.xlsx
quelle
In meinem Fall habe ich eine Liste verwendet, die in style.xml gezeichnet werden kann. Mit der zeichnbaren Ebenenliste haben Sie nur ein PNG für alle Bildschirmgrößen benötigt.
und flash_screen.xml im Zeichenordner.
"background_noizi" ist eine PNG-Datei im Zeichenordner. Ich hoffe das hilft.
quelle
** Wenn Sie nach Bildschirmdetails für alle wichtigen Geräte suchen **
gehe zu material.io
quelle
Überarbeitete Lösung, mit der Ihr SplashScreen auf allen APIs, einschließlich API21 bis API23, gut aussieht
Wenn Sie nur auf APIs24 + abzielen, können Sie Ihren Vektor, der direkt in seiner XML-Datei gezeichnet werden kann, einfach wie folgt verkleinern:
Im obigen Code skaliere ich eine Zeichenfläche, die ich auf eine Leinwand mit einer Größe von 640 x 640 gezeichnet habe, auf 240 x 240 neu. dann habe ich es einfach so in meinen Begrüßungsbildschirm gezeichnet und es funktioniert großartig:
Mein Code zeichnet eigentlich nur das Dreieck im Bild unten, aber hier sehen Sie, was Sie damit erreichen können. Die Auflösung ist schließlich großartig im Gegensatz zu den pixeligen Kanten, die ich bei der Verwendung von Bitmap erhalten habe. Verwenden Sie also auf jeden Fall einen Vektor, der gezeichnet werden kann (es gibt eine Site namens vectr, mit der ich meine erstellt habe, ohne spezielle Software herunterladen zu müssen).
BEARBEITEN, damit es auch auf API21-22-23 funktioniert
Während die obige Lösung für Geräte mit API24 + funktioniert, war ich nach der Installation meiner App auf einem Gerät mit API22 sehr enttäuscht. Ich bemerkte, dass der Begrüßungsbildschirm erneut versuchte, die gesamte Ansicht auszufüllen und wie Scheiße aussah. Nachdem ich mir einen halben Tag lang die Augenbrauen herausgerissen hatte, erzwang ich schließlich eine Lösung durch bloße Willenskraft.
Sie müssen eine zweite Datei mit dem Namen splashscreen xml (z. B. splash_screen.xml) erstellen und in zwei Ordner mit den Namen drawable-v22 und drawable-v21 legen, die Sie im Ordner res / erstellen (um sie zu sehen) müssen Ihre Projektansicht von Android auf Projekt ändern). Dies dient dazu, Ihr Telefon anzuweisen, zu Dateien umzuleiten, die sich in diesen Ordnern befinden, wenn auf dem entsprechenden Gerät eine API ausgeführt wird, die dem Suffix -vXX im Zeichenordner entspricht ( siehe diesen Link) . Fügen Sie den folgenden Code in die Ebenenliste der Datei splash_screen.xml ein, die Sie in diesen Ordnern erstellen:
Aus irgendeinem Grund müssen Sie für diese APIs Ihr Drawable in eine Bitmap einbinden, damit es funktioniert und das Endergebnis gleich aussieht. Das Problem ist, dass Sie den Ansatz mit den zusätzlichen zeichnbaren Ordnern verwenden müssen, da die zweite Version der Datei splash_screen.xml dazu führt, dass Ihr Begrüßungsbildschirm auf Geräten mit APIs über 23 überhaupt nicht angezeigt wird. Möglicherweise müssen Sie auch platzieren Die erste Version der Datei splash_screen.xml in drawable-v24, da Android standardmäßig den nächstgelegenen Ordner drawable-vXX verwendet, den es für Ressourcen finden kann. hoffe das hilft
quelle
Basierend auf dieser Antwort von Lucas Cerro berechnete ich die Abmessungen anhand der Verhältnisse in den Android-Dokumenten und anhand der Basislinie in der Antwort. Ich hoffe, das hilft jemand anderem, zu diesem Beitrag zu kommen!
quelle