Quelle doit être la taille des images TabBar?

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:

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.

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.

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)

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.

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

Référence: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons /] .

La taille 50x50 est donc un bon choix.

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

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