À propos de la taille des images et des éléments Android


86

J'ai besoin de clarifier un doute concernant les éléments d'image de mon application,

si je spécifie dans un fichier xml que la hauteur de quelque chose [vue image] est de 50 creux

quel type d'écran dois-je choisir dans le dossier des ressources?

drawable, hdpi, ldpi, mdpi, xhdpi,

pour avoir l'image de 50 px de hauteur,

et quel est le pourcentage d'images plus grandes et plus petites par rapport à l'image de base,

comme dans iOS, @ 2x, est littéralement 2 fois la taille de l'image, et vous dites par programme la taille normale,

Merci!


1
Votre question est expliquée dans le manuel d'Android: developer.android.com/guide/practices/screens_support.html
Marcin Orlowski

Réponses:


373

mdpiest la densité de référence - autrement dit, 1 px sur un mdpiécran est égal à 1 creux. Le ratio de mise à l'échelle des actifs est:

ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
0.75 | 1    | 1.33  | 1.5  | 2     | 3      | 4

Bien que vous n'ayez pas vraiment besoin de vous inquiéter à tvdpimoins que vous ne développiez spécifiquement pour Google TV ou le Nexus 7 d'origine, mais même Google recommande d'utiliser simplementhdpi actifs.

Cela signifie que si vous faites une image 48dip et que vous prévoyez de prendre en charge jusqu'à xxhdpi resolution, vous devriez commencer avec une image 144px (192px si vous voulez des actifs natifs pour xxxhdpi) et créer les images suivantes pour les densités:

ldpi    | mdpi    | tvdpi    | hdpi    | xhdpi     | xxhdpi    | xxxhdpi
36 x 36 | 48 x 48 | 64 x 64  | 72 x 72 | 96 x 96   | 144 x 144 | 192 x 192

Et ceux-ci devraient s'afficher à peu près à la même taille sur n'importe quel appareil, à condition que vous les ayez placés dans des dossiers spécifiques à la densité (par exemple drawable-xhdpi,drawable-hdpi etc.)

Pour référence, les densités de pixels pour ceux-ci sont:

ldpi  | mdpi  | tvdpi  | hdpi  | xhdpi  | xxhdpi  | xxxhdpi
120   | 160   | 213    | 240   | 320    | 480     | 640

32
C'est l'explication la plus simple de ce sujet que j'ai vue en ligne n'importe où. Je l'ai littéralement marqué sur mon poste de travail de designers lol
James andresakis

10
Haha, super! : P Juste ajouté des informations pour XXHDPI, aussi.
Kevin Coppock

Comment décidez-vous de partir d'un 48dip? Supposons que vous n'ayez qu'une tablette (mdpi) à portée de main, commencez-vous avec une taille aléatoire et répétez-vous jusqu'à ce qu'elle ait l'air "assez grande"?
phtrivier

@phtrivier C'est juste une taille que j'ai utilisée comme exemple. Dans ce cas, c'est la taille d'une icône de lanceur. La taille dont vous avez besoin pour les autres actifs dépend de votre cas d'utilisation.
Kevin Coppock

1
J'ai également créé un outil pour calculer cela à la volée: pixit-tool.web.app/#
wdavies973 le

22

Sur la base de la réponse de kcoppock , j'ai créé le script shell suivant pour redimensionner automatiquement toutes les images à la bonne taille et les copier dans les dossiers dessinables Android respectifs!

Créez un script shell et collez le code suivant:

createAndroidImages.sh

#!/bin/bash

read -p "Please enter the subfolder of the original images? " folder
read -p "How many DP (width) should the image have? " dp

for i in $(find $folder/. -type f -name "*[A-Z]*"); do mv "$i" "$(echo $i | tr A-Z a-z)"; done

mkdir drawable-ldpi
mkdir drawable-mdpi
mkdir drawable-tvdpi
mkdir drawable-hdpi
mkdir drawable-xhdpi
mkdir drawable-xxhdpi
mkdir drawable-xxxhdpi

cp $folder/* drawable-ldpi/
cp $folder/* drawable-mdpi/
cp $folder/* drawable-tvdpi/
cp $folder/* drawable-hdpi/
cp $folder/* drawable-xhdpi/
cp $folder/* drawable-xxhdpi/
cp $folder/* drawable-xxxhdpi/

sips -Z $(echo $dp*3/4 | bc) drawable-ldpi/*
sips -Z $(echo $dp | bc) drawable-mdpi/*
sips -Z $(echo $dp*4/3 | bc) drawable-tvdpi/*
sips -Z $(echo $dp*3/2 | bc) drawable-hdpi/*
sips -Z $(echo $dp*2 | bc) drawable-xhdpi/*
sips -Z $(echo $dp*3 | bc) drawable-xxhdpi/*
sips -Z $(echo $dp*4 | bc) drawable-xxxhdpi/*

Mettez votre script dans un dossier et vos images originales dans un sous-dossier par exemple:

/
.. createAndroidImages.sh
.. originalImages/
....a123.png
....b456.png

Exécutez le script shell dans le terminal: sh createAndroidImages.sh

Pour copier les images créées directement dans votre projet Android Studio:

cp -R drawable-* ~/AndroidStudioProjects/ESCRating/app/src/main/res/

Vous avez terminé! J'espère que cela aide quelqu'un!

PS Veuillez noter que les images originales doivent avoir au moins quatre fois la largeur en pixels, que la largeur souhaitée en dpi (par exemple 4 (facteur xxxhdpi) * 30dpi => 120px) pour des résultats optimaux.


4

kcoppock a fait un excellent travail en expliquant les densités d'écran andorid. Je voudrais simplement ajouter un autre point concernant la question initiale.

L'icône du lanceur de tablette Android utilise un seau de densité vers le haut.

Selon le post Google+ du développeur de Google Nick Butcher

Le magnifique écran du Nexus 10 tombe dans le seau de densité XHDPI. Sur les tablettes, Launcher utilise des icônes d'un compartiment de densité vers le haut [0] pour les rendre légèrement plus grandes. Pour vous assurer que l'icône de votre lanceur (sans doute l'atout le plus important de vos applications) est nette, vous devez ajouter une icône 144 * 144px dans le dossier drawable-xxhdpi ou drawable-480dpi.

Trouvez la source ici


1

Voici mes calculs pour la mise à l'échelle et la réduction des images pour Android-

ldpi (120 ppp, écran basse densité) - 36 px x 36 px (0,19) (1)

mdpi (160 ppp, écran à densité moyenne) - 48px x 48px (0,25) (1,33)

hdpi (240 dpi, écran haute densité) - 72px x 72px (0,38) (2)

xhdpi (320 dpi, écran à très haute densité) - 96px x 96px (0,5) (2,67)

xxhdpi (480 dpi, écran à très haute densité) - 144px x 144px (0,75) (4)

xxxhdpi (640 dpi, écran à très haute densité) - 192 px x 192 px (1,0) (5,33)

Mon court article est utile pour créer des ressources d'image à l'aide d'imagemagick, lorsqu'il y a plusieurs images.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.