android tailles d'écran d'accueil pour les affichages ldpi, mdpi, hdpi, xhdpi? - par exemple: 1024X768 pixels pour ldpi
Je dois concevoir des écrans de démarrage (des images adaptées à l'écran lors du chargement) pour l'application Android à l'aide de phonegap. Je dois concevoir des images de taille 4 qui conviennent à 4 types d’écrans tels que LDPI, MDPI, HDPI, XHDPI. Est-ce que n'importe qui peut me dire les tailles exactes en pixels pour 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 quelconque de tailles d'écran différentes, car Android n'a pas de taille standard définie. Vous pouvez ainsi 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.
- xgrands écrans font au moins 960dpx 720dp
- les grands écrans font au moins 640dpx 480dp
- les écrans normaux font au moins 470dx x 320dp
- les petits écrans font au moins 426dpx 320dp
Vous pouvez afficher 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 Patch image
La meilleure solution consiste à créer une image de neuf patchs de sorte que la bordure de l'image puisse s'étirer pour correspondre à 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
Taille de l'écran de démarrage pour Android
et en même temps pour Cordova (a.k.a Phonegap), React-Native et toutes les autres plates-formes 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 la taille de XXHDPI en raison des zones de répétition des images de 9 patchs. D'autre part, si seules les tailles Portrait sont utilisées, la taille de l'application pourrait être plus petite. Plus d'images 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 devez prendre en compte de nombreux éléments (que l'écran dispose de boutons de navigation ou non, etc.). Par conséquent, je pense qu'il n'existe qu'une solution appropriée. La solution est - pour préparer un écran de démarrage de 9 correctifs (recherchez How to design a new splash screen rubrique ci-dessous).
- Créez des écrans de démarrage pour les tailles d'écran ci-dessus en tant que 9-patch . Donnez des noms à vos fichiers avec les suffixes . 9.png
- Ajoutez les lignes ci-dessous dans votre fichier config.xml
- Ajoutez le plugin splash screen si nécessaire.
- Exécutez votre projet.
C'est ça!
Code spécifique à Cordova
A ajouter des lignes dans le fichier config.xml pour les écrans de démarrage de 9 correctifs
<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 correctifs
<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 concevions un écran 1280dp x 720dp - xhdpi (x-large). J'ai écrit à titre d'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 en 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 de 720dp x 1280dp.
Comment générer un écran de démarrage de 9 patchs
Après avoir conçu votre écran de démarrage, si vous souhaitez concevoir un écran de démarrage à 9 correctifs, vous devez insérer un espace vide de 1 pixel pour chaque côté. Pour cette raison, vous devez augmenter la largeur et la hauteur de la taille de votre toile de +2 pixel (les tailles de vos images sont maintenant de 722 x 1282).
J'ai laissé un espace vide de 1 pixel de chaque côté comme indiqué ci-dessous.
Modification de la taille du document à l’aide de Photoshop:
- Ouvre un fichier png d'écran de démarrage dans Photoshop
- Cliquez sur l’icône de cadenas située à côté du nom de l’arrière-plan dans le champ Couches (pour laisser un blanc au lieu d’une autre couleur comme le blanc) s’il existe un effet semblable à celui ci-dessous:
- Modifiez la taille de la toile à partir du menu Image (Largeur: 720 pixels à 722 pixels et Hauteur: 1280 pixels à 1282 pixels). Maintenant, devrait voir 1 pixel vide de chaque côté de l'image de l'écran de démarrage.
Vous pouvez ensuite utiliser C:\Program Files (x86)\Android\android-studio\sdk\tools\draw9patch.bat pour convertir un fichier de 9 correctifs. 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'exemple d'écran de démarrage 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 obligatoire de votre écran de démarrage. Exactement comme votre conçu. Les lignes droite et inférieure définissent la zone pouvant être ajoutée et la zone amovible (zones se répétant automatiquement).
Faites juste cela: Zoomez le bord supérieur de votre image sur l'application draw9patch. Cliquez et faites glisser votre souris pour dessiner une ligne. Et appuyez sur Maj + clic et faites glisser votre souris pour effacer la ligne.
Si vous développez une application multiplate-forme (telle que Cordova/PhoneGap), vous pouvez trouver l’adresse suivante dans presque toutes les tailles d’écran de démarrage mabile OS. Cliquez pour Windows Phone , WebOS , BlackBerry , Bada-WAC et Bada splash tailles d'écran.
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
Et si vous avez besoin d'IOS, Android etc. tailles d'icône d'application, vous pouvez visitez 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 Android Appareils mobiles
LDPI- icon-36x36, splash-426x320 (maintenant avec les valeurs correctes)
MDPI- icon-48x48, splash-470x320
HDPI- icône 72x72, splash- 640x480
XHDPI- icon-96x96, splash- 960x720
XXHDPI- icon- 144x144
Tout en pixels.
Pour Android Tablettes électroniques
LDPI:
Portrait: 200x320px
Landscape: 320x200px
MDPI:
Portrait: 320x480px
Landscape: 480x320px
HDPI:
Portrait: 480x800px
Landscape: 800x480px
XHDPI:
Portrait: 720px1280px
Landscape: 1280x720px
- LDPI: Portrait: 200 X 320 pixels. 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 font au moins 960dpx 720dp
- Les grands écrans des éléments de liste font au moins 640dpx et 480dp
- Les écrans normaux des éléments de liste font au moins 470dpx 320dp
- Les petits écrans d'éléments de liste font au moins 426dpx 320dp
Utilisez-le pour créer vos images et les placer dans un dossier de ressources spécifique.
Il suffit d’utiliser ce site Web: http://ticons.fokkezb.nl :)
Cela vous facilite la tâche et génère directement les tailles correctes
xgrands écrans font au moins 960dp x 720dp layout-xlarge tablette 10 "(720x1280 mdpi, 800x1280 mdpi, etc.)
les grands écrans sont dotés d'une tablette tweener d'au moins 640 pd x 480 pd, comme la tablette Streak (480x800 mdpi) et 7 "(600 x 1024 mdpi).
les écrans normaux ont au moins 470dpx et 320pdp comme écran de téléphone typique (480x800 hdpi)
les petits écrans ont au moins un écran de téléphone typique d’au moins 426dpx 320dp (240x320 ldpi, 320x480 mdpi, etc.).