Tailles d'écran de démarrage Android pour les écrans ldpi, mdpi, hdpi, xhdpi? - par exemple: 1024X768 pixels pour ldpi

Je dois concevoir des écrans de démarrage (images qui s'adaptent à l'écran lors du chargement) pour une application Android en utilisant phonegap. Je dois concevoir des images de 4 tailles qui conviennent à 4 types d'écrans comme ldpi, mdpi, hdpi, xhdpi. Quelqu'un peut-il me dire les tailles exactes en pixels de ces écrans afin que je puisse concevoir dans cette taille?

Exemple de réponse:

ldpi - 1024X768 px
mdpi  - 111 X 156 px  

 We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.

<gap:splash src="splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="splash/android/mdpi.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" />

Il peut y avoir un nombre illimité de tailles d'écran différentes en raison du fait qu'Android n'a pas de taille standard définie, vous pouvez donc utiliser les tailles d'écran minimales fournies par Google.

Selon les statistiques de Google, la majorité des écrans ldpi sont de petits écrans et la majorité des écrans mdpi, hdpi, xhdpi et xxhdpi sont des écrans de taille normale.

• Les écrans xlarge mesurent au moins 960dp x 720dp
• les grands écrans mesurent au moins 640dp x 480dp
• les écrans normaux mesurent au moins 470dp x 320dp
• les petits écrans mesurent au moins 426dp x 320dp

Vous pouvez consulter les statistiques sur les tailles relatives des appareils sur le tableau de bord de Google qui est disponible ici .

Plus d'informations sur plusieurs écrans peuvent être trouvées ici .

9 Image de patch

La meilleure solution consiste à créer une image à neuf patchs afin que la bordure de l'image puisse s'étirer pour s'adapter à la taille de l'écran sans affecter la zone statique de l'image.

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

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

1. 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
2. Ajoutez les lignes ci-dessous dans votre fichier config.xml
3. Ajoutez le plugin d'écran de démarrage si nécessaire.
4. 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

Pour les appareils mobiles Android

LDPI- icon-36x36, splash-426x320 (maintenant avec des valeurs correctes)

MDPI- icône-48x48, éclaboussure-470x320

Icône HDPI- 72x72, éclaboussure- 640x480

XHDPI- icône-96x96, splash- 960x720

XXHDPI- icône- 144x144

Tout en pixels.

Pour les tablettes Android

LDPI:
    Portrait: 200x320px
    Landscape: 320x200px
MDPI:
    Portrait: 320x480px
    Landscape: 480x320px
HDPI:
    Portrait: 480x800px
    Landscape: 800x480px
XHDPI:
    Portrait: 720px1280px
    Landscape: 1280x720px

• LDPI: Portrait: 200 X 320px. Paysage: 320 X 200px.
• MDPI: Portrait: 320 X 480px. Paysage: 480 X 320px.
• HDPI: Portrait: 480 X 800px. Paysage: 800 X 480px.
• XHDPI: Portrait: 720 X 1280px. Paysage: 1280 X 720px.
• XXHDPI: Portrait: 960 X 1600px. Paysage: 1600 X 960px.
• XXXHDPI: Portrait: 1280 X 1920px. Paysage: 1920 X 1280px.

• Les écrans Xlarge mesurent au moins 960dp x 720dp
• Les grands écrans des éléments de liste mesurent au moins 640dp x 480dp
• Les écrans normaux des éléments de liste mesurent au moins 470dp x 320dp
• Les petits écrans des éléments de liste mesurent au moins 426dp x 320dp

Utilisez-le pour créer vos images et les placer dans un dossier de ressources spécifique.

Utilisez simplement ce site Web: http://ticons.fokkezb.nl :)

Cela vous facilite la tâche et génère directement les tailles correctes

Les écrans xlarge sont au moins 960dp x 720dp layout-xlarge 10 "tablette (720x1280 mdpi, 800x1280 mdpi, etc.)

les grands écrans sont au moins 640dp x 480dp tweener tablette comme la Streak (480x800 mdpi), 7 "tablette (600x1024 mdpi)

les écrans normaux sont au moins 470dp x 320dp disposition écran de téléphone typique (480x800 hdpi)

les petits écrans sont au moins 426dp x 320dp écran de téléphone typique (240x320 ldpi, 320x480 mdpi, etc.)