Quelle doit être la taille des images TabBar?

99

J'ai des icônes pour un tabBar de taille 100.

J'ai vérifié les directives de l'interface humaine d'Apple de 2013 et il est dit que la taille de l'image devrait être 30x30/ 60x60.

Mais comme la hauteur du contrôleur de la barre d'onglets est de 50, j'ai conservé la taille de l'image à 50x50.

Maintenant, quand je lance le projet, je vois la conception laide ci-dessous:

entrez la description de l'image ici

Une idée de la taille des images que je devrais utiliser pour que le design soit parfait?

Remarque: je n'écris pas non plus de texte (par exemple, Accueil, Recherche, etc.). Le texte du bouton de tabulation est là dans l'image elle-même.

Fahim Parkar
la source
1
"J'ai des icônes pour un tabBar de taille 100." Voulez-vous dire 50?
Blaszard

Réponses:

112

30x30 correspond à des points, ce qui signifie 30px @ 1x, 60px @ 2x, pas quelque part entre les deux. En outre, ce n'est pas une bonne idée d'incorporer le titre de l'onglet dans l'image - vous allez avoir des résultats d'accessibilité et de localisation assez médiocres comme ça.

Garrettmurray
la source
3
Je le savais, mais si je veux des libellés à l'intérieur de l'image elle-même, que peut-on faire?
Fahim Parkar
Si vous envisagez de créer un UITabBar totalement personnalisé, vous devriez probablement le faire, plutôt que d'utiliser des images pour la version UIKit standard. Sinon, je crois que vous vous retrouverez avec un espace mort en bas.
garrettmurray
hmmm qui se passe ... Je vais demander au concepteur de créer des images par défaut pour la barre d'onglets, comme le support Apple ... merci
Fahim Parkar
Merci mon pote. C'était une aide importante et rapide.
Felipe
208

Selon les directives Apple Human Interface :

@ 1x: environ 25 x 25 (max: 48 x 32)

@ 2x: environ 50 x 50 (max: 96 x 64)

@ 3x: environ 75 x 75 (max: 144 x 96)

rsc
la source
Oui, c'est correct selon Apple. Consultez le lien ci-dessous pour plus d'informations developer.apple.com/library/ios/documentation/UserExperience/…
Chamath Jeevan
cool, mais comment est-il possible de faire une image si petite sans flou?
niX
2
A depuis été mis à jour en 23x23 (pour les carrés) ou 25x25 (pour les images circulaires) ( developer.apple.com/ios/human-interface-guidelines/… )
Seop Yoon
Seop, vous pouvez simplement mettre à jour ma réponse pour refléter les dernières informations. Mais j'ai remarqué que j'ai dit "environ 25", donc je considérerais 23 comme étant à l'intérieur de cette plage.
rsc
La plupart du temps, j'utilise des glyphes carrés tels qu'une icône d'accueil, heureux que @SeopYoon l'ait souligné. J'utiliserai 23x23 pour la taille de l'icône de la barre d'onglets.
Contre Bulaquena du
44

Selon les dernières directives Apple Human Interface:

En orientation portrait, les icônes de la barre d'onglets apparaissent au-dessus des titres des onglets. En orientation paysage, les icônes et les titres apparaissent côte à côte. Selon le périphérique et l'orientation, le système affiche une barre d'onglets standard ou compacte. Votre application doit inclure des icônes de barre d'onglets personnalisées pour les deux tailles.

entrez la description de l'image ici

entrez la description de l'image ici

Je vous suggère d'utiliser le lien ci-dessus pour comprendre le concept complet. Parce que Apple met à jour son document à intervalles réguliers

Mihir Oza
la source
2
Cela devrait être davantage voté, car c'est leur nouvelle ligne directrice.
Seop Yoon
Pour savoir comment définir une icône différente pour une barre d'onglets standard ou compacte, consultez cette réponse: stackoverflow.com/questions/49492229/tab-bar-icon-size/...
Marián Černý
2

Selon ma pratique, j'utilise le 40 x 40 pour l'icône d'élément de la barre d'onglets iPad standard, 80 X 80 pour la rétine.

De la référence Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Si vous souhaitez créer une icône de barre qui ressemble à celle de la famille d'icônes iOS 7, utilisez un trait très fin pour la dessiner. Plus précisément, un trait de 2 pixels (haute résolution) fonctionne bien pour les icônes détaillées et un trait de 3 pixels fonctionne bien pour les icônes moins détaillées.

Quel que soit le style visuel de l'icône, créez une icône de barre d'outils ou de barre de navigation dans les tailles suivantes:

Environ 44 x 44 pixels Environ 22 x 22 pixels (résolution standard) Quel que soit le style visuel de l'icône, créez une icône de barre d'onglets dans les tailles suivantes:

Environ 50 x 50 pixels (96 x 64 pixels maximum) Environ 25 x 25 pixels (48 x 32 pixels maximum) pour une résolution standard

firelyu
la source
-3

Merci d'abord avant d'utiliser les codes !!! Créez une image qui couvre entièrement l'élément de la barre d'onglets pour chaque élément. Cela est nécessaire pour utiliser l'image que vous avez créée comme bouton d'élément de la barre d'onglets. Assurez-vous que le rapport hauteur / largeur soit le même pour chaque élément de la barre d'onglets. Ensuite:

UITabBarController *tabBarController = (UITabBarController *)self;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

int x,y;

x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; 
y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like.

//because the whole tab bar item will be replaced by an image, u dont need title
tabBarItem1.title = @"";
tabBarItem2.title = @"";
tabBarItem3.title = @"";
tabBarItem4.title = @"";

[tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item
James
la source