Tailles de l'écran de démarrage pour Android
et en même temps pour Cordova (alias Phonegap), React-Native et toutes les autres plateformes de développement
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
Remarque: la préparation de XXXHDPI n'est pas nécessaire et peut-être aussi de la taille XXHDPI en raison des zones répétitives des images à 9 patchs. D'un autre côté, si seules les tailles Portrait sont utilisées, la taille de l'application pourrait être plus réduite. Plus de photos signifie plus d'espace est nécessaire.
Faites attention
Je pense qu'il n'y a pas de taille exacte pour tous les appareils. J'utilise Xperia Z 5 ". Si vous développez une application crossplatform-webview, vous devriez considérer beaucoup de choses (que l'écran ait des boutons de navigation par touches programmables ou non, etc.). Par conséquent, je pense qu'il n'y a qu'une seule solution appropriée. La solution est de préparez un écran de démarrage de 9 patchs (trouvez l'en- How to design a new splash screentête ci-dessous).
- Créez des écrans de démarrage pour les tailles d'écran ci-dessus en 9 patchs . Donnez des noms à vos fichiers avec les suffixes .9.png
- Ajoutez les lignes ci-dessous dans votre fichier config.xml
- Ajoutez le plugin d'écran de démarrage si nécessaire.
- Exécutez votre projet.
C'est tout!
Code spécifique à Cordova
A ajouter des lignes dans le fichier config.xml pour les écrans de démarrage à 9 patchs
<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>
A ajouter des lignes dans le fichier config.xml lors de l'utilisation d' écrans de démarrage non -9-patch
<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>
Comment concevoir un nouvel écran de démarrage
Je décrirais un moyen simple de créer un écran de démarrage approprié en utilisant cette méthode. Supposons que nous concevons un écran 1280dp x 720dp - xhdpi (x-large). J'ai écrit pour l'exemple ci-dessous;
Dans Photoshop: Fichier -> Nouveau dans une nouvelle fenêtre de dialogue définissez vos écrans
Largeur: 720 pixels Hauteur: 1280 pixels
Je suppose que les tailles ci-dessus signifient que la résolution est de 320 pixels / pouce. Mais pour vous assurer que vous pouvez changer la valeur de résolution à 320 dans votre fenêtre de dialogue. Dans ce cas Pixels / Inch = DPI
Félicitations ... Vous avez un modèle d'écran de démarrage 720dp x 1280dp.
Comment générer un écran de démarrage à 9 patchs
Après avoir conçu votre écran de démarrage, si vous souhaitez concevoir un écran de démarrage 9-Patch, vous devez insérer un espace de 1 pixel pour chaque côté. Pour cette raison, vous devez augmenter de +2 pixels la largeur et la hauteur de la taille de votre toile (maintenant vos tailles d'image sont 722 x 1282).
J'ai laissé l'espace vide de 1 pixel de chaque côté comme indiqué ci-dessous.
Modification de la taille du canevas à l'aide de Photoshop:
- Ouvrez un fichier png d'écran de démarrage dans Photoshop
- Cliquez sur l'icône de verrouillage à côté du nom `` Arrière-plan '' dans le champ Calques (pour laisser vide au lieu d'une autre couleur comme le blanc) s'il y a comme le ci-dessous: - Modifiez la taille du canevas dans le menu Image (Largeur: 720 pixels à 722 pixels et Hauteur: 1280 pixels à 1282 pixels). Maintenant, devrait voir un espace de 1 pixel de chaque côté de l'image de l'écran de démarrage.
Ensuite, vous pouvez utiliser C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat pour convertir un fichier 9-patch. Pour cela, ouvrez votre écran de démarrage sur l'application draw9patch. Vous devez définir votre logo et les zones extensibles. Notez la ligne noire de l'écran de démarrage de l'exemple suivant. L'épaisseur de la ligne noire n'est que de 1 px;) Les lignes noires des côtés gauche et supérieur définissent la zone d'affichage incontournable de votre écran de démarrage. Exactement comme vous l'avez conçu. Les lignes de droite et du bas définissent la zone supplémentaire et amovible (zones répétées automatiquement).
Faites simplement cela: Zoomez sur le bord supérieur de votre image sur l'application draw9patch. Cliquez et faites glisser votre souris pour tracer une ligne. Et appuyez sur Maj + clic et faites glisser votre souris pour effacer la ligne.
Si vous développez une application multiplateforme (comme Cordova / PhoneGap), vous pouvez trouver l'adresse suivante presque toutes les tailles d'écran de démarrage du système d'exploitation mabile. Cliquez pour les tailles d'écran de démarrage Windows Phone , WebOS , BlackBerry , Bada-WAC et Bada .
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
Et si vous avez besoin de tailles d'icônes d'applications IOS, Android, etc., vous pouvez visiter ici .
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