Android tailles d'image de l'écran de démarrage adaptées à tous les appareils
Je souhaite afficher un fichier PNG en plein écran sur Splash. Une seule erreur existe et je ne sais pas quelle taille mettre dans chaque dossier pouvant être dessiné (ldpi, mdpi, hdpi et xhdpi). Mon application est censée fonctionner correctement sur tous les téléphones et tablettes. Quelles tailles (en pixels) dois-je créer pour que le splash affiche Nice sur tous les écrans?
Avertissement
Cette réponse date de 2013 et est sérieusement obsolète. À partir de Android 3.2, il existe maintenant 6 groupes de densité d'écran. Cette réponse sera mise à jour dès que je pourrai, mais sans ETA. Reportez-vous au documentation officielle pour connaître toutes les densités du moment (bien que les informations sur les tailles de pixels spécifiques soient difficiles à trouver).
Voici la version tl/dr
Créez 4 images, une pour chaque densité d'écran:
- xlarge (xhdpi): 640x960
- grand (hdpi): 480x800
- moyen (mdpi): 320x480
- petit (ldpi): 240x320
Lire Introduction d'une image de 9 correctifs in Android Guide du développeur
- Concevez des images comportant des zones pouvant être étirées en toute sécurité sans compromettre le résultat final
Ainsi, Android sélectionnera le fichier correspondant à la densité d'image du périphérique, puis étendra l'image conformément au standard de 9 patchs.
fin de tl; dr. Poste complet à venir
Je réponds en ce qui concerne l'aspect de la question lié au design. Je ne suis pas un développeur, je ne pourrai donc pas fournir de code pour implémenter de nombreuses solutions fournies. Hélas, mon intention est d'aider les concepteurs qui sont aussi perdus que lorsque j'ai aidé à développer ma première application Android.
Convient à toutes les tailles
Avec Android, les entreprises peuvent développer leurs téléphones mobiles et leurs tables de toutes les tailles et de toutes les résolutions souhaitées. De ce fait, il n’existe pas de "bonne taille d’image" pour un écran de démarrage, car il n’ya pas de résolution d’écran fixe. Cela pose un problème aux personnes qui souhaitent implémenter un écran de démarrage.
Vos utilisateurs veulent-ils vraiment voir un écran de démarrage?
(En passant, les écrans de démarrage sont quelque peu découragés parmi les utilisateurs. Il est avancé que l’utilisateur sait déjà quelle application il a tapée, et il n’est pas nécessaire de marquer votre image avec un écran de démarrage, car cela interrompt l’expérience utilisateur avec "ad". Il convient toutefois de l'utiliser dans les applications nécessitant un chargement considérable lors de l'initialisation (5s +), y compris les jeux et autres, de sorte que l'utilisateur ne se demande pas si l'application est en panne ou non)
Densité de l'écran; 4 cours
Donc, étant donné le nombre de résolutions d'écran différentes sur les téléphones sur le marché, Google a mis en place des alternatives et des solutions astucieuses qui peuvent aider. La première chose à savoir est que Android sépare TOUS LES ÉCRANS en 4 densités d'écran distinctes:
- Faible densité (ldpi ~ 120dpi)
- Densité moyenne (mdpi ~ 160dpi)
- Haute densité (hdpi ~ 240dpi)
- Très haute densité (xhdpi ~ 320dpi) (Ces valeurs en dpi sont approximatives, car les appareils construits sur mesure auront des valeurs en dpi variables)
Ce que vous (si vous êtes un designer) devez savoir, c’est que Android choisit en gros 4 images à afficher, en fonction de l’appareil. Vous devez donc créer 4 images différentes (bien que vous puissiez en développer davantage pour différents formats tels que le mode écran large, mode portrait/paysage, etc.).
Dans cet esprit, sachez ceci: à moins que vous ne conceviez un écran pour chaque résolution utilisée dans Android, votre image s’étendra à la taille de l’écran. Et à moins que votre image ne soit essentiellement un dégradé ou un flou, vous obtiendrez une distorsion indésirable avec l’étirement. Vous avez donc essentiellement deux options: créer une image pour chaque combinaison taille/densité d’écran ou créer quatre images de 9 patchs.
La solution la plus difficile consiste à concevoir un écran de démarrage différent pour chaque résolution. Vous pouvez commencer par suivre les résolutions du tableau à la fin de cette page (il y en a d'autres. Exemple: 960 x 720 ne figure pas dans cette liste). Et en supposant que l'image comporte des détails mineurs, tels que des textes de petite taille, vous devez concevoir plusieurs écrans pour chaque résolution. Par exemple, une image 480x800 affichée sur un écran moyen peut sembler correcte, mais sur un écran plus petit (avec une densité/dpi supérieure), le logo peut devenir trop petit ou du texte peut devenir illisible.
Image de 9 patchs
L'autre solution consiste à créer une image de 9 correctifs . Il s'agit essentiellement d'une bordure transparente de 1 pixel autour de votre image. En traçant des pixels noirs dans les zones supérieure et gauche de cette bordure, vous pouvez définir les parties de l'image pouvant être étirées. Je n'entrerai pas dans les détails sur le fonctionnement des images à 9 patchs, mais en bref, les pixels qui s'alignent sur les marques en haut et à gauche sont les pixels qui seront répétés pour étirer l'image.
Quelques règles de base
- Vous pouvez créer ces images dans Photoshop (ou tout logiciel d’édition d’images capable de créer avec précision des fichiers pngs transparents).
- La bordure de 1 pixel doit être PLEIN TRANSPARENT.
- La bordure transparente de 1 pixel doit être tout autour de votre image, pas seulement en haut et à gauche.
- vous ne pouvez dessiner que des pixels noirs (# 000000) dans cette zone.
- Les bordures supérieure et gauche (qui définissent l'étirement de l'image) ne peuvent comporter qu'un seul point (1px x 1px), deux points (les deux 1px x 1px) ou UNE ligne continue (largeur x 1px ou 1px x hauteur).
- Si vous choisissez d'utiliser 2 points, l'image sera agrandie proportionnellement (chaque point s'agrandira jusqu'à atteindre la largeur/hauteur finale)
- La bordure 1px doit s'ajouter aux dimensions prévues du fichier de base. Donc, une image de 100x100 9-patchs doit avoir réellement 102x102 (100x100 + 1px en haut, en bas, à gauche et à droite)
- Les images de 9 patchs doivent se terminer par * .9.png
Ainsi, vous pouvez placer 1 point de chaque côté de votre logo (dans la bordure supérieure) et 1 point au-dessus et au-dessous (sur la bordure de gauche), et ces lignes et colonnes marquées seront les seuls pixels à s'étirer.
Exemple
Voici une image de 9 correctifs, 102x102px (taille finale 100x100, pour les besoins de l'application):
Voici un zoom à 200% de la même image:
Remarquez les marques 1px en haut et à gauche indiquant les lignes/colonnes à développer.
Voici à quoi ressemblerait cette image au format 100x100 dans l'application:
Et voici ce qu'il voudrait s'il était étendu à 460x140:
Une dernière chose à considérer. Ces images peuvent sembler parfaites sur votre écran et sur la plupart des téléphones portables, mais si l'appareil présente une densité d'image très élevée (dpi), l'image parait trop petite. Probablement toujours lisible, mais sur une tablette avec une résolution de 1920x1200, l'image apparaîtrait comme un très petit carré au milieu. Alors, quelle est la solution? Créez 4 images de lanceur de 9 patchs différentes, chacune correspondant à un ensemble de densité différent. Pour éviter toute contraction, vous devez définir la résolution commune la plus basse pour chaque catégorie de densité. Réduire n'est pas souhaitable ici, car 9 correctifs ne permettent que des étirements. Par conséquent, lors d'un processus de réduction, le texte et d'autres éléments risquent de perdre la lisibilité.
Voici une liste des résolutions les plus petites et les plus courantes pour chaque catégorie de densité:
- xlarge (xhdpi): 640x960
- grand (hdpi): 480x800
- moyen (mdpi): 320x480
- petit (ldpi): 240x320
Créez donc quatre écrans de démarrage dans les résolutions ci-dessus, développez les images, en plaçant une bordure transparente de 1 px sur le canevas et marquez les lignes/colonnes qui seront étirables. N'oubliez pas que ces images seront utilisées pour TOUS LES APPAREILS de la catégorie de densité, de sorte que votre image ldpi (240 x 320) peut être étendue à 1024x600 sur une très grande tablette avec faible densité d'image (~ 120 dpi). Donc, 9-patch est la meilleure solution pour l’étirement, tant que vous ne voulez pas d’une photo ou de graphiques compliqués pour un écran de démarrage (gardez à l’esprit ces limitations lors de la création du motif).
Encore une fois, le seul moyen d'éviter cet étirement est de concevoir un écran pour chaque résolution (ou un pour chaque combinaison résolution-densité, si vous souhaitez éviter que les images ne deviennent trop petites/trop grandes sur les périphériques haute/basse densité), ou pour indiquer l'image ne doit pas être étirée et une couleur d'arrière-plan apparaît chaque fois que l'étirement se produit (n'oubliez pas qu'une couleur spécifique rendue par le moteur Android aura probablement un aspect différent de la même couleur spécifique rendue par photoshop, en raison des profils de couleur ).
J'espère que cela n'a aucun sens. Bonne chance!
MODE PORTRAIT
MDPI est 320x480 dp = 320x480px (1x)
LDPI est 0,75 x MDPI = 240 x 360px
HDPI est de 1,5 x MDPI = 480x720px
XHDPI est 2 x MDPI = 640x960px
XXHDPI est 3 x MDPI = 960x1440px
XXXHDPI est 4 x MDPI = 1280x1920px
MODE PAYSAGE
MDPI est 480x320 dp = 480x320px (1x)
LDPI est 0,75 x MDPI = 360 x 240px
HDPI est de 1,5 x MDPI = 720x480px
XHDPI est 2 x MDPI = 960x640px
XXHDPI est 3 x MDPI = 1440x960px
XXXHDPI est 4 x MDPI = 1920x1280px
MODIFIER:
Je suggérerais d'utiliser Lottie pour l'écran de démarrage si vous lisez ceci en 2019
PORTRAIT
LDPI: 200x320px
MDPI: 320x480px
HDPI: 480x800px
XHDPI: 720px1280px
PAYSAGE
LDPI: 320x200px
MDPI: 480x320px
HDPI: 800x480px
XHDPI: 1280x720px
J'ai cherché la meilleure et la plus simple des réponses pour créer une image de 9 patchs. La tâche la plus facile consiste maintenant à créer une image de 9 correctifs.
De https://romannurik.github.io/AndroidAssetStudio/index.html (-) vous pouvez créer une image de 9 correctifs pour toutes les résolutions - XHDPI, HDPI, MDPI, LDPI en un seul clic.
L'utilisation de PNG n'est pas une si bonne idée. En fait, cela coûte cher en termes de performance. Vous pouvez utiliser des fichiers XML pouvant être dessinés, par exemple, arrière-plan de Facebook .
Cela vous aidera à lisser et à accélérer vos performances. Pour le logo, utilisez des images de patch .9.
Density buckets
LDPI 120dpi .75x
MDPI 160dpi 1x
HDPI 240dpi 1.5x
XHDPI 320dpi 2x
XXHDPI 480dpi 3x
XXXHDPI 640dpi 4x
px / dp = dpi / 160 dpi
Il y a quelque temps, j'ai créé un fichier Excel avec des dimensions prises en charge.
J'espère que cela sera utile à quelqu'un
Pour être honnête, j’ai perdu l’idée, mais cela fait référence à une autre caractéristique de l’écran comme taille (et pas seulement la densité)
https://developer.Android.com/guide/practices/screens_support.html
S'il vous plaît informez-moi s'il y a des erreurs
Dans mon cas, j'ai utilisé list drawable dans style.xml. Avec la liste des calques pouvant être dessinée, vous n'avez besoin que d'un png pour toutes les tailles d'écran.
<resources xmlns:tools="http://schemas.Android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Android:Theme.Holo.Light.DarkActionBar">
<item name="Android:windowNoTitle">true</item>
<item name="Android:windowBackground">@drawable/flash_screen</item>
<item name="Android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>
et flash_screen.xml dans un dossier pouvant être dessiné.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@Android:color/white"></item>
<item>
<bitmap Android:src="@drawable/background_noizi" Android:gravity="center"></bitmap>
</item>
"background_noizi" est png dans un dossier pouvant être dessiné. J'espère que ça aide
