Begrüßungsbildschirmgrößen für Android
und gleichzeitig für Cordova (auch bekannt als Phonegap), React-Native und alle anderen Entwicklungsplattformen
Format : 9-Patch PNG (recommended)
Dimensions
- LDPI:
- Portrait: 200x320px
- Landscape: 320x200px
- MDPI:
- Portrait: 320x480px
- Landscape: 480x320px
- HDPI:
- Portrait: 480x800px
- Landscape: 800x480px
- XHDPI:
- Portrait: 720px1280px
- Landscape: 1280x720px
- XXHDPI
- Portrait: 960x1600px
- Landscape: 1600x960px
- XXXHDPI
- Portrait: 1280x1920px
- Landscape: 1920x1280px
Hinweis: Das Vorbereiten von XXXHDPI ist nicht erforderlich und möglicherweise auch die XXHDPI-Größe, da sich die Bereiche von 9-Patch-Bildern wiederholen. Wenn jedoch nur Porträtgrößen verwendet werden, kann die App-Größe geringer sein. Mehr Bilder bedeuten mehr Platzbedarf.
Passt auf
Ich denke, es gibt keine genaue Größe für alle Geräte. Ich benutze Xperia Z 5" . Wenn Sie eine plattformübergreif-webview App entwickeln , sollten Sie eine Menge Dinge berücksichtigen (ob Bildschirm Softkey Navigationstasten oder nicht, usw. hat). Deshalb Ich denke , es ist nur eine passende Lösung. Die Lösung ist zu Bereiten Sie einen 9-Patch-Begrüßungsbildschirm vor (siehe How to design a new splash screenÜberschrift unten).
- Erstellen Sie Begrüßungsbildschirme für die oben genannten Bildschirmgrößen als 9-Patch . Geben Sie Ihren Dateien Namen mit den Suffixen .9.png
- Fügen Sie die folgenden Zeilen in Ihre Datei config.xml ein
- Fügen Sie bei Bedarf das Begrüßungsbildschirm-Plugin hinzu.
- Führen Sie Ihr Projekt aus.
Das ist es!
Cordova-spezifischer Code
Zum Hinzufügen von Zeilen in die config.xml für 9-Patch-Begrüßungsbildschirme
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
<splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
<splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
<splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
<splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/>
</platform>
Hinzufügen von Zeilen in die Datei config.xml bei Verwendung von Begrüßungsbildschirmen ohne Patch-9
<platform name="android">
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
So entwerfen Sie einen neuen Begrüßungsbildschirm
Ich würde einen einfachen Weg beschreiben, um auf diese Weise einen richtigen Begrüßungsbildschirm zu erstellen. Angenommen, wir entwerfen einen Bildschirm mit 1280 dp x 720 dp - xhdpi (x-groß). Ich habe zum Beispiel das Folgende geschrieben;
In Photoshop: Datei -> Neu in neuem Dialogfenster legen Sie Ihre Bildschirme fest
Breite: 720 Pixel Höhe: 1280 Pixel
Ich denke, die oben genannten Größen bedeuten eine Auflösung von 320 Pixel / Zoll. Um sicherzustellen, dass Sie den Auflösungswert in Ihrem Dialogfenster auf 320 ändern können. In diesem Fall Pixel / Zoll = DPI
Herzlichen Glückwunsch ... Sie haben eine Begrüßungsbildschirmvorlage mit 720 dp x 1280 dp.
So generieren Sie einen 9-Patch-Begrüßungsbildschirm
Wenn Sie nach dem Entwerfen Ihres Begrüßungsbildschirms einen 9-Patch-Begrüßungsbildschirm entwerfen möchten, sollten Sie für jede Seite eine Pixellücke einfügen. Aus diesem Grund sollten Sie die Breite und Höhe Ihrer Leinwandgröße um +2 Pixel erhöhen (jetzt sind Ihre Bildgrößen 722 x 1282).
Ich habe die leere 1-Pixel-Lücke an jeder Seite wie unten angegeben belassen.
Ändern der Leinwandgröße mithilfe von Photoshop:
- Öffnen Sie eine Begrüßungsbildschirm-PNG-Datei in Photoshop.
- Klicken Sie auf das Schlosssymbol neben dem Namen 'Hintergrund' im Feld Ebenen (um anstelle einer anderen Farbe wie Weiß leer zu lassen), wenn dies der Fall ist unten: - Ändern Sie die Leinwandgröße im Menü Bild (Breite: 720 Pixel auf 722 Pixel und Höhe: 1280 Pixel auf 1282 Pixel). Jetzt sollte auf jeder Seite des Begrüßungsbildschirms eine Pixellücke angezeigt werden.
Anschließend können Sie mit C: \ Programme (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat eine 9-Patch-Datei konvertieren. Öffnen Sie dazu Ihren Begrüßungsbildschirm in der draw9patch-App. Sie sollten Ihr Logo und erweiterbare Bereiche definieren. Beachten Sie die schwarze Linie im folgenden Beispiel-Begrüßungsbildschirm. Die Dicke der schwarzen Linie beträgt nur 1 Pixel;) Linke und obere Seite Schwarze Linien definieren den Anzeigebereich Ihres Begrüßungsbildschirms. Genau so, wie Sie es entworfen haben. Die rechten und unteren Zeilen definieren den hinzufügenden und entfernbaren Bereich (sich automatisch wiederholende Bereiche).
Tun Sie das einfach:
Zoomen Sie die obere Kante Ihres Bildes in der draw9patch-Anwendung. Klicken und ziehen Sie die Maus, um eine Linie zu zeichnen. Drücken Sie Umschalt + Klicken und ziehen Sie die Maus, um die Linie zu löschen.
Wenn Sie eine plattformübergreifende App (wie Cordova / PhoneGap) entwickeln, finden Sie die folgende Adresse für fast alle mabile OS-Begrüßungsbildschirmgrößen. Klicken Sie hier für Windows Phone- , WebOS- , BlackBerry- , Bada-WAC- und Bada- Begrüßungsbildschirmgrößen.
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
Und wenn Sie IOS-, Android- usw. App-Symbolgrößen benötigen, können Sie diese hier besuchen .
IOS
Format : PNG (recommended)
Dimensions
- Tablet (iPad)
- Non-Retina (1x)
- Portrait: 768x1024px
- Landscape: 1024x768px
- Retina (2x)
- Portrait: 1536x2048px
- Landscape: 2048x1536px
- Handheld (iPhone, iPod)
- Non-Retina (1x)
- Portrait: 320x480px
- Landscape: 480x320px
- Retina (2x)
- Portrait: 640x960px
- Landscape: 960x640px
- iPhone 5 Retina (2x)
- Portrait: 640x1136px
- Landscape: 1136x640px
- iPhone 6 (2x)
- Portrait: 750x1334px
- Landscape: 1334x750px
- iPhone 6 Plus (3x)
- Portrait: 1242x2208px
- Landscape: 2208x1242px