Taille d'image de l'écran d'accueil Android pour tous les appareils

Question

J'ai un PNG en plein écran que je veux afficher sur splash. Une seule erreur, et je n'ai aucune idée de la taille à placer 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 soit agréable sur tous les écrans?

Answer 1

Voici la tl/dr version

• Création de 4 images, une pour chaque densité de l'écran:

  • xlarge (xhdpi): 640x960
  • grand (hdpi): 480x800
  • moyen (mdpi): 320x480
  • petit (ldpi): 240x320

• Lire 9-patch image introduction dans l'Android Developer Guide

• La conception des images de zones qui peuvent être en toute sécurité étiré sans compromettre le résultat final

Avec cela, Android sera sélectionnez le fichier approprié pour le dispositif de la densité de l'image, alors il va étirer l'image en fonction de la 9-patch standard.

fin de la tl;dr. Plein de post à venir

Je réponds en ce qui concerne le design, l'aspect de la question. Je ne suis pas développeur, donc je ne serai pas en mesure de fournir le code pour la mise en œuvre de nombreuses solutions. Hélas, mon intention est d'aider les concepteurs qui sont aussi perdue que j'étais quand j'ai aidé à développer ma première Application Android.

Raccord de toutes les tailles

Avec Android, les entreprises peuvent développer leurs téléphones mobiles et des tables de presque n'importe quelle taille, avec presque toute résolution qu'ils veulent. À cause de cela, il n'y a pas de "bonne taille de l'image" pour un écran de démarrage, il n'y a pas fixé les résolutions d'écran. Cela pose un problème pour les personnes qui veulent mettre en œuvre un écran de démarrage.

Vos utilisateurs veulent vraiment voir un écran de démarrage?

(Sur une note de côté, des écrans de démarrage sont un peu découragée, entre la facilité d'utilisation, les gars. Il est soutenu que l'utilisateur sait déjà ce que l'application qu'il tapait sur, et l'image de marque de votre image avec un écran de démarrage n'est pas nécessaire, car elle ne s'interrompt l'expérience de l'utilisateur avec une "annonce". Il doit être utilisé, cependant, dans les applications qui nécessitent beaucoup de chargement lorsqu'il est initialisé (5s+), y compris des jeux et autres, de sorte que l'utilisateur n'est pas bloqué me demandais si l'application s'est écrasé ou pas)

Densité de l'écran; 4 classes

Donc, compte tenu de beaucoup de différentes résolutions d'écran dans les téléphones sur le marché, Google a mis en œuvre certaines des solutions de rechange et astucieuses solutions qui peuvent les aider. La première chose que vous devez savoir, c'est que Android sépare TOUS les écrans en 4 distincte de l'écran densités:

1. La faible Densité (ldpi ~ 120ppi)
2. Densité moyenne (mdpi ~ 160dpi)
3. Haute Densité (hdpi ~ 240dpi)
4. Extra-Haute Densité (xdpi ~ 320dpi) (Ces valeurs dpi sont des approximations, puisque construit sur mesure appareils auront des valeurs dpi)

Ce que vous (si vous êtes un designer) ont besoin de savoir, c'est que Android fondamentalement choisit à partir de 4 images à afficher, en fonction de l'appareil. Donc en gros, vous avez à la conception de 4 images différentes (bien plus pouvez de développement pour les différents formats tels que le grand écran, en portrait ou en mode paysage, etc).

Avec cela à l'esprit, savoir: à moins que la conception d'un écran pour chaque résolution unique qui est utilisé dans adroind, votre image va s'étirer pour s'adapter à la taille de l'écran. Et à moins que votre image est en fait un dégradé ou de flou, vous aurez indésirables distorsion avec l'étirement. Donc, vous avez essentiellement deux options: créer une image pour chaque taille de l'écran/densité de la combinaison, ou en créer de quatre 9-patch images.

