Tamaños de pantalla de bienvenida para Android
y al mismo tiempo para Cordova (también conocido como Phonegap), React-Native y todas las demás plataformas de desarrollo
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
Nota: No es necesario preparar XXXHDPI y quizás también el tamaño XXHDPI debido a las áreas repetidas de las imágenes de 9 parches. Por otro lado, si solo se utilizan tamaños de retrato, el tamaño de la aplicación podría ser más menor. Más imágenes significan que se necesita más espacio.
Presta atención
Creo que no hay un tamaño exacto para todos los dispositivos. Yo uso Xperia Z 5" . Si desarrolla una aplicación multiplataforma en vista web debe tener en cuenta un montón de cosas (si la pantalla tiene botones de navegación de teclas programables o no, etc.). Por lo tanto, creo que sólo hay una solución adecuada. La solución es a Prepare una pantalla de bienvenida de 9 parches (busque el How to design a new splash screentítulo a continuación).
- Cree pantallas de presentación para los tamaños de pantalla anteriores como 9 parches . Ponle nombres a tus archivos con .9.png sufijos
- Agregue las líneas a continuación en su archivo config.xml
- Agregue el complemento de pantalla de presentación si es necesario.
- Ejecute su proyecto.
¡Eso es!
Código específico de Cordova
Para agregar líneas en config.xml para pantallas de presentación de 9 parches
<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>
Para agregar líneas en el config.xml cuando no se usa pantallas de presentación que 9 parches
<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>
Cómo diseñar una nueva pantalla de presentación
Describiría una forma sencilla de crear una pantalla de bienvenida adecuada de esta forma. Supongamos que estamos diseñando una pantalla de 1280dp x 720dp - xhdpi (x-large). He escrito por ejemplo el siguiente;
En Photoshop: Archivo -> Nuevo en una nueva ventana de diálogo configure sus pantallas
Ancho: 720 píxeles Alto: 1280 píxeles
Supongo que los tamaños anteriores significan que la resolución es de 320 píxeles / pulgada. Pero para asegurarse de que puede cambiar el valor de resolución a 320 en su ventana de diálogo. En este caso Píxeles / Pulgada = DPI
Felicitaciones ... Tiene una plantilla de pantalla de presentación de 720dp x 1280dp.
Cómo generar una pantalla de bienvenida de 9 parches
Después de diseñar la pantalla de presentación, si desea diseñar la pantalla de presentación de 9 parches, debe insertar un espacio de 1 píxel para cada lado. Por esta razón, debe aumentar +2 píxeles el ancho y la altura del tamaño de su lienzo (ahora los tamaños de las imágenes son 722 x 1282).
Dejé el espacio en blanco de 1 píxel en cada lado como se indica a continuación.
Cambiando el tamaño del lienzo usando Photoshop:
- Abra un archivo png de la pantalla de bienvenida en Photoshop
- Haga clic en el icono de candado junto al nombre de 'Fondo' en el campo Capas (para dejar en blanco en lugar de otro color como el blanco) si hay como el abajo:
- Cambie el tamaño del lienzo en el menú Imagen (Ancho: 720 píxeles a 722 píxeles y Alto: 1280 píxeles a 1282 píxeles). Ahora, debería ver un espacio de 1 píxel a cada lado de la imagen de la pantalla de inicio.
Luego puede usar C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat para convertir un archivo de 9 parches. Para eso, abra su pantalla de bienvenida en la aplicación draw9patch. Debe definir su logotipo y áreas expandibles. Observe la línea negra de la siguiente pantalla de presentación de ejemplo. El grosor de la línea negra es de solo 1 px;) Las líneas negras de los lados izquierdo y superior definen el área de visualización obligatoria de la pantalla de inicio. Exactamente como lo diseñó. Las líneas derecha e inferior definen el área que se puede agregar y quitar (áreas que se repiten automáticamente).
Solo haz eso: haz
zoom en el borde superior de tu imagen en la aplicación draw9patch. Haga clic y arrastre el mouse para dibujar una línea. Y presione Mayús + clic y arrastre el mouse para borrar la línea.
Si desarrolla una aplicación multiplataforma (como Cordova / PhoneGap), puede encontrar la siguiente dirección en casi todos los tamaños de pantalla de presentación del sistema operativo mabile. Haga clic en para los tamaños de pantalla de presentación de Windows Phone , WebOS , BlackBerry , Bada-WAC y Bada .
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
Y si necesita tamaños de íconos de aplicaciones IOS, Android, etc., puede visitar aquí .
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