web-dev-qa-db-fra.com

Barre d'onglets iPhone Résolution de l'image de l'article?

Quelle est la résolution de l'image pour l'élément de la barre d'onglets?

Et aussi, veuillez fournir d'autres informations utiles concernant cette image d'élément d'onglet.

Merci d'avance.

43
Amit Vaghela

La documentation indique que l'image de la barre d'onglets est généralement de 30 x 30, mais j'ai trouvé que la meilleure taille pour configurer les images est de 48 x 32 pixels. Cette taille rend toujours et vous donne un peu plus d'espace.

L'image est un PNG avec transparence, seul le masque est utilisé. L'interface utilisateur rend le masque gris lorsqu'il n'est pas sélectionné ou bleu/chrome lorsqu'il est sélectionné.

68
lajos

http://developer.Apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html

Lorsque cela est possible, vous devez utiliser les boutons et icônes fournis par le système dans les barres de navigation, les barres d'outils et les barres d'onglets ... Pour une liste complète des boutons et icônes standard et des instructions sur leur utilisation, voir "Système -Boutons et icônes fournis. "

Bien sûr, toutes les tâches effectuées par votre application ne sont pas standard. Si votre application prend en charge les tâches personnalisées que les utilisateurs doivent effectuer fréquemment, vous devez créer des icônes personnalisées qui représentent ces tâches dans votre barre d'outils ou votre barre de navigation. De même, si votre application affiche une barre d'onglets qui permet aux utilisateurs de basculer entre les modes d'application personnalisés ou les sous-ensembles de données personnalisés, vous devez concevoir des icônes de barre d'onglets qui décrivent clairement ces modes ou sous-ensembles. Cette section vous donne quelques conseils sur la façon de concevoir des icônes qui fonctionnent bien dans les barres de navigation, les barres d'outils et les barres d'onglets.

Avant de créer l'art pour votre icône, vous devez réfléchir à ce qu'elle doit transmettre. Lorsque vous envisagez des designs, visez une icône qui est:

  • Simple et rationalisé. Trop de détails peuvent faire apparaître une icône bâclée ou indéchiffrable.
  • Pas facilement confondu avec l'une des icônes fournies par le système. Les utilisateurs doivent pouvoir distinguer votre icône personnalisée des icônes standard en un coup d'œil.
  • Facilement compris et largement acceptable. Efforcez-vous de créer un symbole que la plupart des utilisateurs interpréteront correctement et qu'aucun utilisateur ne trouvera offensant.

Une fois que vous avez décidé de l'apparence de votre icône, suivez ces instructions lors de sa création:

  • Utilisez le format PNG.
  • Utilisez du blanc pur avec un alpha approprié.
  • N'incluez pas d'ombre portée.
  • Utilisez l'anti-aliasing.
  • Si vous décidez d'ajouter un biseau, assurez-vous qu'il est à 90 ° (pour vous y aider, imaginez une source de lumière positionnée en haut de l'icône).
  • Pour les icônes de la barre d'outils et de la barre de navigation, créez une icône mesurant environ 20 x 20 pixels.
  • Pour les icônes de la barre d'onglets, créez une icône mesurant environ 30 x 30 pixels ...
18
philfreo

Cette déclaration est techniquement incorrecte:

"... seul le masque est utilisé. L'interface utilisateur le rend gris lorsqu'il n'est pas sélectionné ou bleu/chrome lorsqu'il est sélectionné ..."

Vous ne fournissez aucun type de masque. Au lieu de cela, l'image de l'onglet devrait simplement être une image monochrome .png, alias a 1 seule couleur utilisée.

Si vous fournissez une image colorée, UIKit la quantifiera en une image monochrome. Dans le pire des cas, l'image couleur sera de ~ 8000 octets, ce qui représente un gaspillage de ~ 6k (rétine). Le format de fichier doit être .png 24 bits avec transparence pour que la quantification fonctionne correctement. Même s'il s'agit d'un format de fichier couleur, n'utilisez pas la couleur ou vous perdez de l'espace.

L'essentiel est d'avoir la bonne taille, avec les meilleures performances et l'utilisation de la mémoire, utilisez l'une d'entre elles:

Affichage standard
48x32 .PNG, 24 bits avec transparence (mais n'utilisez qu'une seule couleur). Taille du pire cas ~ 500 octets.
x30 .PNG, 24 bits avec transparence (mais n'utilisez qu'une seule couleur). Taille du pire cas ~ 350 octets.

Affichage de la rétine
60x60 .PNG, 24 bits avec transparence (mais n'utilisez qu'une seule couleur). Taille du pire cas ~ 2000 octets.

16
whitneyland

Vérifiez la "référence de classe UITabBarItem" dans le documentation du SDK

5
Dre