Le plus dur solution est de concevoir un autre écran de démarrage pour chaque résolution. Vous pouvez commencer en suivant les résolutions dans le tableau à la fin de cette page (il y en a plus. Exemple: 960 x 720 n'est pas listé ici). Et en supposant que vous avez quelques petits détails dans l'image, comme le petit texte, vous devez concevoir de plus d'un écran pour chaque résolution. Par exemple, un 480x800 image affichée dans un milieu de l'écran peut paraître ok, mais sur un écran plus petit (avec une densité plus élevée/dpi) le logo peut devenir trop petit, ou certains peut rendre le texte illisible.

9-patch image

L'autre solution est de créer un 9-patch de l'image. C'est fondamentalement une de 1 pixel-transparent-bordure autour de votre image, et par le dessin de pixels noirs en haut et à gauche de la zone de cette frontière, vous pouvez définir quelles parties de votre image sera autorisé à s'étirer. Je n'entrerai pas dans les détails de comment 9-patch images du travail, mais, en bref, les pixels qui correspondent aux marquages en haut et à gauche de la zone sont les pixels qui seront répétées pour étirer l'image.

Quelques règles de base

1. Vous pouvez faire ces images dans photoshop (ou tout logiciel de retouche d'image qui peut créer exactement transparent png).
2. La de 1 pixel de la frontière doit être totalement TRANSPARENT.
3. La de 1 pixel transparent frontière doit être tout autour de votre image, et pas seulement en haut et à gauche.
4. vous pouvez seulement de tirage noir (#000000) pixels dans ce domaine.
5. En haut et à gauche des frontières (qui définissent l'étirement des images) ne peut avoir qu'un point (1px 1px x), deux points (deux 1px 1px x) ou d'UNE ligne continue (largeur x 1px ou 1px x hauteur).
6. Si vous choisissez d'utiliser 2 points, l'image sera agrandie proportionnellement (de sorte que chaque point sera à tour de rôle jusqu'à ce que l'expansion de la finale de la largeur/hauteur)
7. La 1px frontière doit être en plus de la destination du fichier de base dimensions. Ainsi, un 100x100 9-patch image a effectivement avoir 102x102 (100x100 +1px sur haut, bas, gauche et droite)
8. 9-patch images à la fin *.9.png

De sorte que vous pouvez placer 1 point sur chaque côté de votre logo (en haut à la frontière), et 1 point au-dessus et au-dessous (sur la gauche), et ceux-ci ont marqué les lignes et les colonnes seront les seuls pixels à l'étirement.

Exemple

Voici un 9-patch image, 102x102px (100x100 taille finale, pour les fins de l'application):

Voici un zoom de 200% de la même image:

Avis de la 1px les marques sur le haut et à gauche de dire qui de lignes/colonnes de l'expansion.

Voici ce que cette image pourrait ressembler à 100x100 l'intérieur de l'application:

Et voici ce que ce serait comme si elles étaient étendues à 460x140:

Une dernière chose à prendre en compte. Ces images peuvent fines sur l'écran de votre moniteur et sur la plupart des mobiles, mais si l'appareil a une très haute densité de l'image (dpi), l'image est trop petite. Probablement encore lisible, mais sur une tablette avec une résolution de 1920x1200, l'image apparaîtra comme une très petite place dans le milieu. Alors quelle est la solution? Conception 4 9-patch lanceur d'images, chacune pour une autre densité. Pour s'assurer qu'aucun rétrécissement va se produire, vous devez concevoir dans le plus petit commun de résolution pour chaque densité de la catégorie. La diminution est undesireable ici parce que le 9-patch uniquement des comptes pour les étirements, donc dans un processus de réduction petit texte et d'autres éléments pourraient perdre de la lisibilité.

Voici une liste de la plus petite, la plupart des résolutions courantes pour chaque densité de la catégorie:

• xlarge (xhdpi): 640x960
• grand (hdpi): 480x800
• moyen (mdpi): 320x480
• petit (ldpi): 240x320

Le design de quatre écrans de démarrage dans les résolutions ci-dessus, développez les images, mettre un 1px bordure transparente autour de la toile, et marquer les lignes/colonnes sera extensible. Gardez à l'esprit ces images seront utilisées pour n'IMPORTE quel appareil de la densité de la catégorie, de sorte que votre ldpi image (240 x 320) peut être étiré jusqu'à 1024 x 600 sur une grande tablette avec de petites densité de l'image (~120 dpi). Ainsi 9-patch est la meilleure solution pour les étirements, aussi longtemps que vous ne voulez pas d'une photo ou d'compliqué graphiques pour un écran de démarrage (gardez à l'esprit ces limites que vous créez le design).

Encore une fois, la seule façon pour cet étirement de ne pas arriver, c'est à la conception d'un écran de chaque résolution (ou un pour chaque résolution de la densité de la combinaison, si vous voulez éviter d'avoir des images devient trop petit/grand sur haut/bas de la densité des appareils), ou de dire à l'image de ne pas l'étirer et ont une couleur d'arrière-plan apparaissent là où les étirements pourraient se produire (n'oublions pas qu'une couleur spécifique rendus par l'android moteur va probablement différentes de la même couleur spécifique rendus par photohop, en raison des profils de couleur).

J'espère que cela fait sens. Bonne chance!

Answer 2

PORTRAIT

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PAYSAGE

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Answer 3

J'ai cherché la meilleure et la plus simple réponse pour créer une image à 9 patchs. La tâche la plus simple consiste maintenant à créer l'image du patch.

De ICI vous pouvez faire une image 9-patch pour toutes les résolutions - XHDPI, HDPI, IPSM, LDPI en un seul clic.

Answer 4

Utiliser 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 dessinables, par exemple le fond de facebook.

Cela vous aidera à améliorer et à accélérer vos performances, et pour le logo, utilisez des images de patch .9.